在自有VPS上部署Hexo

发表于 | 分类于 | | 阅读次数
字数统计 1,895 | 阅读时长 8

2017-3-26-Update：

  • 更新了“5.4.配置新建文章时自动打开编辑器”中Windows下自动打开编辑器的js代码，之前的试验之后发现不起作用，现在的亲测可用。

1.楔子

一直都有搭建自己的个人博客的想法，然而拖延症晚期一直拖到现在。某次Google资料的时候发现了Hexo，跟WordPress进行一番对比之后选择了Hexo，原因嘛，无非就是轻量、静态化，不会对我的渣渣服务器造成什么负担。
Hexo默认使用Git部署，但是国内访问GitHub略慢，加上已经有了自己的服务器和域名，于是有了再自己的服务器上部署Hexo的想法。查询发现有两种方法在自有VPS上部署Hexo：

  • 利用Hexo默认的Git推送到服务器的repository,服务器再通过git-hooks同步网站根目录
  • 使用Rsync方法部署 第一种方法略微复杂，博主尝试的时候文件始终没办法在网站根目录生成。有兴趣的可以参考这篇文章。下面主要介绍第二种方法。

2.系统环境

  • VPS系统：Ubuntu Server 14.04.1 LTS 64位
  • 本机系统：macOS 10.12.3

3.搭建流程

  • 服务器环境搭建
  • 本地Hexo搭建
  • 使用Rsync自动化部署

4.服务器环境搭建

  • 以下所有编辑文件操作全部使用ubuntu自带的nano，编辑完成后按Ctrl+X，输入y后连按两次Enter即可保存退出。
  • 如未注明，命令都是在服务器上运行的。

4.1.创建Hexo部署用户

创建一个用户用于Rsync免密部署。运行以下命令，然后输入密码，其他项目直接按Enter即可。

1
sudo adduser hexo

接下来将刚刚创建的用户加入sudo用户。

1
2
sudo chmod 740 /etc/sudoers
sudo nano /etc/sudoers

找到以下内容

1
2
# User privilege specification
root    ALL=(ALL:ALL) ALL

在下面添加一行

1
hexo    ALL=(ALL:ALL) ALL

保存退出后改回权限

1
sudo chmod 400 /etc/sudoers

切换至hexo用户，创建~/.ssh文件夹。

1
2
su hexo
mkdir ~/.ssh

然后在Mac终端中输入以下命令复制公匙到服务器中。

1
scp ~/.ssh/id_rsa.pub hexo@服务器的IP:/home/hexo/.ssh/authorized_keys

如果你之前没有生成过公钥，则可能没有id_rsa.pub文件，就无法复制。在Mac终端中输入以下命令以创建公匙。输入后一直回车即可。

1
ssh-keygen -t rsa

赋予刚刚创建的文件相应的权限。

1
2
sudo chmod 600 ~/.ssh/authorized_keys
sudo chmod 700 ~/.ssh

现在可以在Mac终端执行ssh命令测试是否可以免密登录了。

1
ssh hexo@SERVER(服务器公网ip)

至此，Hexo部署使用的用户添加完成。

4.2.Nginx的安装与配置

执行以下命令安装nginx

1
sudo apt-get install nginx

因为我的VPS是单核的，所以执行以下命令将里面的worker_processes改为1，最新nginx似乎默认配置是auto，可以不改了。

1
sudo nano /etc/nginx/nginx.conf

运行以下命令创建网站根目录用于存放Hexo文件。

1
mkdir /home/hexo/Blog/

然后运行以下命令更改网站配置文件。

1
sudo nano /etc/nginx/sites-available/default

将文件中的内容全部删除，粘贴以下内容并保存退出。

1
2
3
4
5
6
7
8
9
10
server {
  root /home/hexo/Blog; # 这里是你网站根目录的路径 路径下包含index.html等一系列文件
  index index.html index.htm;
  server_name www.seventhsense.cn seventhsense.cn *.seventhsense.cn; # 如果有域名就像我这样写，前提是已经配置好域名解析
  location / {
    try_files $uri $uri/ /index.html;
  }
}

然后重新载入nginx配置。

1
sudo /etc/init.d/nginx reload

如果重新载入失败请重新启动nginx。

1
sudo /etc/init.d/nginx restart

至此，nginx安装配置完成。

5.本地Hexo搭建

