使用 Hexo 搭建博客
一、购买 VPS
我使用的是 DigitalOcean。购买合适的套餐后,你会得到一个预装了指定操作系统的虚拟服务器,以及一个虚拟服务器 IP(VPS-IP)。
二、安装软件
登录 VPS,安装一些依赖软件。
Node.js
安装 Node.js
这里安装 Node.js v0.12,其中自带了 NPM。参考 nodesource/distributions。
1
2$ curl -sL https://deb.nodesource.com/setup_0.12 | sudo -E bash -
$ sudo apt-get install -y nodejs配置 NPM
设置 NPM 的全局安装目录为用户主目录。参考 Install NPM into home directory with distribution nodejs package (Ubuntu)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20# Create .npmrc
NPM_PACKAAGES="$HOME/.npm-packages"
mkdir -p "$NPM_PACKAAGES"
echo "prefix = $NPM_PACKAAGES" >> $HOME/.npmrc
# Add configurations into .bashrc (or .zshrc)
echo '
# NPM packages in homedir
NPM_PACKAGES="$HOME/.npm-packages"
# Tell our environment about user-installed node tools
PATH="$NPM_PACKAGES/bin:$PATH"
# Unset manpath so we can inherit from /etc/manpath via the `manpath` command
unset MANPATH # delete if you already modified MANPATH elsewhere in your configuration
MANPATH="$NPM_PACKAGES/share/man:$(manpath)"
# Tell Node about these packages
NODE_PATH="$NPM_PACKAGES/lib/node_modules:$NODE_PATH"
' >> $HOME/.bashrc
Git
1 | $ sudo apt-get update |
Supervisor
1 | $ sudo apt-get install -y supervisor |
Nginx
1 | $ sudo apt-get -y install nginx |
三、使用 Hexo
安装 Hexo
1 | $ npm install -g hexo |
初始化 Hexo
1 | $ mkdir hexo && cd hexo |
配置 Hexo
Hexo 有两份主要的配置文件(_config.yml),一份位于站点根目录下,另一份位于主题目录下。为了描述方便,在以下说明中,将前者称为 站点配置文件
,后者称为 主题配置文件
。
站点信息
编辑 站点配置文件
:
1 | title: RussellLuo |
绑定博客仓库
考虑到独立性和可维护性,我的博客文章都是放在 GitHub 的 blog 仓库 里的。
为了保证所有文章能被 Hexo 正确地识别和处理,blog 仓库会被克隆并绑定到 Hexo 中 post layout
所在的默认路径 source/_posts
:
克隆 blog 仓库
先从 GitHub 克隆 blog 仓库:
1
2$ mkdir github && cd github
$ git clone https://github.com/RussellLuo/blog.git绑定前的目录结构
1
2
3
4
5
6
7
8
9
10
11
12/home/user/
hexo/ # Hexo 站点
blog/
source/
_posts/
github/ # GitHub 仓库
blog/
blog/
2015/
2015-08-30-hello.md
...
...绑定 blog 仓库
这里采用软链接的方式实现绑定,简单直接。
1
2$ cd hexo/blog/source/_posts
$ ln -s ~/github/blog/blog blog绑定后的目录结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/home/user/
hexo/ # Hexo 站点
blog/
source/
_posts/
blog/
2015/
2015-08-30-hello.md
...
...
github/ # GitHub 仓库
blog/
blog/
2015/
2015-08-30-hello.md
...
...
文章链接
基于上述绑定后的文章目录结构,我希望文章的链接格式形如 /yyyy/mm/title.html
。以文章 blog/2015/2015-08-30-hello.md
为例,我希望它对应的链接是 /2015/08/hello.html
。
为了到达上述效果,需要编辑 站点配置文件
如下:
1 | root: / |
配置主题
我个人喜欢简洁优雅的风格,因此选择了 NexT 主题。
1. 下载 NexT 主题
1 | $ cd blog |
2. 启用 NexT 主题
编辑 站点配置文件
:
1 | theme: next |
3. 设置主题参数
启用 NexT 主题中的 Mist 主题:编辑 主题配置文件
,将 #scheme: Mist
前面的 #
注释去掉。
4. 侧边栏
头像
编辑
站点配置文件
,新增字段avatar
,将值设置成头像的链接地址。社交链接
编辑
站点配置文件
,新增字段social
,然后添加社交站点名称与地址即可。例如:1
2
3social:
GitHub: https://github.com/RussellLuo
豆瓣: http://douban.com/people/RussellLuo
5. 评论系统
虽然 Disqus
是国外最流行的第三方评论系统,但是在国内感觉使用 多说
更接地气。
NexT
主题内置支持 多说
评论系统,因此配置很简单:
创建站点
登录 多说 后,在首页点击“我要安装”,创建站点,填写必要信息。
其中,
多说域名
一栏就是你的duoshuo_shortname
。配置 duoshuo_shortname
编辑
站点配置文件
,新增duoshuo_shortname
:1
duoshuo_shortname: russellluo
更新于 2017 年 5 月 18 日
多说在 2017 年 3 月 21 日宣布:将于 2017 年 6 月 1 日正式关停服务。Disqus 会被墙,畅言要备案,最后发现了 网易云跟帖。切换到网易云跟帖的步骤:
- 注册网易云跟帖的账号
- 按提示填写相关信息(特别注意 “站点网址” 需要跟博客网址相同,比如
http://russellluo.com
)- 升级到最新版本的 NexT
- 编辑
站点配置文件
,注释掉duoshuo_shortname
- 编辑
主题配置文件
,设置 gentie_productKey更多详情,可以参考 这篇博客。
更新于 2017 年 9 月 26 日
继多说关闭之后,网易云跟帖在 2017 年 8 月 1 日也停止了服务:( 不打算折腾了,直接切换到 Disqus(墙内用户需要自备梯子)。切换到 Disqus 的步骤:
注册 Disqus 的账号并登录
依次点击 “GET STARTED”、“I want to install Disqus on my site”
按提示填写站点信息(注意 “Website Name” 的内容就是 shortname,稍后会用到,比如
russellluo
)按提示 “1. Select Plan”(没钱就选择 Basic)、“2. Install Disqus”(NexT 主题的可以忽略)、“3. Configure Disqus”(填写 “Website URL” 后,点击 “Complete Setup” 即可)
编辑
主题配置文件
,启用 Disqus:
1
2
3
4 disqus:
enable: true
shortname: russellluo
count: true更多详情,可以参考 这篇博客。
四、正式部署
1. 使用 Supervisor 管理 Hexo 服务
使用 hexo server
启动的 Hexo 服务是非 Daemon 模式的。为了便于管理,这里使用 Supervisor。
创建 Supervisor 配置文件:
1 | $ vi /etc/supervisor/conf.d/blog.conf |
启动 Supervisor 守护进程:
1 | $ supervisord |
查看 blog 程序(即 Hexo 服务)的状态:
1 | $ supervisorctl status |
可以看出,blog 程序已经处于运行状态,监听端口为 hexo server
命令的默认端口 4000
。在浏览器中访问 http://<VPS-IP>:4000
可以看到博客的运行效果。
2. 配置 Nginx 代理
作为一个对外公开的网站,使用 4000 端口显然是不合适的。可以直接改成 80 端口,但是这样直接把 Hexo 服务暴露给用户,并不恰当。更好的办法是使用 Nginx 做代理。
创建 Nginx 配置文件:
1 | $ vi /etc/nginx/conf.d/blog.conf |
重启 Nginx:
1 | $ nginx -t |
此时,在浏览器中访问 http://<VPS-IP>
,就可以体验到高效、稳定的博客网站。
五、购买域名
让用户通过 http://<VPS-IP>
访问博客,显然是反 Web 的行为。作为一名专业的博主,我在 GoDaddy 购买了自己博客的域名。
启用了高大上的域名后,需要修改上述的 Nginx 配置,将 server_name 从 IP 改成域名:
1 | $ vi /etc/nginx/conf.d/blog.conf |
六、设置 DNS
对外开放的最后一步,是设置 DNS,让域名 russellluo.com 真正解析到我的虚拟服务器 IP。我用 DNSPod,快速、免费、稳定!
That’s all! 如果你在我的博客上看到了这篇文章,说明我已经成功了。