为 Astro 博客添加多部署站点 • Axi's Blog

前言#

最近还是在折腾博客，之前一直用的是 Vercel 部署，本身还是很优雅的，但是还是想要玩一些别的。具体来说，使用 Vercel 部署，我使用的就是 Vercel 的 Pages 功能，使用的自然是 Vercel 自己的服务器。同时，网络上几大其他的赛博菩萨，比如说 Cloudflare Pages 以及 GitHub Pages 等，都支持免费的 Pages 功能，多几个服务器来跑我的网页，而且不是同一个服务器，这样子可以避免单点故障。

Astro 本身其实支持了不同的 adapter，也可以很便捷的部署到不同的站点，所以就简单配置了一下，然后记录一下这个过程。

编辑配置文件#

首先，编辑 astro.config.mjs 文件，添加不同的 adapter 配置。

const platform = process.env.DEPLOYMENT_PLATFORM || 'vercel'
const isCloudflare = platform === 'cloudflare'
const isGithubPages = platform === 'github'

export default defineConfig({
  site: isGithubPages ? 'https://axi404.github.io/' : (isCloudflare ? 'https://axi-blog.pages.dev/' : 'https://axi404.top/'),
  trailingSlash: 'never',
  adapter: isGithubPages ? undefined : (isCloudflare ? cloudflare() : vercel()),
  output: isGithubPages ? 'static' : (isCloudflare ? 'static' : 'server'),
})

整体的思路就是根据环境变量来判断当前的部署平台，然后根据不同的平台来选择不同的 adapter，然后默认的是使用 Vercel。在这里因为 Github 和 Cloudflare 都是在薅羊毛，没有进行氪金，所以说都是使用的静态站点，服务端渲染这种特性毕竟本来也不是必须得。

关于如何使用 Vercel 部署站点在之前的文章中已经介绍过了，这里就不再赘述了。主要介绍剩下的两种的过程。

Cloudflare Pages 的部署过程其实也有类似的博客，也就是我部署 R2 图床的博客的那一篇，本身也就是直接绑定之后部署就好，之后每一次 Push 之后就会自动部署。

至于对于 Github Pages，其实就是需要写一个 Github Action 的文件，放到 .github/workflows/deploy.yml 中，然后每一次 Push 之后就会通过运行这个 Action 来部署。这一步其实直接交给 GPT 来做就好了，我的一个特殊的点在于我博客的仓库是一个 private 仓库，并且不是 axi404.github.io 的名称，因此需要在 Axi-Blog 的仓库中运行 Github Action，进行 build，并且将 build 的结果推送到 axi404.github.io 的仓库中。

简单介绍下这个方案，大概就是需要先创建一个 Token，打开 Github 的创建 Token 的页面 ↗，然后在 Repository access 中选择 axi404.github.io 的仓库，仓库权限中给 Content 的 read and write，之后在 Axi-Blog 的仓库的 settings 中选择 Secrets and variables 中的 Actions 中添加一个 Secret，名字为 PERSONAL_TOKEN，值为刚刚创建的 Token。

文件内容如下：

name: Deploy to Axi404.github.io

on:
  push:
    branches:
      - main

permissions:
  contents: write

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Setup Bun
        uses: oven-sh/setup-bun@v1
        with:
          bun-version: latest

      - name: Cache dependencies
        uses: actions/cache@v3
        with:
          path: ~/.bun/install/cache
          key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lockb') }}
          restore-keys: |
            ${{ runner.os }}-bun-

      - name: Install dependencies
        run: bun i

      - name: Set environment variables
        run: |
          echo "DEPLOYMENT_PLATFORM=github" >> $GITHUB_ENV

      - name: Build site
        run: bun run build:github

      - name: Deploy to Axi404.github.io
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN }}
          external_repository: Axi404/axi404.github.io
          publish_branch: main
          publish_dir: ./dist
          force_orphan: true

yml

即可。

结语#

内容反正大概就是这样，也不是很难，最后喜提两个新域名，一个是 axi-blog.pages.dev ↗，一个是 axi404.github.io ↗，前者是 Cloudflare Pages 的，后者是 Github Pages 的。