建立 Hexo 站点并添加 HashOver 评论系统

2020-03-15

gkchp

参(chao)考(xi)了这些教程：

HEXO评论从“多说”搬迁到Hashover

VPS搭建个人Hexo博客

4.4 服务器上的 Git - 配置服务器

啰哩吧嗦的前情提要

原先使用的是 WordPress 来承载网站。后来换 VPS 的时候想把它整到后面去，用子目录反向代理访问它。当时这个域名是在腾讯云买的，证书也是在那里一键领的免费证书，这样省得一个个申请子域名证书。然而几经折腾也搞不定，百（goo）度（gle）一下发现是因为很多路径被写死了（大概）。于是转用 Hexo 这个静态博客，感觉还不错。虽然没人访问，但还是想整个评论系统，就这样开始折腾了。

开始折腾

系统信息：

# 本机
Linux version 5.4.28-2-lts (linux-lts@archlinux) (gcc version 9.3.0 (Arch Linux 9.3.0-1)) #1 SMP Mon, 30 Mar 2020 19:30:28 +0000
# VPS
Linux version 4.15.0-96-generic (buildd@lgw01-amd64-004) (gcc version 7.5.0 (Ubuntu 7.5.0-3ubuntu1~18.04)) #97-Ubuntu SMP Wed Apr 1 03:25:46 UTC 2020

本地操作

安装 NodeJS 环境

1	sudo pacman -Sy nodejs

安装 Hexo

1	npm install hexo-cli -g

安装完成以后可以尝试 hexo init 文件夹名称 来创建一个新 Hexo 站点。如果提示没有找到命令， 官方文档 的解决方案是为 NodeJS 设置全局变量。首先执行：

1 2	mkdir ~/.npm-global npm config set prefix '~/.npm-global'

然后在你 shell 的 profile 文件里加一句：

1	export PATH=~/.npm-global/bin:$PATH

接着执行 source ~/.profile 或者注销再登录把环境变量刷新一下。

对 Hexo 站点进行设置

接下来进入你的 Hexo 站点文件夹，根据官方文档编辑 _config.yml ，然后确保以下内容：

_config.yml

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@你的域名:/home/git/hexo.git
  branch: master

接着进入你的主题文件夹，找到 article.ejs ，在末尾评论区域加上：

article.ejs

1
2
3

<% if (theme.hashover.on) { %>
    <%- partial('comments/hashover') %>
<% } %>

编辑主题的 _config.yml ，加上 HashOver 的开关：

_config.yml

1 2	hashover: on: true

然后在主题的 /layout/_partial/comments 文件夹新建 hashover.ejs ：

hashover.ejs

<section class="comments" id="hashover">
    <script type = "text/javascript">(
        function() {
            var s = document.createElement('script'),
            t = document.getElementsByTagName('script')[0];
            s.type = 'text/javascript';
            s.async = true;
            s.src = "/comments/comments.php";
            t.parentNode.insertBefore(s, t);
        })();
    </script>
    <noscript>
        <hr>
        <p><b>JavaScript已禁用，评论未被显示。</b></p>
    </noscript>
    <div id="hashover"></div>
</section>

（可选）安装 Hexo Admin

推荐安装，它提供了能实时预览的 Markdown 编辑器，可以方便地编辑和管理文章。安装方法：

# 首先进入你的 hexo 站点文件夹，我以 ~/hexo-blog 为例
cd ~/hexo-blog
# 然后进行安装
npm install
npm install --save hexo-admin

之后就能在 localhost:4000/admin 进行站点管理了。

服务器操作

安装需要用到的软件包

apt-get update
# Nginx 服务器和 Git 是必要的
apt-get install git nginx
# HashOver 需要 PHP-FPM ，下面还包含了 HashOver 的依赖
# 另外再用 Apache 承载评论系统，崩溃了也不影响主站内容，之后会使用反向代理去访问它
apt-get install apache2 php-fpm php-mbstring php-intl php-xml php-json php-mysql

最好把所有 Web 服务交给同一个用户来运行。Ubuntu 的官方源默认都是 www-data ，只要把你的站点文件所有者更改一下就行了。

1	chown -R 用户名:组名 /站点文件目录/

如果你要改用其他用户，就需要编辑以下文件：

/etc/nginx/nginx.conf
/etc/apache2/envvars
# 注意 www.conf 中有两处设置用户和组，不要遗漏
/etc/php/版本号/fpm/pool.d/www.conf

