个人博客的搭建教程-基于Hexo+Github

一、框架简介（基于Windows系统）

Hexo是高效的静态站点生成框架，它基于Node.js，能在短时间内生成静态页面，只需要通过一条指令就可以部署到GitHub或其他托管平台。Hexo的文章支持MarkDown的所有语法功能，极大简化编辑和排版过程，能够让你将精力更多的放在文章内容上。而且，Hexo支持多种多样的实用插件完善自己的站点，如评论系统、访问统计、文章加密、站内搜索、音乐插件等。

当然本教程只是初级介绍，关于该方面的知识，我也会在以后的学习工作中进行新的尝试或改进。

二、前期准备

前期主要是安装Hexo、Git、Node.js、Hexo等软件以及创建GitHub仓库。

2.1 创建GitHub仓库

创建仓库名字必须为用户名.github.io。如果不用此名会导致页面出现问题，尽管这个问题可以使用其他方法进行解决，但为了尽可能的简单易行，我还是建议使用如上建议的方法

• 注册GitHub账号

首先是注册GitHub账号，这方面内容就不过多解释了，需要注意的是一点要使用短小精悍，并且容易让别人记住的用户名，因为后面你博客网址的地址会由你的用户名组成。

• 创建托管博客的仓库

点击右上角的New repository ——> 在新的页面中填写Repository名字：用户名.github.io，其他都是默认选项，然后点击Create repository按钮，进行提交 ——>创建完成

我这里显示红色是因为我先前已经创建过了，正常情况下是绿色。

2.2. 安装Git

Git是一个开源的分布式版本的控制系统，用于敏捷高效的处理各种项目。我们以此为提交工具推送构建好的页面到GitHub上去。Git的下载页面，点击这里。整个安装流程，和其他win10下的软件安装流程一样，只需要一路next即可。

当在你的windows的命令行(win+R，然后输入cmd，回车)中输入git --version ，然后出现软件版本号的时候，说明此时你已经安装成功。

2.3. 获取SSH Key

该步骤相当于常见的“记住密码”选项，如跳过此步骤，每次进行推送时都要输入自己的GitHub账号和密码，会比较麻烦。

• 首先在本地电脑配置Git，在windows的命令行(win+R，然后输入cmd，回车)中输入以下三条命令，如下图所示：

# 这里需要替换成你自己的用户名和邮箱地址
git config --global user.name wenkaiyan-kevin
git config --global user.email 610498675@qq.com
# 输入下面命令后，会让你确认三次信息，这里都选择默认即可，也就是连续按三次回车即可
ssh-keygen -t rsa -C 610498675@qq.com

• 如果前三步都正常的话，那么会在你的C:\Users\wkyan\.ssh （当然，实际情况中你需要把我的用户名wkyan替换成你的真实路径）路径下生成两个文件，分别是id_rsa和id_rsa.pub 两个文件，其中在id_rsa.pub 文件中有你的公钥，用记事本打开，然后把里面的内容全部复制。

• 通过以下三步，把之前复制的公钥复制进来，然后提交，完成所有任务

• 如果一切顺利的话，可以在命令行输入：ssh git@github.com进行测试，输出信息会显示成功字样。

2.4. 安装Node.js与Hexo

Node.js是底层依赖，Hexo是上层应用，这里只需要用到Node.js附带的npm包管理器，并不需要大家去学习Node.js的语法。

2.4.1 安装Node.js

Node.js的下载地址请点击这里。点击安装包一路默认安装即可，可能你需要提前在你的电脑上安装python，最后在windows的命令行(win+R，然后输入cmd，回车)中输入npm -v ，然后出现软件版本号的时候，说明此时你已经安装成功。

2.4.2 安装Hexo

Hexo的安装需要在windows的命令行(win+R，然后输入cmd，回车)中使用Node.js的npm包管理器进行安装。命令入下（期间会出现WARN黄色信息，这是正常现象，无需关心）：

# hexo-cli:安装的包
# -g:设置为全局变量
npm install hexo-cli -g

三、搭建与发布

3.1 博客初始化

在本地磁盘中（不要建在桌面或者C盘）创建一个文件夹，可以命名为0_MyBlog 。接下来打开你的windows的命令行，切换至你的博客文件夹路径下，然后输入：

hexo init

期间会出现WARN黄色信息，这是正常现象，无需关心。最后会显示Start blogging with Hexo!

3.2 本地预览

同样在windows的命令行，你的博客文件夹路径下，输入以下命令：

# 生成静态文件
hexo g

# 启动本地预览服务
hexo s

在本地浏览器中输入http://localhost:4000，查看当前博客状态

3.3 配置站点

输入下面的命令进行推送本地文件到github仓库的配置，如果你想重新安装博客，那么这条命令需要重新安装。

# 一定不要忘记安装在当前目录下使用命令
npm install hexo-deployer-git --save

然后，就是修改当前博客下面的_config.yml文件中的配置信息

#####修改配置文件
deploy:
  type: 'git'
  repo: 'https://github.com/wenkaiyan-kevin/wenkaiyan-kevin.github.io.git'
  branch: master

关于repo地址的获取，你需要登录你的github，然后进入你为博客网站新建的仓库中，按照图中所示即可获取。

3.4 推送站点

最后执行完以下三条命令后，即可完成博客的构建，如果出现time out的信息，那说明你的网络速度有问题，你需要多尝试几次就好了。

# 清除缓存
hexo clean
# 生成静态网页
hexo g
# 把所有文档推送到github(如果是第一次，可能会输入账号密码)
hexo d

然后，打开浏览器，输入https://wenkaiyan-kevin.github.io/ ，就可以让其他人访问你的网站了。

四、站点维护

4.1 更换主题

hexo的主题有很多，具体有哪些主题可以访问这里。以我的主题为例，如果想更换博客主题，那么只需要以下几条命令，当然执行的当前路径必须是你的博客所在路径下。

# 下载安装主题
npm install -S hexo-theme-icarus
# 切换成安装的主题
hexo config theme icarus

# 重新发布
hexo clean && hexo g --d

4.2 发布新的博客

使用MarkDown书写你的博客文档，然后复制到你本地博客文件夹的source/_posts/下面即可，然后重新发布站点

# 重新发布
hexo clean && hexo g --d

4.3 图床

如果是你需要图床的话，可以尝试img.chr 。

五、其他

如果觉得这篇博文对你有帮助，请记得打赏，更多新鲜趣闻记得关注我的B站账号。