使用 Hexo + Github Pages 搭建独立博客

How to build a blog step by step.

手把手教你搭建独立博客。


初心

如今互联网上有很多现成的博客服务,比如博客园、CSDN、新浪博客,只需注册账号便可以在这些平台上拥有自己的博客了,如果图方便省事,那么利用现成的博客服务是个不错的选择。

但,这些博客服务都缺乏个性,界面不够美观,又或者是充斥着一些广告信息,作为一名程序员、设计师或者其他行业的人,拥有自己的独立博客或者个人网站总是一件很酷的事。

做网站是一件简单的事,同时又是一件麻烦的事。简单在于可以利用很多现成的框架来省时省力,麻烦在于定制自己理想的界面样式和内容是需要付出很多精力的。

因为兴趣,因为表达的欲望,因为记录生活的需求,因为分享技术的快乐,让我们开始搭建一个属于自己的独立博客吧!

本文介绍的搭建网站的方法基于 Hexo框架Github Pages ,在我看来,这种方法是很值得选择的。因为首先它利用了Hexo这个自动生成静态博客的框架,所以不需要编程经验;其次网站托管在Github的服务器上,流量和空间都是免费的,稳定性很高,更新网站很方便,是一种省时省力的好选择。

注:

  • 本教程会提到所有搭建独立博客过程中的要素,但有些部分可能不会非常细节,比如hexo的安装和操作,因为这些内容官方文档里都有,我会给出链接。
  • 本教程适用于任何人,无需编程经验,同时适用于 MacOS, Linux 和 Windows 用户。

搭建流程

  1. 创建一个属于自己的 Github Pages
  2. 购买域名并绑定到自己的 Github Pages
  3. 配置 Hexo ,搭建网站

创建 Github Pages

Github Pages 本身就是 Github 为用户提供的一个介绍项目、发表技术文章的网站。

当你创建了它,这时可以认为你已经拥有了一个网站,只不过这个网站没有内容。

Github Pages 的网站内容和样式全部可以由用户自己定制,网站空间无限,流量免费,Github为你维护,安全又稳定,而且你可以很轻松的更新它。

Github Pages 实际上是一个 Github 仓库,这也就解释了为什么其很容易更新,因为网站的样式和内容都存储在该仓库中,当你更新仓库时,网站也自动更新了。

创建 Github Pages 分为2步:

  1. 首先需要注册一个 Github 账号。
  2. 然后创建一个仓库,仓库名为 username.github.io ,username 就是你的 Github 用户名。

githubio

Fig. 1: 用户名为 yanshengjia 的 Github Pages 仓库

这样一个属于你的 Github Pages 就创建好了。

我们的独立博客就存放在这个 Github 仓库中。也可以认为,我们的独立博客就是这个 Github Pages。

如果使用 Github 的 Automatic Page Generator 自动网页生成工具,那么此时一个网址为 username.github.io 的网站就自动生成好了,但它是没有内容的,样式也是 Github 提供的模板。

此时访问 username.github.io 就可以访问我们的独立博客了,但是它没有内容,样式也不够个性,同时这个网址也有点冗长。

如何定制自己喜爱的网站样式并添加网站内容呢?如何让我们的独立博客有一个个性化的域名呢?


域名绑定

域名绑定分为三步:

  1. 购买域名
  2. 设置DNS解析来将自己的域名与 Github Pages 绑定
  3. 在 Github Pages 仓库中添加 CNAME 文件

购买域名

域名通过向域名注册商购买获得,如今有很多域名注册商,比如万网GoDaddy

随便选一个域名注册商,搜索自己喜欢的域名,购买即可。

注:

  • 以 .cn 结尾的域名需要备案。
  • 域名的价格根据域名的长段和辨识度而不同,一般来说,越短的域名越贵,越好记的域名越贵。

我是通过 GoDaddy 购买的域名。

godaddy

Fig. 2: 一个代表我姓名的域名

OK,现在拥有了自己的域名,如何将我的域名和我的 Github Pages 绑定起来呢?

设置 DNS 解析

绑定的含义就是当你访问你的域名时,浏览器会自动跳转到刚才创建的 Github Pages (username.github.io)。

实现绑定的关键在于设置 DNS 解析。

在 GoDaddy 注册的域名,由于 GFW 的存在,需要使用第三方 DNS 服务来解析域名。

推荐使用鹅厂的 DNSPOD。鹅厂的服务可靠性高同时也不会被墙 :)

为你的域名添加记录,最终添加完应该是这样的:

主机记录 记录类型 线路类型 记录值 权重 MX优先级 TTL
@ A 默认 192.30.252.153 - - 10
@ A 默认 192.30.252.154 - - 10
@ NS 默认 f1g1ns1.dnspod.net - - 86400
@ NS 默认 f1g1ns2.dnspod.net - - 86400
www CNAME 默认 username.github.io - - 10

Table 1: 域名的DNS记录

参数含义:

  • 主机记录
    • @:不通过任何前缀访问域名
    • www:通过www前缀访问域名
  • 记录类型
    • A:在记录值处写主机地址
    • NS:记录值是DNSPOD提供的Name Server地址
    • CNAME:记录值是域名的别名

由于域名是在 GoDaddy 上注册的,Godaddy 是该域名的托管商,因此需要到 Godaddy 的控制面板指定域名的NS服务器。

