个人博客搭建

本文首发于博客冰山一树Sankey，去博客浏览效果更好。

前言：博客框架介绍

参考搭建博客、自己的小窝？快来看看这些开源静态网站生成器_灵魂画师牧码-CSDN博客

1. Hexo

GitHub 仓库：https://github.com/hexojs/hexoStars 数量：29.6k官方网站：https://hexo.io

Hexo 使用 Node.js 开发，很流行。它有数以百计的主题和插件，支持 GFM（GitHub Flavored Markdown），只需要一条命令也能将 Hexo 网站部署到 GitHub Pages、Heroku 等平台上。目前 Vue.js 的官方文档就由它驱动着。不过 Hexo 的速度对比其他框架而言，并不算非常快。

hexo原理

hexo是怎么工作的 | 把生命浪费在美好的代码上 (coderunthings.com)

hexo原理浅析 - SegmentFault 思否

2. Hugo

GitHub 仓库：https://github.com/gohugoio/hugoStars 数量：41.9k官方网站：https://gohugo.io/

Hugo 使用 Go 语言开发，号称”世界上最快的网页生成器“。Stars 数量远高于 Hexo。目前有三百多个主题。

3. VuePress

GitHub 仓库：https://github.com/vuejs/vuepressStars 数量：15.6k官方网站：https://vuepress.vuejs.org/zh/

VuePress 在一众生成器之中算是一个”后起之秀“，起初由尤雨溪牵头开发。等发展到一定程度之后，将会取代 Hexo 成为 Vue.js 官方文档的生成器。它基于 Vue，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。

4. MkDocs

GitHub 仓库：https://github.com/mkdocs/mkdocsStars 数量：9.1k官方网站：http://www.mkdocs.org/

MkDocs 使用 Python 开发，更偏向于文档生成。用户不是特别多，只有十几个主题。

5. Gatsby

GitHub 仓库：https://github.com/gatsbyjs/gatsbyStars 数量：42.5k官方网站：https://www.gatsbyjs.org/

Gatsby 作为 GitHub 上面 #static-site-generator 话题最多 Star 数量的项目，基于 React。它超越了静态网站，更强大。可以从任何地方加载数据。

6. Docsify

GitHub 仓库：https://github.com/docsifyjs/docsifyStars 数量：12.6k官方网站：https://docsify.js.org/

Docsify 同样基于 Vue，偏向于文档，动态生成网页，最大的特点是它只有一个 index.html，在你打开网页的时候才开始生成。Docsify 还兼容 IE 11。缺点是对 SEO 并不太友好。

7. Jekyll

GitHub 仓库：https://github.com/jekyll/jekyllStars 数量：39.8k官方网站：https://jekyllrb.com/

Jekyll 使用 Ruby 开发，它足够简单，能够让你专注于内容。它有将近四百种主题和两百多个插件，光这两项就足以证明它的优秀。

一. 安装Git工具

下载地址：

Git官网下载：https://git-scm.com/

国内镜像下载：https://npm.taobao.org/mirrors/git-for-windows/v2.22.0.windows.1/Git-2.22.0-64-bit.exe

国内其他版本下载：https://npm.taobao.org/mirrors/git-for-windows/

建议使用国内镜像下载，速度最快！ ps:我自己用了官网下载，下载了20多分钟

下载后请安装请参考这篇文章

Windows系统Git安装教程（详解Git安装过程）

装完成后在命令提示符中输入git –version验证是否安装成功

git --version

二. 安装Node.js

Node.js 是一个开源和跨平台的 Javascript 运行时环境。 它几乎是任何类型项目的流行工具！

Node.js是一个事件驱动I/O服务端Javascript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

Download | Node.js (nodejs.org)这个网站直接进去下载就行

具体安装教程可参考这篇文章

nodejs下载安装及配置环境

可通过命令行进行查看是否安装成功，打开命令提示符，输入node -v和npm -v，如果出现版本号，那么就安装成功了。如下图

因为node.js用的是国外的网站，为了提高下载速度，可使用国内淘宝镜像的方法。

命令

npm config set registry https://registry.npm.taobao.org

验证命令

npm config get registry

如果返回https://registry.npm.taobao.org，说明镜像配置成功。

