一、购买 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 NPM_PACKAAGES="$HOME /.npm-packages" mkdir -p "$NPM_PACKAAGES " echo "prefix = $NPM_PACKAAGES " >> $HOME /.npmrcecho ' # 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 2 $ sudo apt-get update $ sudo apt-get -y install git
Supervisor 1 $ sudo apt-get install -y supervisor
Nginx 1 $ sudo apt-get -y install nginx
三、使用 Hexo 安装 Hexo
初始化 Hexo 1 2 3 4 $ mkdir hexo && cd hexo $ hexo init blog $ cd blog $ npm install
配置 Hexo Hexo 有两份主要的配置文件(_config.yml),一份位于站点根目录下,另一份位于主题目录下。为了描述方便,在以下说明中,将前者称为 站点配置文件,后者称为 主题配置文件。
站点信息 编辑 站点配置文件:
1 2 3 4 5 6 title: RussellLuosubtitle: 让思想在文字间徜徉description: author: RussellLuolanguage: zh -Hanstimezone: Asia/Chongqing
绑定博客仓库 考虑到独立性和可维护性,我的博客文章都是放在 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/ blog/ source/ _posts/ github/ blog/ blog/ 2015 / 201 5-0 8-3 0-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/ blog/ source/ _posts/ blog/ 2015 / 201 5-0 8-3 0-hello.md ... ... github/ blog/ blog/ 2015 / 201 5-0 8-3 0-hello.md ... ...
文章链接 基于上述绑定后的文章目录结构,我希望文章的链接格式形如 /yyyy/mm/title.html。以文章 blog/2015/2015-08-30-hello.md 为例,我希望它对应的链接是 /2015/08/hello.html。
为了到达上述效果,需要编辑 站点配置文件 如下:
1 2 3 root: /permalink: :year/ :month/ :title .htmlnew_post_name: blog/:year/ :year- :month- :day- :title .md
配置主题 我个人喜欢简洁优雅的风格,因此选择了 NexT 主题。
1. 下载 NexT 主题 1 2 $ cd blog $ git clone https://github.com/iissnan/hexo-theme-next themes/next
2. 启用 NexT 主题 编辑 站点配置文件:
3. 设置主题参数 启用 NexT 主题中的 Mist 主题:编辑 主题配置文件,将 #scheme: Mist 前面的 # 注释去掉。
4. 侧边栏
头像
编辑 站点配置文件,新增字段 avatar,将值设置成头像的链接地址。
社交链接
编辑 站点配置文件,新增字段 social,然后添加社交站点名称与地址即可。例如:
1 2 3 social: GitHub: https: 豆瓣: http:
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $ vi /etc/supervisor/conf.d/blog.conf [program:blog] command =/home/user/.npm-packages/bin/hexo serverdirectory=/home/user/hexo/blog autostart=true autorestart=true startsecs=5 stopsignal=HUP stopasgroup=true stopwaitsecs=5 stdout_logfile_maxbytes=20MB stdout_logfile=/var/log/supervisor/%(program_name)s.log stderr_logfile_maxbytes=20MB stderr_logfile=/var/log/supervisor/%(program_name)s.log
启动 Supervisor 守护进程:
查看 blog 程序(即 Hexo 服务)的状态:
1 2 $ supervisorctl status blog RUNNING pid 28974, uptime 0:00:32
可以看出,blog 程序已经处于运行状态,监听端口为 hexo server 命令的默认端口 4000。在浏览器中访问 http://<VPS-IP>:4000 可以看到博客的运行效果。
2. 配置 Nginx 代理 作为一个对外公开的网站,使用 4000 端口显然是不合适的。可以直接改成 80 端口,但是这样直接把 Hexo 服务暴露给用户,并不恰当。更好的办法是使用 Nginx 做代理。
创建 Nginx 配置文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 $ vi /etc/nginx/conf.d/blog.conf server { listen 80; server_name <VPS-IP>; location / { proxy_pass http://localhost:4000; } access_log /var/log/nginx/blog.access.log; error_log /var/log/nginx/blog.error.log; }
重启 Nginx:
1 2 $ nginx -t $ nginx -s reload
此时,在浏览器中访问 http://<VPS-IP>,就可以体验到高效、稳定的博客网站。
五、购买域名 让用户通过 http://<VPS-IP> 访问博客,显然是反 Web 的行为。作为一名专业的博主,我在 GoDaddy 购买了自己博客的域名。
启用了高大上的域名后,需要修改上述的 Nginx 配置,将 server_name 从 IP 改成域名:
1 2 3 4 5 6 7 $ vi /etc/nginx/conf.d/blog.conf server { ... server_name russellluo.com; ... }
六、设置 DNS 对外开放的最后一步,是设置 DNS,让域名 russellluo.com 真正解析到我的虚拟服务器 IP。我用 DNSPod ,快速、免费、稳定!
That’s all! 如果你在我的博客上看到了这篇文章,说明我已经成功了。