博客从 CloudBase 迁移至云主机

迁移起因

原来的博客

其实从很久以前就想要写博客，但总是断断续续的，一直都没有认真地开始。

最终，决定使用静态博客工具作为自己博客的承载体。在多种工具的比较下，最终选择了 Hugo 并部署到 Github Pages 上，并同时部署到腾讯云的 CloudBase 以供国内用户访问。

自此，2022 年 5 月 15 日，翔仔的个人博客终于部署到公网上了。

出现了变故

但是，才经过大概 2 个月的时间，收到了腾讯云发送的 CloudBase 计费模式变更的消息。

简单来说，CloudBase 出了一个最低消费，像我这样的，原本从几毛钱的无感消费要升级到几十块，这个变动对于我来说还是挺大的。

思路变更

此处要赶爷，爷自有去处。

突然想到，曾经自己用 299 买的云服务器一直荒废没有使用，毕竟还有好几个月的期限呢，一定要利用起来。

就决定是你了，我的博客暂时先放置在云服务器上，顺便了解一下如何部署静态博客到云服务器上。

第一版方案

不可否认，现在流行的自动化部署真的是用一次就爱上了，尤其是，还有 Github Action 这样的免费资源可以薅，哈哈哈。

Github Pages 部署

将 Hugo 通过 Github Action 部署到 Github Pages 非常简单，在网上也有很多教程可用，这里就简单地列举一下吧。

第一步，通常就是要建立一个私有库存储博客的源文件，再建立一个 Github Pages 库存储 Hugo 构建后的文件。

第二步，自然就是在 Hugo 博客项目下编写 workflow 文件，这里有使用到 Checkout、Hugo setup、GitHub Pages action 三种 Action 步骤，当时的配置如下：

on:
  push:
    branches:
      - master
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      # 切换分支
      - name: Checkout
        uses: actions/checkout@v3

      # 安装 Hugo 程序
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
           hugo-version: 'latest'
           extended: true

      # Hugo Build
      - name: Build
        run: hugo --minify --gc

      # 部署到 Github Pages 上
      - name: Deploy Github Pages
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/master' }}
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          external_repository: fatedeity/fatedeity.github.io
          publish_branch: master
          cname: fatedeity.cn

在这一步，需要配置一个 Actions secrets 以解决安全性问题，可以通过 GitHub Pages action 了解更多。

经过上述两个配置步骤，基本上是已经完成了，之后 Hugo 博客文件再 push 到 Github 时就会自动触发部署，期间基本上能在 20s 左右完成。

CloudBase 部署

使用 Github Action 部署 Github Pages 非常简单，毕竟也算是同出一家，基本上不会出现什么问题。

因为想要通过部署到 CloudBase 以加速国内 IP 访问博客的速度，也不得不研究一下怎么通过 Github Action 部署到 CloudBase 上。

仔细查找了一下，基本上就两种方案：通过 CloudBase CLI 使用命令行部署；通过官方提供的 Tencent CloudBase Github Action 工具部署。

最终，决定使用 Action 工具，相信与 Github Action 更配（实际操作起来并没有），下面是简单的一个配置步骤：

第一步，添加 CloudBase Action v2 所需的配置文件，由于我只使用了 CloudBase 的静态博客部署，配置起来也不麻烦，主要是需要在项目根目录下创建 cloudbaserc.json 文件，填入以下配置：

{
    "envId": "{{ENV_ID}}",
    "region": "ap-guangzhou",
    "$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
    "framework": {
        "name": "x-blog",
        "plugins": {
            "client": {
                "use": "@cloudbase/framework-plugin-website",
                "inputs": {
                    "outputPath": "public",
                    "cloudPath": "/"
                }
            }
        }
    }
}

第二步，更新之前的 workflow 文件，将 Cloudbase Action 的步骤配置进去，当时的配置如下：

on:
  push:
    branches:
      - master
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      # 切换分支
      - name: Checkout
        uses: actions/checkout@v3

      # 安装 Hugo 程序
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
           hugo-version: 'latest'
           extended: true

      # Hugo Build
      - name: Build
        run: hugo --minify --gc

      # 部署到 Github Pages 上

      # 部署到 CloudBase 上
      - name: Deploy Tencent CloudBase
        uses: TencentCloudBase/cloudbase-action@v2.0.1
        if: ${{ github.ref == 'refs/heads/master' }}
        with:
          secretId: ${{ secrets.SECRET_ID }}
          secretKey: ${{ secrets.SECRET_KEY }}
          envId: ${{ secrets.ENV_ID }}

