输出倒逼思考

0%

将Hexo搭建的博客站点从GitHub Pages迁移到腾讯云VPS

发表于
分类于 Valine：
Hexo搭建的博客站点部署在GitHub Pages访问速度感人，迁移到腾讯云VPS访问速度得到质的提升。

1 背景

在上一篇文章《使用 Hexo + GitHub Pages 搭建个人博客站点》中我们介绍了如何使用 Hexo 搭建自己的个人博客站点并部署到 GitHub Pages。将个人站点部署到 GitHub Pages 的显著优点是便捷、免费，但由于 GitHub 服务器位于国外，所以多数情况下，你访问你的 GitHub Pages 的速度将非常缓慢。为提升访问速度，将个人站点部署到腾讯云、阿里云或其它国内云服务提供商的云服务器上是一个很好的选择。当然，你也可以通过树莓派 + 内网穿透搭建自己的私有云服务器。

2 原理

使用 VPS 部署博客的原理如下图所示（图片来自这里）：

VPS搭建Hexo博客原理示意图

使用 VPS 部署博客的主要思路分为四步：

  • hexo -g将 source/_posts 目录下的 markdown 文件渲染为静态资源，并将静态资源放置到 public 目录下；
  • hexo deploy通过 git 将 public 目录下的博客静态资源推送到 VPS 的远程仓库中；
  • 推送更新触发 Git Hooks 将仓库内的静态资源克隆到网站根目录下；
  • 使用 nginx 作为 Web 服务器提供对博客的 HTTP 或 HTTPS 访问。

本文基于腾讯云 Ubuntu 18.04 实现 Hexo 静态博客的 VPS 自动部署。

3 配置

3.1 VPS 端配置——Git

3.1.1 安装

通常情况下，购买了 VPS 后 Git 是默认已经安装的，若未安装，可通过终端命令进行安装：

1
sudo apt-get install git

3.1.2 配置本地端 SSH 登录 VPS

关于 SSH 登录配置，主要包含两步：SSH key 的本地生成和远端添加，可参考《在腾讯云上搭建个人 Git 服务器》的2.2 创建证书登录，此处不再赘述。

3.1.3 创建 Git 仓库

创建适当的目录并将其初始化为 Git 裸库，用于存放 Hexo 博客静态资源：

1
2
3
mkdir -p ~/blog/shipengx.git
cd ~/blog/shipengx.git
git init --bare

3.1.4 配置 Git Hooks

此时 VPS 上的远程仓库只是一个裸仓库，无法用于搭建站点服务器，需要在推送更新的同时触发 Git Hooks，以将远程仓库中的博客资源放到 Nginx Web 服务器根目录下。

  • 创建 Nginx Web 根目录，并修改属主与属组

    1
    2
    sudo mkdir -p /var/wwww/blog
    sudo chown ubuntu:ubuntu -R /var/wwww/blog

  • 创建钩子文件，并添加可执行权限
    进入远程仓库的 hook 目录下，新建钩子文件：

    1
    2
    cd ~/blog/shipengx.git/hooks
    vim post-receive

    添加如下代码并保存，注意，GIT_REPO TMP_GIT_CLONE PUBLIC_WWW 的值视个人情况而定：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    echo "post-receive hook is running..."

    GIT_REPO=/home/ubuntu/blog/shipengx.git
    TMP_GIT_CLONE=/tmp/blog.shipengx
    PUBLIC_WWW=/var/www/blog

    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 post-receive

3.2 VPS 端配置——Nginx

3.2.1 安装 Nginx

直接通过终端命令进行安装：

1
sudo apt-get install nginx

安装完成后，在浏览器中输入 VPS 公网 IP，出现如下页面即表示安装成功：

Welcome to nginx!

安装成功后，可通过nginx -v命令查看版本信息，本文中所使用版本为 1.14.0；可通过 service nginx status或systemctl status nginx命令来查看 Nginx 运行状态；可通过nginx -V命令查看安装的 Nginx 所包含组件。

3.1.2 配置 Nginx

Nginx 安装成功后，所有配置文件将位于/etc/nginx 目录下，/etc/nginx/nginx.conf 是主配置文件。本文中对 Nginx 的配置主要做了以下五件事：

  • 监听 80 端口，以提供正常的 http 访问；
  • 配置 SSL，以开启网站对 https 访问的支持（需进行 SSL 证书申请与工信部 ICP 备案）；
  • IP 访问重定向到域名访问；
  • http 访问重定向到 https 访问；
  • 自定义 404 页面。

购买了 VPS 后一般可申请免费的 SSL 证书，若你的 VPS 是在腾讯云购买的，可以到这里申请有效期一年的免费 SSL 证书，快到期时需要提前重新申请，证书下发速度很快；对于配置 SSL，工信部 ICP 备案也是必要的，若一级域名未进行备案，则极有可能出现配置做好了域名 http 访问也正常但 https 访问总是被重置的情况，所以最好在购得域名后马上进行 ICP 备案以作备用（对于个人博客站点，网安备案不是必须的），若你的 VPS 是在腾讯云购买的，可以到这里进行 ICP 备案申请，备案地与身份证相同的话一般速度比较快，完成备案后记得将备案号填写至站点配置文件的相应位置，以在网页底部展示备案状态（强制要求）。

