Featured image of post 怎样将 HUGO 博客部署到阿里云

怎样将 HUGO 博客部署到阿里云

自从博客彻底搬迁到 Hugo 后,我大部分时间都将博客放置在 Github Pages, Vercel, Cloudflare Pages 这些免费平台。但因为众所周知的原因,这些平台链接速度相比国内服务器还是存在明显差距,虽然可以通过优选 IP 方式进行加速,但全国平均访问时间依然需要 700ms 以上,遇上夜间高峰期,超过 1 秒也很正常。最近从阿里云母公司 Claw.cloud 购入一款廉价阿里云服务器,7美元一年价格,位于日本东京。感觉非常适合 Hugo 使用,便迁移过来。


为什么选这款 VPS

自从 2024 年顶着阿里云光环的 Claw 横空出世后,感觉市面上各类小公司的 VPS 性价比急剧下跌。但之前 Claw 几款神器价格倒也不是那么便宜,比如 4美元/月 的香港服务器,算下来一年也要 300 多块,关键是需要加价才能从别的 MJJ 手中才能收到。而这次推出的据说毫无线路优化的 7美元/年 的日本服务器,倒是让人意外惊喜。电信、移动直连国内,联通回程也是直连国内,对于建站来说再合适不过,经过我两三天测试,哪怕周末晚高峰,网站测速全国平均时间都在 300ms 左右,跟香港阿里云不相伯仲。即便这个优惠期只有一年,那也绝对值了。

目前手头在用服务器

部署过程

Hugo 仓库上传到 Github 后,部署到 Github Pages, Vercel, Cloudflare Pages, Netlify, 腾讯云 Edge One 等免费平台都比较简单,只需要在后者绑定 Github 仓库基本都能轻松完成部署。但部署到 VPS 稍微复杂点。

VPS 基础设置 (也可以手搓,但没必要)

我使用 1Panel 面板来辅助部署,主要是考虑到需要申请 SSL 证书并实现自动续期,同时可以自动设置 Nginx, 简化很多操作。

大致步骤如下:

  1. VPS 安装 1Panel
1
curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && bash quick_start.sh
  1. 为 1Panel 设置必要项目
    具体参照 1panel 教程,一般是修改用户名、密码,然后再添加网站。我还习惯为 1Panel 设置一个专门的域名用于反代面板地址。

  2. 添加 Hugo 博客域名
    在 1Panel 中创建静态网站,输入域名即可。

  3. 添加域名证书
    这里建议网上找找如何用 1Panel 设置证书自动续签的文章,通过 DNS 账号来自动申请。

总体来说,第一步就是在 VPS 上配置 HTTP 服务,同时部署好证书。内容都比较简单,只有证书申请稍微麻烦点,如果自己本来就有 DNS 账号就更容易。到这一步也不急着改域名 DNS A 记录,可以全部部署好后再修改。


为 VPS 添加部署专用的账号(也可以用 root,但不建议)

  1. 本地创建 SSH Key 用于部署
1
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
  1. 在 VPS 上新建 deploy 用户用于部署
1
sudo adduser --disabled-password deploy
  1. 将本地创建的 SSH 公钥 id_rsa.pub 上传到 VPS 的 /home/deploy 目录

  2. 更改 Key 用户权限 ( root账号操作)

1
chown deploy:deploy /home/deploy/id_rsa.pub
  1. 将 Key 绑定用户 deploy (切换到 deploy 账号 sudo su - deploy
1
cat ~/id_rsa.pub >> ~/.ssh/authorized_keys
  1. 设置 Key 文件权限
1
chmod 600 ~/.ssh/authorized_keys
  1. 本地测试 deploy 用户登录
1
ssh -i /path/to/id_rsa deploy@1.1.1.1 # vps ip
  1. 为 deploy 用户设置部署网站路径权限
1
sudo chown -R deploy:deploy /opt/1panel/apps/openresty/openresty/www/sites/domain.com/index # 最终需要将博客部署的路径
  1. 安装 rsync 组件
1
sudo apt-get update && sudo apt-get install -y rsync

这一步主要就是为 VPS 创建一个账号用于部署网站,操作都比较简单。


设置 Github Actions

  1. Github Actions 部署代码

在 Hugo 项目的 .github/workflows 路径中创建一个 depoly.yml 文件(没有路径就自己创建一个),代码如下:

点击查看 Github Actions 部署代码
 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
name: Hugo CI & deploy

on:
  push:
    branches:
      - master
  workflow_dispatch:  

jobs:
  build:
    name: Build and deploy website
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: ${{ env.HUGO_RELEASE }}
          extended: true
        env:
          HUGO_RELEASE: '0.139.2'

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '14'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Run Node
        run: npm ci

      - name: Build website with Hugo
        run: npm run build

      - name: Deploy website with rsync
        uses: burnett01/rsync-deployments@7.0.1
        with:
          switches: -avzr --quiet --delete
          path: public/
          remote_path: ${{ secrets.DEPLOY_DIRECTORY }}  # VPS 部署路径
          remote_host: ${{ secrets.DEPLOY_HOST }}  # VPS IP地址
          remote_user: ${{ secrets.DEPLOY_USER }}  # VPS 用户名
          remote_key: ${{ secrets.DEPLOY_KEY }}  # VPS SSH Key
  1. 设置 Github Actions 密钥

在 Github 仓库的 settings/secrets/actions 中,点击新建仓库密钥 New repository secret ,分别设置以下四个项目:

  • DEPLOY_DIRECTORY # VPS 部署路径
  • DEPLOY_HOST # VPS IP地址
  • DEPLOY_USER # VPS 用户名
  • DEPLOY_KEY # VPS SSH Key

其中 SSH Key 就是第二步中本地创建 id_rsa 文件中的私钥。

  1. 在 Github Actions 中选择上边 Hugo CI & deploy 部署模板,点击运行,测试是否可以将 Hugo 博客内容传输到 VPS 上。如果不行,可以查看部署记录,进一步排查问题。我 300 多篇文章 2000 多个页面,实测首次部署时间在 4 分钟左右,后续更新一般在 1 分钟以内。

这一步主要就是利用 Linux 的 rsync 组件实现 Github 构建的静态博客文件自动同步到 VPS 。在确认文件已经传输到 VPS 后,可以修改自己域名的 A 记录,指向 VPS IP,同时记得在 1Panel 上将网站开启 HTTPS。


最后就是这个优惠期只有一年,但以 Claw 目前这种优惠活动推出频率,我觉得丝毫没有影响。毕竟最近几个月我买了卖、买了退先后起码买过 10 款 Claw 的服务器了,使用最长的也不过两个月。实在不行,DNS 分分钟改回 Vercel 完事。

All textual works on this website are protected by copyright, and the authors reserve all rights. The photos on this website, unless specifically stated, licensed under the CC BY-NC-ND 4.0 license.
Built with Hugo, Powered by Github.
全站约 317 篇文章 合计约 870611 字
本站已加入BLOGS·CN