教你白嫖 Github Pages 和 Google Cloud VM ——Ansible 与 Terraform 自动化部署（上）

Vps

继前两篇（这和那）迁移之后，又看到了 基础设施即代码 IaC 初探 - Ansible 与 Terraform，心很痒。想到可以 浪费一个周末的时间 省去之后迁移 vps 的麻烦，就感觉非常的激动（不是

由于中间走了太多的弯路，所以本篇先讲 hugo 博客配置 CMS 的事情，我们下一篇再娓娓道来 terraform 和 ansible 的大坑（

最后采用的技术路线

折腾一下午突然意识到说其实我的博客完全不用跟 vps 沾一点边（连 certbot 都不需要），所以又琢磨了一下该怎么直接部署到 github 上。大概是这么些步骤：

  1. hugo new site [folder]，add 主题的 submodule 并不是，而是把 theme = 'github.com/owen8877/Mainroad' 加到 hugo.toml，然后 hugo mod init github.com/[username]/[repo] 和 hugo mod tidy 二连
  2. 拷贝 github actions 和 static 下的 admin 文件夹
  3. 上传 github！
  4. 绑定域名 （这里又偷偷摸摸用 terraform 了，链接TBA）

由于我是迁移现有的博客，所以最后只要拷贝 admin 文件夹就可以了。搭配 sveltia cms auth 和 评论区指路 还是很好用的。

想看乐子的可以继续看下去

这里稍微解释一下弯路是怎么一回事情： 由于我先查了怎么配置 terraform 和 ansible，所以先入为主的以为 CMS 是要动态跑在一个 instance 上面的。后来发现 CMS 的文件都可以静态分发，我想那是不是只要留个 VM 做域名验证就可以——没想到居然连这一步都省去了（有个小例外就是要配置 cloudflare 域名 DNS，我是写了一个 terraform 省点事）。

来看一下 chatGPT 是怎么忽悠我走上弯路的（

Overall Architecture

  • Hugo: Static site generator, site is built and served from the VM.
  • Strapi CMS: Headless CMS.
  • NGINX: Serves the static site (i.e., the output of Hugo).
  • VM: Your GCP instance, provisioned by Terraform, configured with Ansible.

Refined Roadmap with Details and Corrections

  1. Create and Initialize Hugo Repo
  2. Configure the VM with Ansible
  3. After That: Hooking Up Strapi CMS

…

真是被忽悠瘸了呀

这还没完，后来我觉得说 Strapi 是不是更好一点，chatGPT 老师反手就掏出来这个图让我一通研究：

Author → Strapi Admin Panel (GCP VM)
                   ↓
          REST / GraphQL API
                   ↓
        Hugo fetches content from Strapi (via build script)
                   ↓
       Hugo generates static site from content
                   ↓
         NGINX serves Hugo-generated site

倒腾半天发现卡在了 CI=true npx create-strapi-app my-strapi --quickstart，这玩意儿不 honor CI=true，好像还得本地先配置上传才有用（那我要你在云上何干？！

最后本地拿 bunx 跑起来了，但是看到这个——这年头创建项目还玩 RPG 的？！

You’re at the edge of the desert.

🐛 Ride the Sandworm:
Create a free Strapi Cloud account — deploy in minutes, built-in hosting, and effortless scaling.
Includes a free hosting plan. No credit card.

⛏️ Walk the Dunes:
Start your project locally. Full control, manual setup — the slow path through the sand.

安装好了之后发现跟 hugo 的相性还蛮差的……所以只能乖乖去用 netlify/sveltia 之类的东西

sveltia

他们也是一个神项目，自己都没有安装指南还要抄别人的……

Installation & setup Currently, Sveltia CMS is primarily intended for existing Netlify/Decap CMS users. If you don’t have it yet, follow their documentation to add it to your site and create a configuration file first. Skip the Choosing a Backend page and choose the GitHub or GitLab backend instead. Then migrate to Sveltia CMS as described below.

本地跑了一下看起来能进到 cms 页面，上云又不行了——似乎是 clone module 的时候没能把 themes 文件夹一起 clone 下来（万恶之源 submodules）；解决办法是给 ansible task 加上

recursive: yes
track_submodules: yes

但是还是没自动 recursive……最后只好把 themes 删了重新 git submodule，似乎就好了（怎么总是抽风

又折腾许久才发现下面这行小字：

Or try one of the starter kits for popular frameworks created by community members: … Hugo - Hugo module by @privatemaker - hugolify-admin by @sebousan

怎么不早点看到（恼

总之按照 hugolify-admin 老老实实配置好了。如果是新的 hugo repo 的话还有一步 hugo mod init 和 hugo mod tidy。

因为不想在服务器上安装 go，所以还把依赖一起用 hugo mod vendor 打包了（我去），然后用 HUGO_MODULE_MODE=_vendor /usr/local/bin/hugo 渲染。

sveltia cms auth

这东西 真是救我于水火之中，按照步骤配置完了 worker。

OAuth 出问题的话可以参考 评论区 创建 GithubApps。

然后发现居然和上面 hugolify-admin 不！兼！容！妈呀只能忍痛割爱了。

cloudflare 自动设置 dns

主要是懒得每次分配新 instance 之后都要登录去改 ip

最后大概是拿这种条件执行 + 环境变量给它调出来了

resource "cloudflare_record" "cname_record" {
  zone_id = "your_zone_id"
  content = "your-cname-record"
  value   = "aaa.github.com"
  type    = "CNAME"
  ttl     = 300
}