Browse User Guide

Deploy on Cloudflare Pages

HB Framework Authors March 5, 2023 3 min read Deployment Docs Cloudflare Pages
On this page
Donate

In this article, you’ll learn how to deploy your site on Cloudflare Pages.

There are multiple ways to deploy you sites on Cloudflare Pages.

Deploy Sites via Cloudflare Pages Dashboard

  1. Login to Cloudflare Dashboard.
  2. Navigate to the Pages.
  3. Click the Create a project button, and then select the Connect to Git option.
  4. Pick up the repository and then Begin setup.
  5. Fill up the form.
    1. Type the project name, Cloudflare will assign a default domain for your site that shown below the input.
    2. Select the production branch.
    3. Framework preset: Hugo.
    4. Build command: it depends on how you install the build tools, for starter theme: npm ci && hugo --gc --minify --enableGitInfo.
    5. Build output directory: /public.
    6. Environment variables:
      1. HUGO_VERSION: i.e. 0.111.3.
      2. NODE_VERSION: any version large than 16, e.g 19.

Deploy Sites via GitHub Cloudflare Pages Actions

  1. Create a site on Cloudflare Pages dashboard, and then disable it’s built-in automatic deployments.
  2. Create the CLOUDFLARE_ACCOUNT_ID1 and CLOUDFLARE_API_TOKEN2 action’s secrets.
  3. Create the following workflow, and tweak the configuration as needed.
  4. Replace the projectName with your site name on Cloudflare Pages.
  5. Commit the changes to repo.
.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    runs-on: ubuntu-latest
15    permissions:
16      contents: read
17      deployments: write
18    name: Publish to Cloudflare Pages
19    steps:
20      - name: Checkout
21        uses: actions/checkout@v3
22
23      - name: Setup Node
24        uses: actions/setup-node@v3
25        with:
26          node-version: "19"
27
28      - name: Cache dependencies
29        uses: actions/cache@v3
30        with:
31          path: ~/.npm
32          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
33          restore-keys: |
34            ${{ runner.os }}-node-            
35
36      - name: Install dependencies
37        run: npm ci
38
39      - name: Setup Hugo
40        uses: peaceiris/actions-hugo@v2
41        with:
42          hugo-version: "latest"
43          extended: true
44
45      - name: Cache Hugo modules
46        uses: actions/cache@v3
47        with:
48          path: /tmp/hugo_cache
49          key: ${{ runner.os }}-hugomod-${{ hashFiles('**/go.sum') }}
50          restore-keys: |
51            ${{ runner.os }}-hugomod-            
52
53      - name: Build
54        run: hugo --minify --gc --enableGitInfo
55        # Use following instead if defaultContentLanguageInSubdir is enabled.
56        # run: hugo --minify --gc --enableGitInfo && cp public/en/404.html public/404.html
57
58      - name: Publish to Cloudflare Pages
59        uses: cloudflare/pages-action@v1
60        with:
61          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
62          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
63          projectName: hb-theme
64          directory: ./public
65          # Optional: Enable this if you want to have GitHub Deployments triggered
66          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

  1. Please checkout the Get account ID. ↩︎

  2. See also Generate an API token. ↩︎