于 Cloudflare Pages 部署站点

赞助

成为我们的资助者或赞助商,以支持我们的工作。

赞助商

通过本文,你将学习到如何 Cloudflare Pages 上部署站点。

有多种方式将站点部署到 Cloudflare Pages.

通过 Cloudflare Pages 管理面板部署站点

  1. 登录到 Cloudflare 管理面板。
  2. 打开 Pages 页面。
  3. 点击 Create a project 按钮,然后选择 Connect to Git.
  4. 选择仓库并点击 Begin setup
  5. 填写表单。
    1. 输入项目名称,Cloudflare 会给站点分配一个默认域名,显示在输入框下方。
    2. 选择生产分支。
    3. 框架预设置:Hugo。
    4. 构建命令:其取决于你如何安装构建工具,对于新手主题npm ci && hugo --gc --minify --enableGitInfo
    5. 构建输出目录:/public
    6. 确保 Build system version2,否则无法安装 Dart Sass。
    7. 环境变量:
      1. HUGO_VERSION:比如 0.111.3
      2. NODE_VERSION:任意大于 16 的版本,如:19
      3. EMBEDDED_DART_SASS_VERSION:Embedded Dart Sass,如:1.62.1

通过 GitHub Cloudflare Pages Actions 部署站点

  1. 通过 Cloudflare Pages 管理面板 创建站点,并关闭其自带的自动部署。
  2. 创建 CLOUDFLARE_ACCOUNT_ID1CLOUDFLARE_API_TOKEN2 action’s secrets
  3. 创建以下工作流程,并按需修改配置。
  4. projectName 替换为你的站点名称。
.github/workflows/cloudflare-pages.yaml
 1name: Cloudflare Pages
 2
 3on:
 4  # auto deploy when pushing to specified branches.
 5  push:
 6    branches:
 7      - main
 8
 9  # allow triggering workflow manually.
10  workflow_dispatch:
11
12jobs:
13  publish:
14    # Must runs on Ubuntu, since this workflow use snap to install Dart Sass.
15    runs-on: ubuntu-latest
16    permissions:
17      contents: read
18      deployments: write
19    name: Publish to Cloudflare Pages
20    steps:
21      - name: Checkout
22        uses: actions/checkout@v3
23
24      - name: Setup Node
25        uses: actions/setup-node@v3
26        with:
27          node-version: "19"
28
29      - name: Setup Dart Sass
30        run: sudo snap install dart-sass && sudo snap alias dart-sass sass
31
32      - name: Cache dependencies
33        uses: actions/cache@v3
34        with:
35          path: ~/.npm
36          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
37          restore-keys: |
38            ${{ runner.os }}-node-            
39
40      - name: Install dependencies
41        run: npm ci
42
43      - name: Setup Hugo
44        uses: peaceiris/actions-hugo@v2
45        with:
46          hugo-version: "latest"
47          extended: true
48
49      - name: Cache Hugo modules
50        uses: actions/cache@v3
51        with:
52          path: /tmp/hugo_cache
53          key: ${{ runner.os }}-hugomod-${{ hashFiles('**/go.sum') }}
54          restore-keys: |
55            ${{ runner.os }}-hugomod-            
56
57      - name: Build
58        run: hugo --minify --gc --enableGitInfo
59        # Use following instead if defaultContentLanguageInSubdir is enabled.
60        # run: hugo --minify --gc --enableGitInfo && cp public/en/404.html public/404.html
61
62      - name: Publish to Cloudflare Pages
63        uses: cloudflare/pages-action@v1
64        with:
65          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
66          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
67          projectName: hb-theme
68          directory: ./public
69          # Optional: Enable this if you want to have GitHub Deployments triggered
70          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

  1. 详情请参阅 Get account ID。 ↩︎

  2. 另请参阅 Generate an API token。 ↩︎

razonyang
2024年10月21日星期一 2023年3月5日星期日