通过上述的步骤，基本上也算是完成了 Github Action 到 CloudBase 的配置。

但是，使用起来并不是很顺利，经常性地出现 Github Action 运行超时的情况，应该是 Github Action 机器在美国，而 CloudBase 服务器在国内的原因。

当时也没有找到什么好的解决办法，只能通过每次报失败之后再手动去运行一遍（从自动化部署变成了半自动化）。

第二版方案

云服务器部署

将项目部署到自己的云服务器上，方法就变得更多了，既有使用 SSH Remote Commands 通过 ssh 工具运行命令，也有使用 SCP、Rsync、SFTP 等工具将文件直接上传，还有更多其他的办法等等。

对比之后，还是采用了理解起来最简单的办法，通过 SSH Remote Commands 连接到云服务器上执行命令，这个命令也很容易理解，就是通过 Git 命令拉取 Github Pages 的代码。

第一步，先在云服务上做好准备，安装好 Git 程序，确定能手动拉取到 Github Pages 的代码。

第二步，当然还是要更新 workflow 文件，将 SSH Remote Commands Action 的步骤替换掉原来的 CloudBase Action 的步骤，具体的配置如下：

on:
  push:
    branches:
      - master
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      # 切换分支
      - name: Checkout
        uses: actions/checkout@v3

      # 安装 Hugo 程序
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
           hugo-version: 'latest'
           extended: true

      # Hugo Build
      - name: Build
        run: hugo --minify --gc

      # 部署到 Github Pages 上

      # 部署到 Server 上
      - name: Deploy Tecent Server
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          port: ${{ secrets.PORT }}
          script: rm -rf fatedeity.github.io/ && git clone https://ghproxy.com/https://github.com/fatedeity/fatedeity.github.io.git

这里有个小技巧，将 Github 通过 GitHub Proxy 代理加速 访问，原本比较慢的拉取代码步骤变得飞快，综合下来，这个静态博客部署完成只需花费 30ms 左右的时间。

第三步，代码被自动拉取到服务器上之后，还需要配置一个反向代理的服务器以供外网访问。最常用的自然就是 Nginx 服务器了，安装 Nginx 的步骤就直接忽略吧，下面是我这边访问静态博客的反向代理配置：

log_format main escape=json '{"remote_addr":"$remote_addr","timestamp":"$time_iso8601","request":"$request","size":$body_bytes_sent,"status":$status,"request_time":$request_time,"referer":"$http_referer","user_agent":"$http_user_agent"}';

server {
    listen      80;
    listen      [::]:80;

    server_name fatedeity.cn;

    return      301 https://$host$request_uri;
}

server {
    listen      443 ssl;
    listen      [::]:443 ssl;

    server_name fatedeity.cn;

    # 证书
    ssl_certificate             cert/fatedeity.cn_bundle.crt;
    # 私钥
    ssl_certificate_key         cert/fatedeity.cn.key;
    ssl_session_timeout         5m;
    ssl_protocols               TLSv1.2 TLSv1.3;
    ssl_ciphers                 ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers   on;

    location / {
        root        /home/fatedeity/fatedeity.github.io/;
        index       index.html;
    }

    error_page 404  /404.html;

    access_log /var/log/nginx/x-blog-access.log main;
}

日志统计

经过上述的操作记录，基本就完成了 Hugo 到 Github Pages 和 Cloud Server 的配置，其实到这里也就结束了。

但是，突然想要看一下自己服务器的访问量，之前都没有搞过这些东西，都是在公司有现成的工具可以使用。发现自己的服务器配置并不是很高，搞不来 ELK 那一套，只能另辟蹊径。

还好，简单一搜，发现有 GoAccess 这样的开源实时日志工具可用，非常适合我这样简单看看日志的用户。

第一步，自然就是安装 GoAccess 工具啦，也很简单，使用 apt install goaccess 命令安装一下即可。

第二步，配置好 .goaccessrc 文件，我这边的配置很简单，只是需要配置好日志格式、输入输出文件即可：

time-format %H:%M:%S
date-format %Y-%m-%d
log-format %^:"%h",%^:"%dT%t+%^",%^:"%r",%^:%b,%^:%D,%^:"%R",%^:"%u"

log-file /var/log/nginx/x-blog-access.log
output /home/fatedeity/logs/x-blog.html

第三步，这边主要是想要通过浏览器访问一下日志，每次想访问的时候使用下面的命令生成一下，也不麻烦，当然也可以定时更新：

goaccess -p /home/fatedeity/.goaccessrc

这样就大功告成了，展示一下 GoAccess 的空页面：