登陆 GoDaddy,进入域名管理器,点击管理DNS,设置域名服务器,添加2个外部域名服务器 (DNSPOD提供的域名服务器地址)。

nameserver

Fig. 3: 设置域名服务器

设置成功后,等待DNS解析成功。

这时,我们有了自己的域名,DNS设置完成,还差一步,就能完成域名绑定了。

推荐阅读:Blog绑定域名——GoDaddy+DNSPOD

添加 CNAME 文件

最后一步就是要在 Github Pages 仓库根目录下添加一个 CNAME 文件,内容是一行自己的域名 (e.g. yanshengjia.com)。

比如我的CNAME:

1
yanshengjia.com

这样是域名绑定就完成了。

此时,我们的独立博客拥有了自己的域名,并将其绑定到了 Github Pages。

那么如何让我们的独立博客拥有简洁美观的样式呢?如何在博客上发表文章呢?

对于熟练掌握网页编程技术的人来说,制作出一个拥有美观样式的网站并不难。

但对于不熟悉网页编程的人来说,去学习HTML语言或是UI设计,可能要花费数月时间。

那有没有什么”捷径”呢?

答案是:Yes!

通过 Hexo框架 ,无需网页编程经验,我们也能轻松地生成拥有美观样式的网站,同时让发表博文变得易如反掌。


配置 Hexo

Hexo 是一个高效、易于上手且强大的博客框架。

她生成网站速度快,支持 Markdown 语言,支持将站点部署到 Github Pages,拥有众多功能强大的插件。

安装她之前需要安装 Node.jsGit,具体请参考 Hexo官方文档

然后在 终端/Shell 中输入如下命令:

1
$ npm install hexo-cli -g

这样 Hexo 就安装好了。

接下来要做的就是选择一个目标文件夹 \ 来初始化 Hexo 框架。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

初始化完成后,配置 Hexo 的各项设置,站点设置都在 _config.yml 文件中。

此时,我们已经可以用 Hexo 来生成一个博客网站了。

通过在 终端/Shell 中输入 Hexo 的各项命令,我们就能轻松的新建文章、发表文章和生成站点了。

一些常用命令总结:

命令 功能
hexo new [layout] title 新建文章。layout 是文章类型,title 是文章标题。
hexo g 生成本地站点文件
hexo d 部署站点到 Github Pages 或其他服务器
hexo s 在本地服务器 (http://localhost:4000/) 上预览博客
hexo clean 清空缓存文件 (db.json) 和已生成文件 (public)

Table 2: Hexo 常用命令

现在我们离大功告成还差2小步了:

  • 部署博客站点到 Github Pages
  • 选择一个漂亮的主题/网站样式

Hexo 还有很多有趣的功能和插件,想深入了解,还是推荐看她的官方文档

部署站点

首先需要下载一个插件:hexo-deployer-git

然后在站点配置文件 _config.yml 中修改设置:

1
2
3
4
5
deploy:
type: git
repo: <repository url>
branch: [branch]
message: [message]

repo: Github 仓库URL。例如:git@github.com:username/username.github.io.git

branch: 分支名称。如果 Github Pages 仓库没有建分支,那 branch 就是 master。

message: 定制 commit message。message为空即为使用默认提交信息 (Site updated)

部署站点不管可以部署到 Github Pages 上,还能部署到很多别的服务器,比如 Heroku, Rsync, OpenShift, FTPSync。因为本文介绍的是将站点托管在 Github Pages 上,所以其他就不介绍了。

推荐阅读:Deployment

选择主题

Hexo 有很多漂亮的主题可以选择,利用这些主题,我们就能轻松地给我们的博客站点换上漂亮的衣服。

安装主题的方法很简单,只需要将主题文件拷贝至站点目录的 themes 目录下,然后修改配置文件即可。

我使用的主题是 NexT: Elegant Theme for Hexo,一个简约美观的主题。


启用 HTTPS

自 2018 年 5 月 1 日起,GitHub 支持自定义域名的 HTTPS 请求了。

详情见

配置也相当简单,只需要更新 DNS 配置里的 A 记录,将其指向以下4个 IP 地址中的至少一个。

  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

HTTPS 让你的网站和网站访客更安全,并且 GitHub 提供的这些 IP 地址自动将你的站点加入了 CDN,提高了访问速度。

你还可以在 GiHub Pages 仓库的设置里勾选 ‘Enforce HTTPS’,这样所有访问你站点的请求都会走 HTTPS。

不得不说,GitHub 是真的良心。


大功告成

当完成了上述步骤,你的独立博客也就搭建完成了!恭喜你!

附几张我的网站截图:

overview

Fig. 4: 网站总览

上面一栏是网站菜单,浏览器中部是我的博文,每个博文都可以看到其 Category 以及评论。

sidebar

Fig. 5: 侧边栏

侧边栏包含我的头像,网站简介,博文统计,RSS订阅,社交链接。

archive

Fig. 6: 归档页面

网站的归档包含了我所有的文章,按时间顺序排列。

category

Fig. 7: 分类页面

分类页面显示了我所有文章的分类,而且分类是有层次关系的。

tags

Fig. 8: 标签页面

标签页面显示了所有文章的标签,用某一标签的文章数越大,该标签会越大。

search

Fig. 9: 站内搜索功能

资磁一下?