2021 · 十月 · 博客重构 & 浅谈部署

我决定在双十这一天发布新博客(虽然又往后推了一周)。 看看都改变了些什么:

Based on Urara

最直观的一点就是底层从 Hexo 切换到了我自己设计的 Urara。

基于 SvelteKit 和 WindiCSS 能带来相当大的自由度,同时拥有更多动画效果。

由于代码需要优化及 globEager 问题,Urara 将于晚些时候开源。

前端路由

要说我在用 Hexo 的时候最馋的是什么,那一定是前端路由。

去除 /p/

虽然 /p/title 已经够简洁了,但还可以再简洁一点。

通过 kwaa.dev/p/title 访问会被自动跳转到 kwaa.dev/title。

下一代图片压缩格式:WebP + AVIF

之前博客里的图片资源是 .png .jpg .webp 混用,非常乱;我想全部转换成 有损压缩,高压缩比率 的格式。

于是整成了 WebP + AVIF。

Cloudflare Workers

现在我的主站是 Cloudflare 全家桶了。

考虑过 Netlify 和 Vercel,但我不怎么喜欢 100G/Month 的流量限制;所以 Workers。

它有每天十万次访问的额度,我认为这限制很难超过——如果超额了我就换成 Pages…

部署

考虑到以后还会并行部署到其他地方,我需要一个可以区分模式的部署方法。

由于 SvelteKit 暂不支持 –mode xxx 传递模式,这里我参考了 jthegedus 的方案

所以构建命令是 export MODE=workers && npm run build

简单整个三元运算符,当 process.env.MODE === ‘workers’ 时使用 adapterWorkers, 其他则使用 adapterStatic:

js
kit: {
adapter: process.env.MODE === 'workers'
? adapterWorkers()
: adapterStatic({
pages: 'build',
assets: 'build',
fallback: null
}),
...
}

创建一个 .env.workers,它有以下信息:

目前 URL 配置还很乱,之后我会进行调整:site.url 只包含域名,img.prefix 包含 https:// 和 /

ini
NODE_ENV=production # 生产模式
VITE_DOMAIN_URL='https://kwaa.dev' # 域名
VITE_IMG_PREFIX='https://kwaa.dev/' # 图片前缀

再对我的 site.ts 稍作修改:

ts
const site: Sites = {
...,
url: import.meta.env.VITE_DOMAIN_URL ?? 'https://kwaa.dev',
...
}

部署到 Cloudflare Workers Sites

安装 wrangler 并生成一个 wrangler.toml。

wrangler 这玩意确实是很奇妙,逼着我用 nvm… 但我并不想用,所以我用 root 安装并切换到 root 账号进行操作。

bash
sudo npm i -g @cloudflare/wrangler
sudo su
wrangler init --site urara
su - user
sudo rm -rf workers-siteusqTvo
sudo chown user wrangler.toml

生成的 wrangler.toml:

toml
name = "urara"
type = "webpack"
route = ''
zone_id = ''
usage_model = ''
compatibility_flags = []
workers_dev = true
site = {bucket = "",entry-point = "workers-site"}
compatibility_date = "2021-10-17"

为什么自动生成的 type 是 webpack? 不管了,能部署就行。

把 site 值改为 {bucket = "./build", entry-point = "./workers-site"},然后输入 account_id 进行测试。

bash
wrangler config # 设置 Cloudflare API-Key
wrangler publish # 部署

设置域名和 GitHub Actions

当然不可能就这样结束——我需要绑定域名,并且用 GitHub Actions 来做这件事。 重新修改 wrangler.toml,这是最终版本:

toml
name = "urara"
type = "webpack"
usage_model = ''
compatibility_flags = []
site = {bucket = "./build",entry-point = "./workers-site"}
compatibility_date = "2021-10-17"
workers_dev = false
route = "kwaa.dev/*"

然后是一套 build.yml。

yaml
name: Deploy Blog
on:
push:
branch:
- main
workflow_dispatch:
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Use Node.js 16.x
uses: actions/setup-node@v2
with:
node-version: '16'
check-latest: true
- name: Build
run: npm i && export MODE=workers && npm run build
- name: Publish
uses: cloudflare/wrangler-action@1.3.0
with:
apiToken: ${{ secrets.CF_API_TOKEN }}
env:
CF_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
CF_ZONE_ID: ${{ secrets.CF_ZONE_ID }}