Cloudflare Pages

Cloudflare Pages allows you to deploy your site by either importing a Git repository from GitHub or GitLab, or by using a direct upload.

Deploy on Cloudflare Pages

After signing up and logging into Cloudflare Pages:

1. Select Compute (Workers).
2. On the Get Started page, choose Pages.
3. Decide whether to Import an existing Git repository or Use direct upload..

Deploy from Git

1. Under Deploy a site from your account, choose GitHub or GitLab and connect your account.
2. After authentication, select your Alpha repository and click Begin Setup.

Set the following:

1. Project name — This will define your site’s URL: https://[project-name].pages.dev
   1. In your root hugo.toml, set:

   baseURL = "https://[project-name].pages.dev"
   

   2. Commit and push the change to GitHub or GitLab.
2. Framework preset: Choose Hugo
3. Build command:
   • With search functionality:

   hugo --gc --minify && npx pagefind --site "public"
   

   • Without search:

   hugo --gc --minify
   

4. Environment variables ( + Add variable)
   • Variable name: HUGO_VERSION
   • Value: 0.148.0
     Note: Use a HUGO_VERSION greater than 0.146.1, ideally matching your local version.

Once complete, click Save and Deploy.
When deployment finishes without errors, you can click Continue to Project.

Every consecutive push to your GitHub or GitLab repository will automatically trigger a deployment on Cloudflare Pages.

Deploy with Direct Upload

1. From the Get started page on Compute (Workers), choose Use direct upload and then Get Started.
2. Choose a project name (this becomes your site’s URL: https://[project-name].pages.dev) and click Create Project.
   1. In your root hugo.toml setbaseURL = "https://[project-name].pages.dev" and save the change.
   2. Build your site locally:
      • With Search:

      hugo --gc --minify && npx pagefind --site "public"
      

      • Without search:

      hugo --gc --minify
      

      Note: Search requires Node.js installed locally.
3. In Cloudflare click select from computer, choose your local public/ folder, and upload it.
4. Click Deploy Site and then Continue to Project.

For future updates (deployments):

1. Build your site locally.
2. Navigate to Workers & Pages → [your project name].
3. Click Create deployment and re-upload the updated public/ folder.

Custom Headers File (Optional)

Alpha includes a _headers file preconfigured for a default Alpha installation, located at: themes/alpha/static/_headers.

This file allows you define security HTTP headers for your Cloudflare Pages deployment. Refer to the official official documentation for complete syntax, usage examples, and header options.

How to Use

1. Copy the _headers file from themes/alpha/static to your site’s static/ directory.
2. Review and customize the rules to match your site’s security and performance needs.