三. 安装Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页

官网文档 | Hexo

在你的某个磁盘中创建一个空的文件

比如我的这里是D/HexoBlog，以后所有的git命令都要在这个文件夹里面运行

在该文件夹下点击 Git Bash Here，输入以下 npm 命令即可安装

$ npm install hexo-cli -g

输入hexo -v即可检验是否安装成功，我这里就不演示了。

具体参考：

φ(゜▽゜*)♪咦，又好了！ (yshawlon.cn)

(5条消息) 使用 Hexo 搭建静态个人博客与绑定个人域名_bwqiang的博客-CSDN博客

安装好后初始化，

$ hexo init
分别执行
$npm install

执行npm install之后

以上如果报错就多运行几次，可能是网络不好，比如我下面的错误

执行hexo g：生成页面文件，也就是一些html,css，js文件，这样打开就是一个渲染好的网站

浏览器，输入网站，localhost:4000,就可以看到初步的本地博客，以后优化博客都要先本地看，再上传到github

四. 创建Github仓库

没有GitHub账号的先注册一下 https://github.com/join，很简单。不会就去网上搜创建repository。右上角 加号 New repository。注意：repository名字必须是自己 GitHub 账户名，否则出现 404 错误。

我这里以及弄好了，没有截图，仓库名字就是你的github名字.github.io,

比如我的

bingshanyishu.github.io

这里借别人的图用一下，谢谢

注意：下面readme也要勾选，

最后就创建成功了。

后面上传博客还需要注册令牌：

点击settings

找到了再点击developer settings

点击personal access token

然后点击创建token，

note可以随便命名，expiration建议勾选no expiration,意思就是没有时间限制。最后生成令牌，保存好令牌，后面用，最好单独保存，因为令牌只能看一次，也就是注册这次，以后都不能看令牌了。

五. 上传到github仓库 5.1 _config.yml修改

找到在D:HexoBlog下的_config.yml文件，然后打开，我这里使用vscode打开，也可以用记事本打开。

找到：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

修改后：（注意：后面冒号的值需要有一个空格）

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: 自己的仓库地址如下图，直接复制粘贴 //自己的仓库地址
  branch: main

5.2 生成ssh

右键单击鼠标，点击 Git Bash Here输入以下命令：（第一次使用需要），后面不需要了

git config --global user.name "Name"
git config --global user.email "Email"

name是你的github名字，email是你注册github的地址。

生成密钥：

再输入，email是你的github邮箱

ssh-keygen -t rsa -C "Email"

按下四次enter后，就可以得到ssh了

复制ssh

找到c盘，用户，个人账户文件下的.ssh文件

例如我的路径：C:Users27532.ssh，27532，和你们不一样

打开id_rsa.pub文件打开，后直接Ctrl+A,Ctrl+C。就复制好了ssh密钥。

5.3 绑定github

打开github，点击头像，再点击settings,找到SSH and GPG keys点击

新建SSH，title可以随便取，Key粘贴刚才复制的**.ssh**文件内容

最后点击add ssh key即可

5.4 本地连接github

你的博客文件夹下，右键单击鼠标，点击 Git Bash Here输入以下命令，如果如下图所示，出现你的用户名，那就成功了

ssh -T git@github.com

这样就将git与github仓库连接起来了

5.5 上传

你的博客文件夹下，右键单击鼠标，点击 Git Bash Here输入以下命令

npm install hexo-deployer-git --save

这样以后可直接通过命令上传博客

最后点击 Git Bash Here输入以下命令

hexo g

hexo d

输入hexo d 后第一次会弹出github对话框，然后点击token，输入刚才产生的令牌就可以将其本地的文件上传到github

最后输入网址http://bingshanyishu.github.io/ 即可查看网址了

注意：每次修改本地文件后。

每次使用命令时，都要在D:HexoBlog目录下。

hexo cl
hexo g
hexo s  //本地查看
hexo d   //上传到github

六. 参考

Github + Hexo 搭建个人博客超详细教程_feezxe的博客-CSDN博客

使用 Hexo 搭建静态个人博客与绑定个人域名_bwqiang的博客-CSDN博客

基于Hexo的matery主题搭建博客并优化_悟尘修行记-CSDN博客_hexo matery