使用 Hexo 为自己在 Github 上建一个静态 Blog 站点

重新建站,把整个流程记录了一下。

以下流程均为 Mac 环境,Win 会略有不同。

1. 基础准备

安装 Git , 你可以直接在 https://git-scm.com/downloads 下载安装包,按照指引一步步安装。

安装npm,参照 https://www.jianshu.com/p/c2b2d667c338

接着你可以用下面的命令确认自己的 Git 和 npm 是否安装完成。

1
2
git --version
npm --version

1.1 创建 Github Page

登录 Github ,如果没有账号就注册一个账号。创建一个 Repo,名称格式为 yourname.github.io,这就是你的 Github Page 地址。比如我的 Github 账号是 ZhinanWang, 我的 Github Page 就是 zhinanwang.github.io。

1.2 安装 Hexo

在终端中输入以下两条命令:

1
2
npm install hexo -g
npm install hexo-cli -g

2. Hexo 建站

接下来使用 Hexo 来创建你的 Github Page。

2.1 创建本地目录

首先把你的 Repo clone 到本地:

1
2
cd ~/Public
git clone https://github.com/yourname/yourname.github.io.git

2.2 初始化站点

通过以下命令初始化你的站点:

1
2
3
4
5
hexo init yourname.github.io
cd yourname.github.io
npm install hexo-deployer-git --save
hexo generate
hexo server

这里 hexo server 的意思是建立一个本地服务,供你测试使用,打开浏览器在地址栏输入 localhost:4000 就能看到你的网站了。

2.3 部署 Github Page

打开你 clone 到本地的文件夹 yourname.github.io,找到 _config.yml 文件 ,在文件中找到 deploy 这一段,将你自己的信息写进配置文件:

1
2
3
deploy:
type: git
repo: https://github.com/yourname/yourname.github.io.git

这时候就可以通过 hexo 命令将你的网站部署上去了:

1
2
hexo deploy
open yourname.github.io

3. 使用 hexo 开始书写

Hexo 操作简单,推荐使用 Atom 来管理的你的文件目录。一般我的做法是用终端 cd 到本地的 yourname.github.io 文件,输入 atom . 打开文件夹。

此时你已经可以开始创作了,首先创建一篇博文,这里的 <title> 是指你文章 .md 文件的名字。

1
hexo new <title>

随便写点东西,然后用如下命令生成:

1
hexo g

接着输入以下命令,可以在本地建立服务,查看效果。

1
hexo s

如果没有问题,就可以部署到线上了。

1
hexo d

想要了解更多 Hexo 命令,可以查看文末的引文 《Hexo 命令指南》

4. Hexo 主题配置

建站完成后,你可能会觉得页面有点丑,其实 Hexo 支持很多自定义主题,这里我以主题 Next 举例。

4.1 安装主题 Next

cd 到你本地的 Github Page 文件夹里,将主题文件 clone 下来。

1
2
cd yourname.github.io
git clone https://github.com/iissnan/hexo-theme-next themes/next

还是打开 _config.yml 文件,找到 theme ,并修改为 next

1
theme: next

运行如下命令完成安装

1
2
3
hexo clean
hexo g
hexo d

4.2 增加评论功能

Hexo 官方文档默认提供了几种评论的方案,但大部分都已经关闭,还要一些不太好用,这里建议使用 valine 轻型方案。

首先到 Leancloud官网 注册一个账号,并创建一个应用,进入应用->设置->应用key。



拿到你的appid和appkey之后,打开主题配置文件搜索 valine,填入appid 和 appkey

1
2
3
4
5
6
7
8
9
10
valine:
enable: true
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size

最后,在 Leancloud -> 设置 -> 安全中心 -> Web 安全域名 把你的域名加进去。

5. 绑定个性化域名

yourname.github.io 这个域名比较长,如果你有把自己的域名转到 Github Page 的需求,那么请往下看。

5.1 Github Page 配置

向你的 Github Pages 仓库添加一个CNAME(一定要大写)文件,文件里包含你的顶级域名,如:

1
wangzhinan.com

运行如下命令

1
2
hexo g
hexo d

5.2 配置 DNS

我使用的是 DNSPOD 服务,向 DNS 配置里添加3条记录

1
2
3
@          A             192.30.252.153
@ A 192.30.252.154
www CNAME yourname.github.io

效果如图

5.3 等待生效

DNS 配置并不是立即生效的,可能需要稍作等待。