使用 Github actions 向 Cloudflare Pages 上传网页

共计 1146 个字符，预计需要花费 3 分钟才能阅读完成。

概述

简单记录如何使用 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: 登录成功后，在个人资料$\rightarrow$API 令牌$\rightarrow$创建令牌中创建一个拥有 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 中就完成了。