虽然已经有了一个blog，但是那个是用wordpress部署的，是Lucky费了老大劲，帮了不少忙，但是用起来总觉得太臃肿，WordPress就是这样，功能大而全，你想要的都能实现，但是很难实现，需要的东西太多，Nginx、MySQL什么的一大堆，对于普通的人来说，过程就很复杂了。也试过用ghost来部署，但是感觉部署过程中也是很多问题，而且对新手也不算友好，也一直想试试传说中的hexo，双十一、黑五期间又陆陆续续的入手了一些小鸡，也出了一些，光搭个节点啥的很浪费，于是又捡起之前部署失败无数次的hexo，重新弄了起来，终于算是成功了，于是就有了这篇文章，这个Blog。
下面简单的写一下过程：

需要准备的

  • 一台VPS
  • 一个域名，并且域名已经托管到了cloudflare，做好了DNS解析
  • MacBook（Windows下应该差不多，但是我没有,就只好以Mac下部署为例了）

步骤

创建本地目录

⚠️确保本机的 Git 和 Node.js已经安装

在本地建立一个文件夹，取名blog
Mac下可以直接在个人文档里面建文件夹（Windows应该同理）
打开终端，输入：cd blog 进入到blog文件夹

安装Hexo

1
2
3
4
5
6
7
8
9
10
sudo npm install -g hexo-cli

hexo init

sudo npm install

hexo d -fg

hexo server

如果正常的话，Hexo就已经本地安装完毕，会有提示你打开 http://localhost:4000 可以在浏览器看到欢迎页面了，以后加了新的文章或者改动之后，直接hexo server就可以在4000端口检测看看效果。不过这时候只是在本地的，接下来是发布到网络上。

故障排除：

When running the first command, I encountered error like Error: Cannot find module ‘…. If you face the same thing, try the following link to fix it. https://gist.github.com/DanHerbert/9520689

遇到的问题：

重启机器后hexo和npm都不见了，显示错误如下：

zsh: command not found: npm
zsh: command not found: hexo

执行命令 ls ~/.npm 发现执行文件都在此目录下

解决步骤：

  1. 卸载已经安装的 node, npm, 和 nvm (if exists)

To completely uninstall node + npm is to do the following:

go to /usr/local/lib and delete any node and node_modules
go to /usr/local/include and delete any node and node_modules directory
if you installed with brew install node, then run brew uninstall node in your terminal
check your Home directory for any local or lib or include folders, and delete any node or node_modules from there
go to /usr/local/bin and delete any node executable

http://refactor.ghost.io/2016/01/17/how-do-i-completely-uninstall-node-js-and-reinstall-from-beginning-mac-os-x/

rm -rf $NVM_DIR ~/.npm ~/.bower

  1. 在Terminal运行下列命令来安装nvm

nvm 是Nodejs版本管理器

Please check the official nvm docs for the latest version link.

1
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

安装之后请重启Terminal

  1. 安装切换各版本 node/npm
1
2
3
4
5
6
7
8
9

nvm ls-remote           //查看有哪些版本可供安装

nvm install stable       //安装最新稳定版本

nvm install 0.12.7         //这里再安装一个0.12.7版本 并把它设为默认

nvm alias default 0.12.7

  1. 使用 .nvmrc 文件配置项目所使用的 node 版本
    如果你的默认 node 版本（通过 nvm alias 命令设置的）与项目所需的版本不同，则可在项目根目录或其任意父级目录中创建 .nvmrc 文件，在文件中指定使用的 node 版本号，例如：
1
2
3
4
5
6
7
8
cd <项目根目录>            //进入项目根目录

echo 4 > .nvmrc           //添加 .nvmrc 文件

nvm use                 //无需指定版本号，会自动使用 .nvmrc 文件中配置的版本

node -v              //查看 node 是否切换为对应版本

其他人遇到的类似问题解决方法:

https://yrom.net/blog/2016/08/10/auto-load-node-on-zsh-startup/

在另一台电脑上clone repo之后无法使用hexo

ERROR Local hexo not found in ~/Documents/github/hexo_blog

解决方法：

rm -rf node_modules/ && npm install

如果你遇到没有包含在那上面的问题，请善用搜索。

VPS端部署过程

Hexo的VPS端部署其实很简单，就是简单的建立一个文件夹后，将本地生成的静态网页上去，再使用Nginx 代理即可。

  1. 用ssh工具登录到VPS（推荐termius）

其它一些教程都是推荐新建一个git用户，作为一个常年root登录的用户，当然不会干这种事情了，不然各种权限设置，各种workdir设置的多麻烦。

  1. 建立blog文件夹并进入文件夹

