背景

喜欢写 Blog 的人，会经历三个阶段。 第一阶段，刚接触 Blog，觉得很新鲜，试着选择一个免费空间来写。 第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。 第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。

这是阮一峰在博客中写到的关于 Blog 的想法，而这里的第三阶段的实现就是利用 GitHub Pages 搭建博客。

使用 GitHub Pages 功能搭建博客的好处有：

Hexo 是基于 Node.js 的一款静态博客框架，如果想要搭建博客，不想自己写页面的话可以考虑用 Hexo，其中有很多的简洁主题可供选择，同时 Hexo 支持 Markdown 语法，编辑文章更加方便，快捷。

注：此篇分享还以 Mac 为例哈

Hexo 文档有对 Hexo 安装及使用的详细介绍，推荐阅读。这里我主要写自己安装的步骤、踩过的坑以及一些优化的方法。

在正式安装 Hexo 之前，我们需要确认电脑中是否已安装下列应用程序:

当然，我们还需要 GitHub 账号，如果没有请注册。 注册之后记得一定要前往邮箱确认注册，否则无法使用 GitHub Pages。

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。终端输入如下命令:

输入管理员密码( Mac 登录密码)即开始安装。

这里有个小坑：Hexo 官网上的安装命令是，安装时不要忘记前面加上，否则会因为权限问题报错。

初始化

使用终端到一个您指定的目录，执行以下命令(命令中的是您将要建立的文件夹的名称)：

使用终端到文件夹下，执行以下命令，安装npm：

好了，现在可以试试看是否已经初始化成功，执行如下命令，开启本地 Hexo 服务器：

此时，浏览器中打开网址(默认是4000端口) http://localhost:4000 ，能看到如下页面：

Hexo 本地

这里我踩了个不算坑的坑，终端输入后没有成功，我也在网上搜到了很多解决办法，但是都没有奏效，后来我尝试改了下端口就成功了，也就是说默认的4000端口无法连接。如果您的情况跟我一样，尝试了网上的很多解决办法之后依然无效，那您也许可以尝试输入命令改一下端口试试看。

创建仓库

开启 GitHub Pages

点击，你将会打开这个库的 Settings 页面，向下拖动，直到看见 GitHub Pages，如图：

gh-p

修改全局配置文件

Hexo 官方文档中有对全局配置的详细说明，推荐阅读。

小坑提醒，修改本地所有的配置文件时，注意所有的冒号后边都要加一个空格，否则执行 Hexo 命令时会报错，一定注意。

找到本地文件夹下，打开后滑到最后，修改成下边的样子：

您需要将后的所有换成你自己的用户名，或者也可以在下图位置获取：

https 地址

然后，您需要为自己配置身份信息，终端输入和换成您自己的 GitHub 用户名和邮箱)：

终端到文件夹下执行生成静态页面命令：

此时若出现如下报错：

尝试执行命令：

若无报错，自行忽略此步骤。

然后在当前目录下，终端输入：

这里踩了个坑，如果您执行命令仍然报错：无法连接 git 或找不到 git，则执行如下命令来安装：

完成安装之后，再次执行和命令。

随后按照提示，分别输入自己的 GitHub 用户名和密码，开始上传。

完成上传之后，通过 (换成您自己的仓库名，也就是用户名)来访问自己刚刚上传的网站。

终端到文件夹下，执行如下命令新建文章：

名为的文件会建在目录下。

所有的文章都会以形式保存在文件夹中，只要在文件夹中新建类型的文档，就能在执行的时候被渲染。新建的文章头需要添加一些信息，如下所示：

文章编辑完成后，终端到文件夹下，依次执行如下命令来发布：

至此，Mac 上搭建基于 GitHub Pages + Hexo 的博客就完成了。

下面的内容是介绍安装 Themes 、个性化设置以及优化。

如果您喜欢 Hexo 默认的主题的话，可以跳过这部分。如果您想换一个主题的话，可以到Hexo 主题挑选自己中意的主题。

这里以nexT 主题为例。

终端到目录下执行如下命令(这是目前的稳定版本，不是最新版。最新版有一些新特性，但是可能会不稳定，所以这里推荐选择安装稳定版)：

如果想尝试最新版，请执行如下命令：

打开目录下的，找到修改为。

终端到目录下，依次执行如下命令(每次部署文章的步骤)：

至于更改博客的名称、描述、头像等，只需要修改文件和文件中对应的属性名称即可(不要忘记冒号后加空格)。

为博客加上 GitHub 丝带

这里以 Next 主题为例(其他主题也差不多)，添加 GitHub 丝带：在中加入相关代码，记得修改自己的链接。

添加 README.md

每个项目仓库下一般都有一个 文件，但是使用 hexo 部署到仓库后，项目仓库中是没有 文件的。

在 目录下的 目录下添加一个 文件，修改站点配置文件 ，将 参数的值设置为 。

保存退出即可。

为博客添加 LICENSE

在主题配置文件中添加下面这段代码(添加之前先看看您的主题配置文件是否已经包含这段代码，已经包含就不用添加了，因为重复会报错)，LICENSE 会显示在侧边栏。

修改文章底部的带 `#` 号的标签

如果您觉得不好看，想改成图标，那么请按照下面修改。 打开，搜索(组合键+)，将换成。

将阅读量改为热度

很多人将文章标题下的 阅读次数 改为了 热度，如果您喜欢的话可以这样修改。

打开文件，查找这几个字，可以看到，在中的被定义为，把这里的改为：

那么怎么在页面中显示呢？打开Next主题文件夹中，在这个文件里加上摄氏度的标志，在下面增加一行即可：

博文置顶