5.1.安装nodejs

访问Nodejs官网下载dmg安装即可。

5.2.初始化Hexo

首先安装hexo-cli。

1
sudo npm install -g hexo-cli

然后初始化Hexo程序。

1
2
cd ~/Documents/Hexo
hexo init blog

执行成功后安装hexo-server插件。

1
2
cd blog
npm install hexo-server

5.3.生成第一篇Hexo文章

使用hexo new "文章名称"来新建文章，该命令会成成一个.md文件放置在sources/_posts文件夹。

1
hexo new "hello Hexo"

使用Markdown编辑器打开sources/_posts/hello-hexo.md进行编辑。编辑完成后，使用hexo g将.md文件渲染成静态文件，然后启动hexo-server。

1
2
hexo g
hexo server

现在可以打开浏览器访问http://localhost:4000来查看刚刚建立的博客了！

5.4.配置新建文章时自动打开编辑器

参考文章：Hexo添加文章时自动打开编辑器

首先在Hexo目录下的scripts目录中创建一个JavaScript脚本文件（如果没有这个scripts目录，则新建一个），新建的JavaScript脚本文件可以任意取名。我们用这个脚本监听hexo new这个动作，并在检测到hexo new之后，执行编辑器打开的命令。
如果你是windows平台的Hexo用户，则将下列内容写入你的脚本：

1
2
3
4
5
6
7
8
9
10
11
var _exec = require('child_process').exec;
// Hexo 2.x 用户复制这段
hexo.on('new', function(path){
  _exec('start "" "markdown编辑器绝对路径.exe" ' + data.path);
  //路径必须使用双反斜杠，如“E:\\Haroopad\\haroopad.exe”
});
// Hexo 3 用户复制这段
hexo.on('new', function(data){
  _exec('start "" "markdown编辑器绝对路径.exe" ' + data.path);
  //路径必须使用双反斜杠，如“E:\\Haroopad\\haroopad.exe”
});

如果你是Mac平台Hexo用户，则将下列内容写入你的脚本：

1
2
3
4
5
6
7
8
9
var exec = require('child_process').exec;
// Hexo 2.x 用户复制这段
hexo.on('new', function(path){
    exec('open -a "/Applications/你的Markdown编辑器.app" ' + path);
});
// Hexo 3 用户复制这段
hexo.on('new', function(data){
    exec('open -a "/Applications/你的Markdown编辑器.app" ' + data.path);
});

6.使用Rsync自动化部署

在Mac终端中运行以下命令以安装Rsync。

1
2
cd ~/Documents/Hexo/blog/
sudo npm install hexo-deployer-rsync --save

然后打开~/Documents/Hexo/blog/_config.yml按以下配置修改deploy字段。

1
2
3
4
5
6
7
8
9
deploy:
  type: rsync
  host: 你 VPS 的 IP 地址或者域名
  user: hexo 刚刚在VPS上创建的用来部署hexo的用户
  root: /home/hexo/Blog/ 你想将 Hexo 生成的静态文件存放在 VPS 中的目录
  port: 22
  delete: true
  verbose: true
  ignore_errors: false

有说法是只在 Hexo 中安装 Rsync 还不够，在 VPS 也需要安装 rsync 服务，但是我在我的VPS上就没有安装 rsync 服务。如果你在 Hexo 中用 rsync 部署的时候一直报错，那就在 VPS 上安装 rsync 服务，看能否解决一直出错的原因，命令如下：

1
sudo apt-get install rsync

完成以上操作后，我们尝试将刚才写的“hello Hexo”部署到服务器。

1
2
hexo clean
hexo generate --deploy

完成之后，访问服务器公网ip或域名就可以看到刚刚写的文章“hello Hexo”了。
以后写文章只要执行以下操作博客就更新了：

1
2
3
4
hexo new "新文章"
···写文章balabala
hexo clean
hexo generate --deploy

如果有需要删除的文章，只需要删除Hexo目录下source/_posts/文件夹中对应的.md文件再执行以下命令即可。

1
2
hexo clean
hexo generate --deploy

需要美化的可以下载主题使用，我自己用的是NeXt，简洁美观，各种主题配置和第三方服务配置按照NeXt文档设置即可。

PS：hexo generate --deploy命令也可简写为hexo g --d。

参考资料

坚持原创技术分享，您的支持将鼓励我继续创作！