Deploy on Cloudflare Pages
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
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
- Login to Cloudflare Dashboard.
- Navigate to the Pages.
- Click the Create a project button, and then select the Connect to Git option.
- Pick up the repository and then Begin setup.
- Fill up the form.
- Type the project name, Cloudflare will assign a default domain for your site that shown below the input.
- Select the production branch.
- Framework preset: Hugo.
- Build command: it depends on how you install the build tools, for starter theme:
npm ci && hugo --gc --minify --enableGitInfo. - Build output directory:
/public. - Make sure the
Build system versionwas2, it’s required to install Dart Sass. - Environment variables:
HUGO_VERSION: i.e.0.111.3.NODE_VERSION: any version large than16, e.g19.EMBEDDED_DART_SASS_VERSION: Embedded Dart Sass, i.e.1.62.1.
Deploy Sites via GitHub Cloudflare Pages Actions
- Create a site on Cloudflare Pages dashboard, and then disable it’s built-in automatic deployments.
- Create the
CLOUDFLARE_ACCOUNT_ID1 andCLOUDFLARE_API_TOKEN2 action’s secrets. - Create the following workflow, and tweak the configuration as needed.
- Replace the
projectNamewith your site name on Cloudflare Pages. - 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 # 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 }}
Please checkout the Get account ID. ↩︎
See also Generate an API token. ↩︎
