利用 Hexo 和 Github 免费搭建个人网站

Github是世界知名的代码托管平台，Hexo则是一款简洁高效的静态博客框架。两者的结合可以搭建出非常漂亮的静态博客网站。原理简单来说就是使用 Hexo 搭建一个静态网站托管到 Github 平台，并实现实时访问。这和我们搭建一个网站托管到自己的服务器上没有本质上的不同，区别是 Github 只能实现静态网站的搭建和访问，而服务器则是没有这样的限制。

使用 GitHub 和 Hexo 搭建网站最大的优点就是零成本，不需要服务器也不需要后台。其次是网站全是静态页面，访问速度快。缺点是，相对于 WordPress 和 Typecho 等博客程序，学习成本更高，需要非常强的动手能力和一定的markdown 语法 基础。

 

一、创建 Github 账号

1、前往 Github 官方网站，注册一个 Github 账号。

（由于网站是全英文，方便大家阅读，这里使用了谷歌翻译将其翻译成了中文。）

 

2、新建一个仓库

登录 Gifhub。登录成功后，点击【启动项目】新建一个代码存储库。

 

存储库的命名必须是 Github 的用户名(username)加上.github.io 的格式，才可以作为网站的托管库，否则会导致网站无法访问。比如我在 Github 上注册的用户名为 uxcoffee，仓库就需要命名为 uxcoffee.github.io。

 

3、获取 SSH 密钥

选择刚才创建的存储库，将 SHH key 复制到本地。这个 SSH key 我们后面会用到。

 

二、下载安装 Hexo

1、安装 Node.js 和 npm

简单的说 Node.js 就是运行在服务端的 JavaScript。NPM 是随同 NodeJS 一起安装的包管理工具，能解决的 NodeJS 代码部署上的很多问题，这里我们主要是通过 NPM 服务器下载别人编写的第三方包到本地使用。比如 Hexo 程序包和相关插件。

由于新版的 Node.js 已经集成了 NPM，所以我么这里直接下载安装 Node.jS 即可。 安装包及源码下载地址为：https://nodejs.org/en/download/。根据你的系统，选择自己的版本。安装过程保持默认设置即可。

 

2、安装 Gif

Git是目前世界上最先进的分布式版本控制系统。我们不需要知道什么是版本控制管理系统。在这里我们可以简单将其理解为辅助我们调试网站的命令行窗口。

Gif 的下载地址为：https://git-scm.com/download。安装过程保持默认即可。

 

3、安装 Hexo

在你的电脑上创建一个Hexo 文件，文件位置建议放在 C 盘以外的其他盘。因为这个盘是用来存放我们的网站的文件的。

1、快捷键 Win+R 调出运行窗口，输入 cmd 。

2、下载 hexo。命令行窗口中输入 npm install hexo-cli -g 开始下载 Hexo 。前面命令安装完成，再次输入 npm install hexo --save ，等待下载完成。

 

3、初始化 hexo。

安装完 hexo 之后，在你想存放网站文件的地方新建一个名为 hexo 的文件夹。依次执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

其中以上代码<folder>是指你的电脑盘符，需要执行时需要改为你自己的盘符。比如你想把网站初始话到 D 盘的 hexo 文件夹，那么命令为：

hexo init D:\hexo
cd D:\hexo
npm install

执行完上面的代码后，你就可以在 D 盘中找到一个名为 hexo 的文件夹，这个就是你的网站文件。文件夹目录如下所示：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

 

4、检测软件是否安装成功。

我们可以通过命令行检测一下以上软件有没有安装成功。使用 windows 自带的命令行工具。依次输入执行 git version ,node -v , npm -v , hexo version 命令行，检测 Git、node.、npm 以及 hexo 的安装情况。如果正常返回版本号，则安装成功。

 

5、生成网站静态页面。

输入执行 hexo g 命令可以生成网站静态页面。

 

6、启动本地服务器。

输入执行 hexo s 命令启动本地服务器，这时候，你就可以通过浏览器访问
http://localhost:4000 查看你的网站了，如下图所示。（快捷键 Ctrl+C 关闭服务器，退出预览。）

 

三、将本地 hexo 网站推送到 Gifhub

这里可以通过简单的配置，将 hexo 的网站文件推送到 Gifhub 的存储库中。

1、更改 _config.yml 配置文件

在 hexo 目录中打开（前面新建的 hexo 文件夹） _config.yml 文件。
将 type 的值改成 gif。repo的值改成我们前面获取的SHH 密钥。branch的值改为master。如下图所示：

 

2、安装上传插件

Ctrl+C 退出网站预览，然后输入 Y 确认终止操作。然后输入执行 npm install hexo-deployer-git --save 命令，安装网站上传插件。

 

3、配置 SSH key

这时候，本地向 Gifhub 存储库上传文件的通道已经打通了。但是这时候还没有上传文件的权限，我们需要获取到本地网站的 ssh key ，然后配置到 Gifhub 验证成功后，才可以正常上传。

hexo 文件夹里右键，菜单选择搜索 Git Bash ，设置 user.name 和 user.email 配置信息：

git config --global user.name "你的 GitHub 用户名"
git config --global user.email "你的 GitHub 注册邮箱"

 

生成 ssh 密钥文件：

ssh-keygen -t rsa -C "你的 GitHub 注册邮箱"

 

然后三次回车，按照 Git Bash 窗口中提示生成路径，找到 id——rsa.pub 密钥。

用文本编辑器打开，复制 ssh key 。然后打开 Gifhub 官网，依次打开“设置——>SSH keys / Add new”。如下图所示。其中 title 选项可以随便填。key 选项粘贴刚才复制到的 ssh 可以。然后保存即可。

4、接下来这一步非常关键。

首先在 Git Bash 窗口中输入hexo clean命令清理缓存,然后输入hexo g命令重新生成网站静态页面,最后输入hexo d上传到 Gifhub 库。

最后，使用“Gifhub 用户名+github.io”就可以访问网站了。比如我的用户名为 uxcoffee ，所以我的域名为 uxcoffee.gifhub.io。

 

四、解析绑定域名

1、添加一条 CNAME 解析记录

如果你不喜欢“username.gifhub.io"这样的域名，还可以绑定自己的域名。只需要两部，第一步到你域名服务商的后台，选择你想绑定的域名。添加一条解析记录。记录类型选择 CNAME，主机记录填写你绑定的域名。我这里绑定的是二级域名。如果你想绑定一级域名，这里可以填"@"。记录值就填写 github 提供的域名。

2、绑定域名

登录 Gifhub 官网，选择你的网站存储库，进入设置页面。下拉到 GitHub Pager 页面，填写你要绑定的域名即可。这时候，就可以使用你绑定的域名访问网站了。

3、最后，在 hexo 项目下，source 文件夹下面创建 CNAME 文件（没有后缀名的），在里面写上绑定的域名。（建议创建一个记事本，写上域名后，对文本进行重命名时，不要后缀名 txt 即可）。

全文完！