替换文件 内的代码为：

在文章 Front-matter 中添加 top 值，数值越大文章越靠前，如：

NexT 首页文章 加载更多 设置

这里只说一个方法：编辑文章时，在您希望显示 按钮的地方，加上：

more

首页分割线

  在 文件中添加以下代码，可以修改博客首页中每篇文章的分割线样式，是长度，是宽度。

小图标设置

博客中一切小图标都可以在fontawesome 图标库自行搜索(qq、微博、微信等图标是有的，但知乎、豆瓣等图标目前还没有)。

设置网站的图标Favicon

准备一张 icon 图标文件，放在 source 目录下就可以了，在中找到 favicon 的设置：

主页文章添加阴影效果

具体实现方法

打开文件，添加以下代码：

隐藏网页底部 powered By Hexo / 强力驱动

打开，使用 隐藏符号之间的代码即可，或者直接将这段代码删除。位置如图：

隐藏底部 Hexo

添加 SSH key 到 GitHub

终端执行如下命令，检查SSH keys是否存在。

如果显示如下信息(下面是我个人的显示，也许您跟我显示的不一样，但重点是只要有和)，就说明 SSH keys 已经存在了：

如果存在，则直接跳过下一个步骤进入，否则请继续下一步骤 。

终端执行如下命令生成新的 SSH key，注意将换成你自己注册 GitHub 的邮箱地址。

默认会在相应路径下生成和两个文件。

1.3.将 SSH key 添加到 GitHub 中

终端依次输入：

复制所有显示的内容

进入GitHub –> Settings –> SSH and GPG keys –> NEW SSH key，如下图所示：

settings

ssh_key

Title 里任意添一个标题，将复制的内容粘贴到 Key 里，点击下方 Add SSH key 绿色按钮即可，如下图所示：

add_ssh_key

绑定独立域名

域名解析详细的步骤这里我就不写了，给个图：

dnspod

图中设置国内国外的原因是想让博客加载速度更快，方法请阅读后文 将个人博客同时部署到 GitHub 和 Coding。

进入 目录下，添加并打开 文件，输入您的域名，重新上传您的博客。

在 GitHub 中打开您自己的博客仓库，进入库的 Settings 界面，如果看到了如下提示，说明配置成功了。

CNAME

在这一系列的操作中，修改 NS 服务器、设置解析等等，都需要一定的时间。短则10分钟，长则24小时，最长不会超过72小时。如果超过72小时，请检查自己的配置过程，或者修改自己本地的 DNS 服务器。

将个人博客同时部署到 GitHub 和 Coding

Coding 可以理解为国内的 GitHub。通过将博客同时部署到 GitHub 和 Coding，可以提升博客的加载速度。

这里有个提醒，Coding 会强制用户在网站上挂推广图标，通过 Coding 加载博客还会有5s广告，如果觉得这样不好，可以选择放弃部署在 Coding 上。还有一个选择，就是花钱成为 Coding 的会员，这样上述的问题就都没有了。

dnspod

这样就可以实现从国内访问就通过 Coding 加载博客项目，从国外访问就通过 GitHub 加载博客项目，从而提升加载博客的速度。

压缩代码

压缩代码也是一个优化加载速度的方法。

目前知道的有两个插件可以压缩博文，hexo-all-minifier 插件和 gulp 插件。hexo-all-minifier 使用比较简单，也可以压缩图片，不过对文章缩进不支持。如果您对文章缩进有要求，可以暂时使用 gulp 压缩手段。

安装 hexo-all-minifier，在站点的根目录下执行以下命令：

编译的时候就会自动压缩 HTML、JS、图片。详情参考插件介绍 hexo-all-minifier。

Hexo 依赖 gulp 插件安装，在站点的根目录下执行以下命令：

在目录下，新建 并填入以下内容：

生成博文时执行 就会根据 中的配置，对 public 目录中的静态资源文件进行压缩。

网站验证

验证方式有几种，推荐最简单的两种：文件验证和 CNAME 验证。

添加并提交sitemap

安装 Hexo 的 sitemap 网站地图生成插件，终端到：

在中任意位置添加如下代码，但要看清您的 Hexo 版本。

如果您的 Hexo 版本是 2.x.x

如果您的 Hexo 版本是 3.x.x

配置成功后，会生成和，前者适合提交给谷歌搜素引擎，后者适合提交百度搜索引擎。

百度 sitemap 提交如图，Google 也是一样的：

sitemap_yz

验证成功之后就可以开始推送了。Google 的收录比较快，通常第二天就能搜得到，百度就比较慢了。

主动推送

安装主动推送插件，终端到：

在根目录下，把以下内容配置到站点配置文件中:

至于上面提到的可在百度站长如下位置找到：

token

其次，记得查看中的，必须包含站长平台注册的域名，比如:

接下来添加一个新的 类型：

执行的时候，新的链接就会被推送了。原理：

自动推送

把 NexT 主题配置文件中的设置为，就可以了。

添加蜘蛛协议

在目录下新建一个文件，添加下面的一段代码(可根据自己的需要修改)：

然后到站长(这里以百度为例，Google 一样)更新一下，就像这样：

robots

自己搭建博客时，很是折腾了一番，也学习到了很多知识，阅读了很多相关的博文，在此向相关博文的作者表示感谢，谢谢你们的文章让我进步。同时，我看到有很多人想拥有自己的博客或者优化自己的博客，期间可能会遇到很多问题，我也是这么一个坑一个坑踩过来的，所以我就写了这么一篇自己折腾博客的分享，希望可以在帮助自己的同时帮助到别人。(如果踩了新坑的话，一定会更新的。)