零成本搭建个人博客：Hexo+Github Pages快速建站指南

前言

你是否有撰写个人博客的习惯呢？或用来记录心路历程，或用来分享生活点滴，或用来积累学习经验。在微博、微信等轻量短消息社交网络占据互联网主流的许多年前，撰写博客是一件非常流行的事情。时至今日，许多博客分享网站已经逐渐没落甚至消失。但仍有不少用户群体仍然有着撰写博客的习惯。如果你也想通过写博客分享自己的精彩人生，互联网上也有像是简书、CSDN、新浪博客等传统博客写作平台。除此之外，拥有一个属于自己的博客网站，对于博主来说似乎是一件更酷的事情。本文，将详细介绍一种低门槛、零成本的个人博客搭建方法。简单来说，就是利用Hexo这个工具，借助免费的Github Pages帮助我们快速建站。这是一种很常见的方法，稍有优点建站经验的IT从业者应该都知道。

准备工作

首先要进行一些准备工作。准备工作主要是Github账号的注册和相关软件的安装。准备工作目的主要有两个：一是拥有可用的Github Pages；二是搭建Hexo正常运行的环境。本教程默认使用Windows环境，如果你用的是Linux的话，估计早就知道该怎么做了。

Github账号注册

作为世界上最大的程序员交友网站，哦，不是，是代码托管网站，Github给广大程序员带来了无尽的财富和巨大的便利。Github尚未被G*F*W这个邪恶的怪物Block，我真的应该先庆幸后骂街。如果你已经有了Github账号，自然可以略过本节内容。如果没有，注册GitHub也不是一件很难的事情。
首先进入Github这个网址进行账号注册。虽然是全英文网站，但是这种程度的英文应该难不倒大家吧。
第一步，依次输入用户名、邮箱地址、密码，完成机器人验证，点击创建账户。

第二步，自然是选择免费版本的账户。

第三步，填写一些个性化的信息，这里直接跳过即可。

第四步，进入你的注册邮箱进行账号验证。

第五步，验证完毕后会让你建立一个代码仓库。我们这里将代码仓库的名称命名为：yourname.github.io，比如我这里既是zimingjushi.github.io。其他暂时不用管，创建仓库即可。

完成以上工作后，我们就获得了一个空的代码仓库，Github Pages的准备工作就算完成了。

GitHub Desktop安装

Github上的代码是使用Git工具来管理的，为了简单起见，我这里直接使用了Github官方的桌面图形化Git工具GitHub Desktop。有经验的同学可以选择自己喜欢的工具。
GitHub Desktop的下载地址在此： GitHub Desktop。虽然只有87M，但是在我的默认网络环境下，下载速度实在让人难以忍受，开了Brook后瞬间就起飞了。安装完成后打开软件，选择登录你的Github账户。

配置Git这一栏，是设置提交代码时显示的信息。如果你不在意，直接继续就行。

最后，我们可以在界面上看到我们注册账户时创建的代码仓库zimingjushi.github.io。

Hexo依赖环境的安装

Hexo的依赖只有Node.js和Git。首先安装Node.js，要求版本时6.9以上，下载地址在此：Node.js。选择长期支持版本还是最新版本看自己的喜好了。我喜欢用最新的，因此选择了Current版本。双击安装下载下来的msi文件。没什么好说的，一路下一步，选项都是默认的。

然后，还需要安装Git，下载地址在这里：git-scm。如果你会用这个Git，那么上面那个GitHub Desktop其实就不用安装了。双击安装下载下来的exe文件。如果你懂，当然可以进行个性化安装和设置。否则无脑地默认选择并下一步即可。

Hexo的安装

先简单介绍一下Hexo。Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。前面我们已经完成了Hexo依赖环境的安装，下面安装Hexo就简单很多了。在桌面或者其他任意文件夹下点击鼠标右键，选择”Git Bash Here”，打开集成在Git里面的命令行终端。
为了使下面的安装顺利一些，建议更换npm镜像源，终端下输入以下命令：

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

然后运行下面的命令安装hexo-cli。

$ npm install -g hexo-cli

此时在终端中运行hexo命令，如果有如下输出，表明安装成功。

网站搭建

完成上面的准备工作后，我们就可以利用安装好的工具进行网站的搭建了。网站的搭建基本可以分为两大步骤：通过Hexo生成静态网页文件和在Github Pages上进行部署。下面分别讲述这两个步骤。

Hexo静态网页文件的生成

现在电脑上选择一个合适的目录进行Hexo工程的初始化工作，这个目录是生成静态网页文件的关键，建议时常备份。我这里将目录选择为D:Hexo，在这个目录下点击鼠标右键，选择”Git Bash Here”，打开命令行终端，输入Hexo的初始化命令。

$ hexo init

hexo将会下载一些工程文件到这个目录中去。整个下载过程可能比较漫长，请耐心等待。

下载完毕后，在当前目录中将会有以下这些文件。其中，_config.yml这个文件中可以进行一些个性化的配置。

这里先进行一些简单的修改：设置了网站的标题和作者的名字。