下面进行具体的配置操作（假设你已经完成 SSL 证书的申请与下载）。

首先，在/etc/nginx 目录下创建 ssl 目录用于存放 SSL 证书与配置文件，并将对应 Nginx 的 SSL 证书通过WinSCP工具传输至/etc/nginx/ssl 目录下；

然后，在本地博客目录 hexo/source 下新建 404.html 文件，粘贴以下腾讯公益 404 页面代码后保存（homepageurl 修改为你的站点域名。更多的 404 模板可以到这里查看）：

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
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
  <head>
    <title>404 - Page Not Found</title>
    <meta name="description" content="404错误，页面不存在！" />
    <meta http-equiv="content-type" content="text/html;charset=utf-8;" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow" />
  </head>

  <body>
    <script
      type="text/javascript"
      src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
      charset="utf-8"
      homepageurl="https://blog.shipengx.com"
      homepagename="返回到博客首页"
    ></script>
    <script>
      !(function (o) {
        var i = Array.prototype.slice.call(
          document.querySelectorAll("img[data-original]")
        );
        function c(t, e) {
          var n = new Image(),
            o = t.getAttribute("data-original");
          (n.onload = function () {
            (t.src = o), e && e();
          }),
            (n.src = o);
        }
        function n() {
          for (var t = 0; t < i.length; t++)
            (e = i[t]),
              void 0,
              0 <= (n = e.getBoundingClientRect()).top &&
                0 <= n.left &&
                n.top <=
                  (o.innerHeight || document.documentElement.clientHeight) &&
                c(i[t], function () {
                  i.splice(t, t);
                });
          var e, n;
          console.log("trigger");
        }
        n(),
          o.addEventListener("scroll", function () {
            var t, e;
            (t = n),
              (e = o),
              clearTimeout(t.tId),
              (t.tId = setTimeout(function () {
                t.call(e);
              }, 500));
          });
      })(this);
    </script>
  </body>
</html>

其次，在/etc/nginx/ssl 目录下通过sudo vim ssl.conf命令新建 SSL 配置文件，添加如下内容（对于不同版本的 Nginx，SSL 配置内容稍有区别）后保存并退出：

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
server {
     #SSL 访问端口号为 443
     listen 443;
     #填写绑定证书的域名
     server_name blog.shipengx.com;
     #开启ssl
     ssl on;
     #证书文件名称
     ssl_certificate ssl/1_blog.shipengx.com_bundle.crt;
     #私钥文件名称
     ssl_certificate_key ssl/2_blog.shipengx.com.key;
     ssl_session_timeout 5m;
     #请按照以下协议配置
     ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
     #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
     ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
     ssl_prefer_server_ciphers on;
     #自定义404页面
     error_page 404 /404.html;
     location / {
         #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
         root /var/www/blog;
         index  index.html index.htm;
     }
}

编辑主配置文件/etc/nginx/nginx.conf 为以下内容后保存并退出：

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
user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
  worker_connections  768;
}

http {
  include  mime.types;
  default_type  application/octet-stream;

  sendfile on;
  server {
    listen 80;
    server_name blog.shipengx.com;
    #自定义404页面
    error_page 404 /404.html;
    root /var/www/blog;
    #IP访问强制定向到域名访问
    rewrite ^(.*)$ https://blog.shipengx.com;
    #http访问强制定向到https访问
    return 301 https://blog.shipengx.com$request_uri;
  }
  #加载ssl配置文件
  include /etc/nginx/ssl/*.conf;
}

最后，通过重新加载配置文件，并设置 Nginx 开机启动：

1
2
sudo nginx -s reload
sudo systemctl enable nginx

3.3 本地端 Hexo 站点配置

将站点配置文件中的deploy项修改为如下内容，实现本地端向 GitHub 和 VPS 的双远端推送：

1
2
3
4
5
6
7
8
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: "git"
  repository:
    github: git@github.com:RocShi/rocshi.github.io.git
    vps: ubuntu@118.25.111.221:/home/ubuntu/blog/shipengx.git
  branch: master

github 对应着你的 GitHub Pages 项目地址，vps 对应着你的 VPS 远程仓库的地址，记得修改！

假如你已经完成了域名 ICP 备案，并完成了本文第 3 章节的所有配置，在本地端的博客目录下执行常规的部署操作后在浏览器中输入域名应该就可以成功访问了，而且是支持 https 的！

4 参考

  1. 快速搭建博客：优化博客
  2. 服务器部署网站后，公网 ip 可以访问，域名不能访问问题
  3. Hexo 搭建个人博客系列：部署上线篇
  4. Nginx 服务器证书安装
猜你喜欢
Thank you for your donate!