搭建 CDN

用 GitHub Actions + Netlify 搭建一个 CDN，和 CDNJS 自动同步

0. 前言

最初是因为 Giscus 评论的字体和博客的字体相同，但要加载两次，太慢了，就想到可以引用同一个字体文件，其中一个加载，另一个就可以用缓存，但是总会 CORS 出错，于是就单独建了一个 CDN

然而这个 CDN 其实是存库文件的
如果不想存库文件可以把 .github/workflows 和 lib 删掉，但 netlify.toml 要保留
这里是我的 CDN，部署在 static-argvchs.netlify.app

1. 创建仓库

在 GitHub 创建一个仓库，存储你的 CDN

2. 创建文件

创建一个文件夹作为 CDN 项目目录，在目录中创建一个文件 .github/workflows/sync.yml

name: sync
on:
    schedule:
        - cron: "0 0 * * *"
    workflow_dispatch:
env:
    REPO: ${{ github.repository }}
    LIBS: ${{ vars.LIBS }}
    TOKEN: ${{ secrets.TOKEN }}
jobs:
    sync:
        runs-on: ubuntu-latest
        steps:
            - name: clone
              run: |
                  git clone https://github.com/cdnjs/cdnjs.git --depth=1 --filter=blob:none --no-checkout
                  git clone https://$TOKEN@github.com/$REPO.git $REPO --depth=1 --filter=blob:none --no-checkout
            - name: checkout
              run: |
                  cd cdnjs
                  git sparse-checkout init --cone
                  for i in $LIBS
                  do
                  git sparse-checkout add ajax/libs/$i
                  done
                  git checkout
                  cd ..
                  cd $REPO
                  git sparse-checkout init --cone
                  git sparse-checkout set libs
                  git checkout
            - name: sync
              run: |
                  rm -rf $REPO/libs
                  for i in $LIBS
                  do
                  mkdir -p $REPO/libs/$i
                  cp -r cdnjs/ajax/libs/$i/* $REPO/libs/$i
                  done
            - name: commit
              run: |
                  cd $REPO
                  git config user.name github-actions[bot]
                  git config user.email github-actions[bot]@users.noreply.github.com
                  git add .
                  git commit --allow-empty -m "sync"
            - name: push
              run: |
                  cd $REPO
                  git push https://$TOKEN@github.com/$REPO.git

这个是一天同步一次，如果想调整可以修改上面的 cron 参数

格式见: on.schedule

不建议同步过于频繁，因为使用有时间限制

然后创建一个文件 netlify.toml，用来设置 CORS

[[headers]]
    for = "/*"
        [headers.values]
        Access-Control-Allow-Origin = "*"

3. 上传 GitHub

运行命令

git init
git add .
git commit -m "first commit"
git branch -M master
git remote add origin https://github.com/<user>/<repo>.git
git push -u origin master

4. 生成 Access token

在这里生成新的 Access token

Note 随便填，例如 cdn
Expiration 选 No expiration
Select Scopes 勾选 repo，下面的会自动勾选

然后 Generate token 就可以了

生成后会有一个复制按钮，存下来一会要用到

5. 设置环境变量

在仓库的 Settings/Security/Secrets and variables/Actions 里面

actions-secrets-and-variables

New repository secret 创建 TOKEN，值为刚才生成的 Access token

然后切换到 Variables，点击 New repository

New repository variable 创建 LIBS，值为你想要添加的库文件，用空格分割（不能用换行分割）
在 CDNJS 搜索

然后就可以自动同步了！

如果想手动进行同步，可以这样，Run workflow 即可

actions-run-workflow

6. 部署到 Netlify

在 Netlify 导入 CDN 仓库，部署并修改域名即可

在 CDNJS 上搜索的库的链接，把 cdnjs.cloudflare.com/ajax 替换为 <domain>.netlify.app，即可访问

LOADING