其他更多配置说明可以参考官方文档：configuration docs 。
接着，我们运行以下命令生成网站的静态网页文件。

$ hexo generate

命令运行完毕后，可以看到当前文件夹下多出了一个名为public的目录，里面存放的就是网站的静态文件。

再运行以下命令使这个网站在本地先运行起来，看下具体效果。如果弹出防火墙警告请授予访问权限。

$ hexo server

此时，通过浏览器打开网址，查看运行效果。

看到没有，一个看起来还不错的博客网站就在本地成功运行起来了。而且还自带了一篇名为”Hello World”的博客文章。

Github Pages博客部署

目前我们达到的效果只是能够在本地局域网内访问，我们当然更希望我们的博客文章可以在任意外网环境都可以访问。要达到这个目的的办法其实有很多，不过本文是以免费为目的的。所以稍微有些成本的方法就不探讨了，直接使用Github Pages这个免费的空间部署我们的博客。
先删除之前在Hexo工程下生成的public目录。打开GitHub Desktop这个软件，将我们之前已经创建好的工程clone下来。注意将目的文件夹选择为Hexo工程下的public目录。

clone完毕后再次运行命令

$ hexo generate

回到GitHub Desktop可以看到有很多修改过的文件加入了待提交列表。填写一下Git Message，并选择提交到当前分支。

然后再Push到远程分支。此时可以看到我们的GitHub代码仓库多出了很多文件。

此时，在浏览器中输入 https://yourname.github.io/，就可以看到我们构建的博客网站了，此时这个网站是外网可访问的。

在Github Pages上进行博客部署，官方推荐使用hexo-deployer-git这个工具。我这里进行了一些简化，总之就是将 public下的内容上传到远程GitHub仓库中，疏途同归，大家可以根据自己的喜好选择。

博客的撰写

目前，我们已经有了一个可以外网访问的博客网站，并且有了一篇已经写好的博客。那么，如果我想写新的博客时要怎么做呢。首先，我们在D:Hexosource_posts目录下新建一个.md文件，请务必使用英文、数字、字符作为文件名。例如，我这里创建一个名为First-Blog.md的文件。
使用任意文本编辑器打开这个文件，并设置文章的Front-matter。所谓Front-matter，就是文件最上方以 —- 分隔的区域，用于指定个别文件的变量。常见的变量配置如下：

title: 文章名称

date: 文章日期

tags:

- 文章标签一

- 文章标签二

categories: 文章分类

例如First-Blog.md中配置好Front-matter如下图。

Front-matter以下就是正文部分，使用Markdown进行撰写。具体Markdown的语法和撰写本文就不再做详细展开了，并不是很难的东西，自行学习即可。我将网上常见的Markdown语法实例直接复制到正文部分，就当是博客的内容了。博客写完之后，需要重新运行以下命令生成相应的静态文件。

$ hexo generate

此时回到GitHub Desktop发现我们的本地工程又有了新的变化。跟上面一样，提交修改并Push到远程分支。

完成后刷新https://yourname.github.io/这个网址，就可以看到我们刚发布的博客文章了。

本文对.md文件的配置相对简单，想要了解更为详细的配置可以参阅官方文档。

主题的配置

基于目前的操作，其实你已经有了一个可以撰写基于Markdown语法的博客文章，并可以在外网发布和访问的个人博客网站了。但是，你可能会觉得Hexo自带的前端主题不是那么好看。为了让你的网站看起来更酷，我们可以选择自行安装第三方主题。在hexo themes中，你可以浏览并选择自己喜欢的主题。
这些主题基本上都会发布在GitHub上，而且也都有比较详细的安装和配置步骤。这里任意选择了一款名为Anatole的主题进行简单的示范。
首先，在hexo-theme-Anatole-releases此处下载主题文件，并解压到D:Hexothemes目录下，重命名为anatole。

然后，安装主题所需要的依赖。在D:Hexo下运行以下命令即可。

npm install --save hexo-render-pug hexo-generator-archive hexo-generator-tag hexo-generator-index hexo-generator-category

接着，修改 _config.yml主题设置，并增加以下配置

archive_generator:

per_page: 0

yearly: false

monthly: false

daily: false

最后，重新生成静态文件并提交到远程仓库，上面说过好多次不再赘述了。不过生成前最好删除public下的所有内容，但是不要删除这个文件夹和隐藏文件。
完成后刷新https://yourname.github.io/网址，就可以看到新的博客主题了。具体每个主题还会有很丰富的配置，可以参阅每个主题作者撰写的文档。

后记

可能对于没有相关经验的同学，看到这篇文章会觉得无从下手。其实本文只是描述的比较详细而已，实际的核心操作并不多。各种软件的安装没有什么难度，几个简单的命令执行起来也很方便。如果你比较熟悉Git操作和Markdown语法，那么本文基本上没有任何难度可言了。为了兑现标题中零成本的承诺，所以本文对很多东西没有深入展开。比如将博客运行在自己的服务器上，内网穿透，配置个性化域名等等。如果只是撰写一些文字博客，又对个性化域名没什么兴趣，那么Hexo加Github Pages的方法，已经可以满足你的绝大部分需求了。