使用 Github actions 向 Cloudflare Pages 上传网页

概述

简单记录如何使用 Github Actions 将代码部署到 Cloudflare Pages。

需求

• 1. 简洁
• 2. 提供搜索栏
• 3. 无广告

代码部署

• 1. 整体流程：
  • 代码部署再 GitHub 私有库中，使用 Github Actions 在触发 push 到 main 分支时，启动 workflows 将 html 文件推送到 Cloudflare Pages 项目中。
• 2. 事前准备：
  • 1. Github 账户
  • 2. Cloud flare 账户
  • 3. Cloud flare 有 Cloud flare Pages 编辑权限的 Token
  • 4. Github 私有仓库一个
  • 5. 准备好的 HTML 项目
• 3. 实现：
  • 1. 向 Github 仓库中添加 3 个变量 CF_TOKENCF_IDCF_NAME
       这三个变量来源分别为：
       • CF_ID: 在访问cloudflare时，浏览器网址栏形如：https://dash.cloudflare.com/******。其中**\*\*** 就是你的 ID。
         
       • CF_TOKEN: 登录成功后，在个人资料API 令牌创建令牌中创建一个拥有 Cloud flare Pages 编辑权限的 Token。
         
         
         
       • CF_NAME: Cloudflare Pages 进入 Cloud flare Pages 页面创建一个 Pages 项目
         
         选择上传资产
         
         输入项目名，这个就是 CF_NAME
         
         这时，Cloud flare 已经将 Pages 项目创建好了。已经可以接受 Github actions push 代码过来显示了。
  • 2. 在本地 git clone 下来你的仓库。
       创建.github/workflows/${ Your File Name }.yml

name: 部署 cloudflare Pages 个人网页
on:
push:
    branches:
    - main

jobs:
    publish:
        runs-on: ubuntu-latest
        permissions:
            contents: read
            deployments: write
        name: Publish to Cloudflare Pages
        steps:
            - name: Checkout
            uses: actions/checkout@v3

                # Run a build step here if your project requires

            - name: Publish to Cloudflare Pages
            uses: cloudflare/pages-action@v1
            with:
                apiToken: ${{ secrets.CF_TOKEN }}
                accountId: ${{ secrets.CF_ID }}
                projectName: ${{ secrets.CF_NAME }}
                directory: ***
                wranglerVersion: '3'

注意：将 directory:，branches:部分根据实际情况更换

• 3. 最后将本地仓库 push 到 GitHub 中就完成了。