mkdir /var/www/blog && cd /var/www/blog

  1. 安装Nginx

    1
    2
    3
    4
    apt update && apt upgrade -y      //升级更新系统

    apt install nginx                 //安装nginx

    安装完后输入 nginx -V 若出现版本信息，则安装成功

  2. 配置Nginx

1
2
3
4
5
6
cd /etc/nginx/sites-available               //切换目录

cp default default.bak                  //备份默认配置

vim default                     //修改配置

参考配置内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
server {
    listen 80 default;              //默认监听80端口
    root /var/www/blog;             //网站根目录
    server_name mylucky.cyou, www.mylucky.cyou;  //网址
    access_log  /var/log/nginx/blog_access.log;
    error_log   /var/log/nginx/blog_error.log;
    error_page 404 =  /404.html;

    location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
        root /var/www/blog;
        access_log   off;
        expires      1d;
    }

    location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
        root /var/www/blog;
        access_log   off;
        expires      10m;
    }

    location / {
        root /var/www/blog;
        if (-f $request_filename) {
        rewrite ^/(.*)$  /$1 break;
        }
    }

    location /nginx_status {
        stub_status on;
        access_log off;
    }
}

保存退出后，输入 nginx -t 测试一下配置，如果没有出错信息则启动nginx

启动 nginx：

systemctl start nginx

设置开机自动启动：

systemctl enable nginx

查看运行状态：

systemctl status nginx

显示 running 表示成功运行。

这时候在浏览器里面输入你的域名，就可以看到nginx的欢迎信息了，因为我们还没把本地的hexo的内容上传上来呢。

配置SSL证书

出于安全性考虑，一般都会给配置个SSL证书，（你也不想每次打开浏览器，地址栏那里显示个不安全吧）

这里采用certbot来配置

apt install -y certbot python3-certbot-nginx

certbot --nginx

第一次运行这个命令会让你填个邮箱，然后yes，no之后选择你要配置证书之后的域名即可，英语都是比较简单的。

自动更新证书
因为这种免费证书都是有期限的，所以设置一个定时任务来到期自动更新
输入：

crontab -e

如果你的小鸡没有crontab，那么输入 ：apt install cron 进行安装

添加一行：

0 0 1 * * /usr/bin/certbot renew --quiet

如果是采用cloudflare的15年证书，则请按照相应的步骤进行，网络上教程很多，就是一个将证书保存到VPS里面，然后在 nginx 的配置步骤。

配置完nginx和ssl证书后，我们回到本地，需要将本地用Hexo书写的内容生成静态网页，并且上传到VPS里面呈现出来。

部署Hexo

Hexo常用的有 git hook 和 rsync 两种自动部署解决方案

在我们创建的博客目录下执行 hexo generate 后，hexo会将我们编辑的markdown博客自动生成静态的网页，而生成的文件就存储在 public 文件夹中，这其中的每一个html文件都是我们之后在网页中查看博客时候加载的对应文件，而我们在执行 hexo deploy 时，就是要将 public 文件夹下的文件全部部署到我们之前在Nginx配置中设置的 root /var/www/blog 的路径中。

用rsync部署

相比较git hook方式，这一种操作更简单，对于小白更不容易出错。

安装rsync

rsync的安装分为两部分：服务器端和本地

服务器端安装：

apt-get install rsync

对于Digital Ocean Ubuntu VPS，大多数的Linux系统已经默认装有 rsync 了，可以运行 rsync 测试下是否已经安装。

本地安装：

sudo npm install hexo-deployer-rsync --save

rsync配置

编辑博客文件夹目录下的 _config.yml，找到deploy字段添加如下代码：

1
2
3
4
5
6
deploy:
  type: rsync
  host: vps-ip            //这里填写你VPS的IP地址，比如：138.23.23.23
  user: root             //这里填写你登陆VPS所用的用户名，比如：root
  root: /usr/www/blog       //这里填写你在nginx中配置的文件路径
  port: 22               //SSH默认端口号，不需要修改

配置完毕！在 blog 目录下执行下面一段代码

hexo g && hexo d
提示：

按照提示输入ssh密码后就上传到VPS了，接着在浏览器输入网址就可以看到了。

git hook自动部署方案

使用git hook和rsync得到的效果是等效的，也就是说，二者中选一种你喜欢的就可以完成配置。
说明一下，我本人看Git部署的方式步骤太多太麻烦，所以采用的是rsync的方式进行的，所以对于此文中的Git方式，只是从网络上找到相应的教程，自己并没有进行测试，如果有错漏，请指出。