以及编辑 php-fpm 的 Unix Socket 权限：

1	chown -R 用户名:组名 /var/run/php/

配置 Nginx

新建 /etc/nginx/sites-available/hexo.conf ，以下内容作为参考：

/etc/nginx/sites-available/hexo.conf

server {
  listen 80;
  listen [::]:80;
  server_name 域名;
  charset utf-8;
  location / {
	root /var/www/hexo/;# 站点文件目录
  }
  proxy_intercept_errors on;
  location /comments/ {
	proxy_pass http://127.0.0.1:8080/;# 之后 Apache 监听的端口
	proxy_http_version 1.1;
	proxy_set_header Host $host;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_set_header X-Forwarded-Proto $scheme;
    # HashOver 有一些硬跳转
	proxy_redirect http://域名:8080/ https://$host/comments/;
  }
  # （可选）自定义报错页面
  error_page 500 502 503 504  /50x.html;
  error_page 400 410 403      /40x.html;
  location = /50x.html {
      root /var/www/hexo/error;
  }
  location = /40x.html {
      root /var/www/hexo/error;
      allow all;
  }
  location /error/ {
      root /var/www/hexo;
      allow all;
  }
}

然后为配置文件创建符号链接：

1	ln -sf /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/hexo.conf

配置 Apache

首先启用 php-fpm ：

1 2	a2enmod proxy_fcgi setenvif a2enconf php7.2-fpm #根据实际版本号确定

编辑 /etc/apache2/ports.conf ，把端口改一下，比如：

/etc/apache2/ports.conf

1	Listen 8080

然后新建 /etc/apache2/sites-available/hashover.conf ，以下内容作为参考：

/etc/apache2/sites-available/hashover.conf

<VirtualHost *:8080>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/hashover-next # HashOver的目录
    <Directory /var/www/hashover-next/>
        Options -Indexes
        AllowOverride All # 之后可以用 .htaccess 文件控制权限
        Require all granted
    </Directory>
</VirtualHost>

还是为配置文件创建符号链接：

1	ln -sf /etc/apache2/sites-available/hashover.conf /etc/apache2/sites-enabled/hashover.conf

配置 Git

给 Git 专门建一个用户：

add user git -s /usr/bin/git-shell
# 没有提示密码设置就执行下面这条
passwd git
# 或者执行后面这些
# 然后把你的SSH公钥添加到 .ssh/authorized_keys 里去
su git
cd
mkdir .ssh && chmod 700 .ssh
touch .ssh/authorized_keys && chmod 600 .ssh/authorized_keys

# 加入一下用户组，避免权限问题导致403或者无法更新
usermod -aG git www-data
chown -R www-data:git /var/www/hexo/ # 站点文件目录

建立 Git 裸仓库：

1
2
3

su git
cd
git init --bare hexo.git

然后新建 /home/git/hexo.git/hooks/post-receive 脚本：

/home/git/hexo.git/hooks/post-receive

#!/bin/bash
GIT_REPO=/home/git/hexo.git
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/var/www/hexo # 站点文件目录
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

设置为可执行：

1	chmod +x /home/git/hexo.git/hooks/post-receive

接下来添加你的 SSH 公钥：

cd /home/git
mkdir .ssh
vi /home/git/.ssh/authorized_keys
chown -R git:git .ssh

完成

重启一下 Nginx 、 Apache 还有 PHP-FPM 就可以了。

1
2
3

systemctl restart nginx
systemctl restart apache2
systemctl restart php7.2-fpm # 根据版本确定名字

Hexo 有几条常用命令：

# 需要在 hexo 站点文件夹执行
# 在localhost:4000建立一个预览
hexo server
# 清除旧静态文件+重新生成+发布三连
hexo clean
hexo g -d

关于 Apache 的 MPM 导致崩溃

以前比较 naive ，经常崩溃了也不知道为什么，重启了事。搭建好 HashOver 以后，发现三天两头甚至半分钟 Apache 就会崩溃。后来看日志，发现是多处理模块 MPM 导致的问题。百（goo）度（gle）一下，MPM 有三种模式，分别是：

prefork
worker
event

我原本使用的 prefork 性能很差，官方不建议用于生产环境。于是决定换成 event 模式。这个模式需要线程安全的 PHP ，而之前已经装好了 PHP-FPM ，所以切换一下就好了：

1 2	a2dismod mpm_prefork a2enmod mpm_event

现在看来好像改善不少。

奇怪的地方