用 hexo + gitpage 搭建博客以及 gitpage 绑定自定义域名

本文章将帮助您基于 Gitpages快速搭建 Hexo 博客。如果您在使用过程中遇到问题，请在 GitHub、Google Group 上提问。

什么是 Hexo？

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

安装

安装 Hexo 只需几分钟时间，若您在安装过程中遇到问题或无法找到解决方式，请提交问题，我会尽力解决您的问题。

安装前提

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

Node.js
Git

如果您的电脑中已经安装上述必备程序，那么只需要使用 npm 即可完成 Hexo 的安装。

npm install -g hexo-cli

如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。

Mac 用户

在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

Windows 用户

由于众所周知的原因，从下面的链接下载git for windows最好挂上一个代理，否则下载速度十分缓慢。也可以参考这个页面，收录了存储于百度云的下载地址。

安装 Git

Windows：下载并安装 git
Mac：使用 Homebrew, MacPorts, 或下载安装程序安装
Linux (Ubuntu, Debian)：sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

安装 Node.js

安装 Node.js 的最佳方式是使用 nvm cURL:

curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

nvm install stable

或者您也可以下载安装程序来安装。

Windows 用户

对于windows用户来说，建议使用安装程序进行安装。安装时，请勾选Add to PATH选项。另外，您也可以使用Git Bash，这是git for windows自带的一组程序，提供了Linux风格的shell，在该环境下，您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单，在任意位置单击右键，选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行，您可以考虑始终使用Git Bash来进行操作。

安装 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

npm install -g hexo-cli

初始化

打开 git-bash ，先新建一个目录用于保存博客程序：

mkdir /d/blog
cd /d/blog
hexo init

到此本地基本环境就搭建好了，使用

hexo server

运行博客，显示如下信息则说明安装没有问题，可以浏览器输入地址浏览。

INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

当然， Hexo 默认主题是很丑的，下面开始讲如何使用 NexT 主题。

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为站点配置文件，后者称为主题配置文件。

安装 NexT

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

下载主题

建议使用克隆最新版本的方式，之后的更新可以通过 git pull 来快速更新，而不用再次下载压缩包替换。在终端窗口下，定位到 Hexo 站点目录下。使用 Git clone 代码：

git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

与所有 Hexo 主题启用的模式一样。当克隆/下载完成后，打开站点配置文件，找到 theme 字段，并将其值更改为 next。

theme: next

主题设定

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。目前 NexT 支持三种 Scheme:

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新

Scheme 的切换通过更改主题配置文件，搜索 scheme 关键字。你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

#scheme: Muse
#scheme: Mist
scheme: Pisces

设置语言

编辑站点配置文件，将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文:

language: zh-Hans

设置菜单

编辑主题配置文件，设定菜单内容，对应的字段是 menu。

menu:
  home: / #主页
  archives: /archives #归档页
  #about: /about #关于页面
  #categories: /categories #分类页
  tags: /tags #标签页
  #commonweal: /404.html #404 页面

设置头像

编辑主题配置文件，修改字段 avatar，值设置成头像的链接地址:

将头像放置主题目录下的 source/uploads/ （新建 uploads 目录若不存在配置为：avatar: /uploads/avatar.png 或者放置在 source/images/ 目录下配置为：avatar: /images/avatar.png

avatar: /images/avatar.png

第三部分使用 Gitpage

新建 Repo

Repo 名必须为 username.github.io 比如我的 Github用户名 actpi，那么新建 Repo 名即为：actpi.github.io

访问测试

新建一个 index.html 文件，里面随便写点内容：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1> Welcome thinkalonely.github.io</h1>
<p> test </p>
</body>
</html>

在浏览器输入 username.github.io 能正常访问则整个流程完毕。

第四部分 Gitpage 使用自定义域名，以及 Hexo 自动发布

首先要有一个自己的域名，这个不用多说了吧。

第一步

在 Repo 下面新建 CNAME 文件。内容则填自定义的域名：

echo blog.actpi.com > CNAME

第二步

在域名商那里，找到 DNS管理, 新建 CNAME 记录，如果打算用顶级域名，name 栏直接填 * ，数据栏填写 thinkalonely.github.io. 如果和我一样是使用子域名 blog，那么在 name 栏填 blog，数据栏还是一样填写 thinkalonely.github.io。等几分钟 DNS生效后就可以使用自定义域名访问 Gitpage所在的博客网站了。

第三部验证

打开命令行窗口，使用以下命令查看 DNS 记录是否生效：

$ nslookup blog.actpi.com # 换成你自己的域名

名称:    sni.github.map.fastly.net
Addresses:  2a04:4e42:11::403
          151.101.73.147
Aliases:  blog.actpi.com
          thinkalonely.github.io # 此返回值表示已生效

至此，域名绑定完成。

Hexo 自动发布

编辑 Hexo 站点配置文件:

找到 deploy : type 填写 git ,repo 填写之前新建的repo的完整路径，branch 填写分支默认为 master .如下：

deploy:
  type: git
  repo: git@github.com:actpi/actpi.github.io.git
  bran
  ch: master

发布

当在本地生成后，使用 hexo deploy 或者 hexo d即可发布到 Git！如果嫌每次生成发布命令多，可以写个脚本一键处理！

完！若有疑问，欢迎留言！