安装git

本地部署工具安装

sudo npm install hexo-deployer-git --save

服务器端安装：

1
2
3
sudo apt-get update

sudo apt-get install git-core

新增一个名为 git 的用户，并给用户 git 赋予无需密码操作的权限（否则到后面 Hexo 部署的时候会提示无权限）

1
2
3
4
5
adduser git

chmod 740 /etc/sudoers

vi /etc/sudoers

在vi编辑中找到如下内容：

1
2
## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL

在下面添加一行

git ALL=(ALL) ALL

vim 操作小贴士：打开文件之后要按i进入编辑模式，编辑完以后按Esc，再输入:wq回车才能保存；如果
想不保存直接退出请输入:q!

保存退出后执行

chmod 440 /etc/sudoers

接下来要把本地的 SSH 公钥上传到 VPS 。执行：

1
2
3
4
5
6
7
8
9
su git

cd ~

mkdir .ssh && cd .ssh

touch authorized_keys

vi authorized_keys

现在要打开本地的 Git Bash，输入vi ~/.ssh/id_rsa.pub，把里面的内容复制下来粘贴到上面打开的文件里。

然后建立放部署的网页的 Git 库。

1
2
3
4
5
cd ~

mkdir hexo.git && cd hexo.git

git init --bare

测试一下，如果在 Git Bash 中输入 ssh git@VPS的IP地址 能够远程登录的话，则表示设置成功了。

如果不成功，并且你的 VPS 的 ssh 端口不是 22 的话，请在Git Bash执行vi ~/.ssh/config，输入以下内容并保存：（成功就跳过这一步）

1
2
3
4
5
Host #VPS 的 IP
HostName #VPS 的 IP
User git
Port #SSH 端口
IdentityFile ~/.ssh/id_rsa

初始化git仓库

1
2
3
4
5
mkdir /var/repo

cd /var/repo

git init --bare blog.git

执行上述代码后,我们会在 /var/repo 路径下创建了一个名为 blog.git 的裸仓库，这个仓库的功能就是将我们deploy的文件通过git hook的方式共享到 /var/www/blog 中，而要想实现这一功能我们还需要进行如下配置：

在 blog.git/hooks 目录下新建一个 post-receive 文件：

1
2
3
cd /var/repo/blog.git/hooks

vim post-receive

在 post-receive 中添加如下内容：

1
2
#!/bin/sh
git --work-tree=/var/www/blog --git-dir=/var/repo/blog.git checkout -f

设置 post-receive 文件的可执行权限：

chmod +x post-receive

提示：如果设置的路径文件夹并不存在，那么需要创建该文件夹并且赋予你所使用的用户的权限：

1
2
3
sudo mkdir /var/www/blog
cd /var/www
chown git:git blog

本地配置

编辑博客文件夹目录下的 _config.yml，找到deploy添加如下代码：

1
2
3
4
deploy:
    type: git
    repo: [email protected]:/var/repo/blog.git # 此部分修改为你自己的登陆账号和域名，冒号后面为设置的裸仓库的地址
    branch: master

同样在 blog 目录下执行下面一段代码，我们也可以看到我们的文件部署到了服务器上

hexo g && hexo d

补充一下，我发现在上面的使用certbot 申请ssl证书的步骤之后，它默认的一个配置是会在直接访问http （80）端口的时候返回404页面，而不是重定向到https，后面我修改了一下nginx的配置，完整配置如下，可以做一个参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# HTTP server block to redirect to HTTPS
server {
    listen 80;
    server_name mylucky.cyou www.mylucky.cyou;
    return 301 https://$server_name$request_uri;
}

# HTTPS server block
server {
    listen 443 ssl;
    server_name mylucky.cyou www.mylucky.cyou;

    # SSL certificate configuration
    ssl_certificate /etc/letsencrypt/live/www.mylucky.cyou/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/www.mylucky.cyou/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # Access and error logs
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    # Root directory
    root /var/www/blog;
    index index.html;

    # Enable gzip compression
    gzip on;

    # Mime types
    include /etc/nginx/mime.types;

    # Location blocks
    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
        access_log off;
        expires 10m;
    }

    location /nginx_status {
        stub_status on;
        access_log off;
    }
}

整个一个Hexo的Blog的本地和上传方式到此已经完成，剩下的就是补充Blog的内容了
对于Blog来说，平台搭建好其实是最初始的步骤，最关键的还是内容，平台什么的并不重要。
后面也会弄一些Hexo的设置和使用方法，来进行填充内容。