What is Cloudflare Pages #
Cloudflare Pages is a platform for deploying and hosting static websites, provided by our Cyber Samaritan Cloudflare. For more information, check the official website here.
Why Cloudflare Pages #
When I first set up my blog, I used GitHub Pages in the beginning, as described in this blog post How to create a blog/static website using Hugo, GitHub pages and GitHub Actions. But why did I want to move away from GitHub Pages to Cloudflare Pages?
-
Cloudflare Pages has better support for building Hugo. It comes with CI/CD integration by default, while with GitHub Pages I had to create a GitHub Actions workflow to build and deploy my site. In addition, Cloudflare Pages keeps a detailed history of all deployments and build logs.
-
Cloudflare is my domain registrar and DNS provider, which makes it easier for me to set up a custom domain with Cloudflare Pages. It also supports multiple custom domains.
-
Cloudflare Pages supports automated builds from private repositories, unlike GitHub Pages which requires a public repo.
-
Cloudflare Pages comes with free Web Analytics.
-
GitHub is blocked in mainland China. For better accessibility in China, it is recommended to use Cloudflare Pages.
Why do not use Cloudflare Workers #
Cloudflare Workers is a serverless platform for building, deploying, and scaling apps across Cloudflare’s global network. For more information, check the official website here.
Fundamentally Cloudflare Workers is a compute platform, hosting a website is only one of its many capabilities. It allows for custom logic to process requests and requires manual deployment. At present, the Workers framework does not offer official support for Hugo.
In contrast, Cloudflare Pages is purpose-built for static sites and Jamstack applications. It comes with built-in CI/CD and a fully automated GitOps workflow(triggered by Git operations).
For deploying a Hugo website, Cloudflare Pages is the simpler and faster choice.
Deploy with Cloudflare Pages #
After a hugo project is pushed to a GitHub repository (Now we can use a privary repo), it can be deployed using Cloudflare Pages. Of course a Cloudflare account is required to get started.
-
From the Cloudflare dashboard, navigate to Pages. Select Import an existing Git repository.
-
The GitHub account is then connected, and the project repository is selected for deployment.
-
In the Build settings, Hugo is selected as the Framework preset. The build command and output directory are configured automatically. Then click Save and Deploy to initiates the first deployment.
Troubleshooting: Hugo version mismatch #
here I failed in the first time, due to the wrong version of Hugo. A deployment may fail if Cloudflare’s default Hugo version is incompatible with the project’s requirements. The solution is to specify the Hugo version by setting an environment variable.
This is configured under the project’s Settings - Variables and Secrets. Add a new environment variables with the details with the following details:
Variable name: HUGO_VERSION
Value: 0.147.0 (or the specific version the project requires)
Cloudflare Pages will then use this specified version for all subsequent builds.
Set up a custom domain #
After successful deployment, a custom domain can be configured for the project. Navigate to custom domains - Set up a cumstom domain.
Then add DNS Records. This is typically a CNAME record pointing to the project’s unique .pages.dev URL.
The Cloudflare Pages will then verify the domain. It may take up to 48 hours for DNS records to update and for the site to become viewable by visitors. This process is often much faster when Cloudflare is the domain registrar. I only wait for a few minutes. Once verification is complete, an SSL certificate is automatically provisioned for the domain.
Finally, open a brower and navigate to the custom domain to confirm that the site is live. If the website loads correctly, the setup is complete.
Cover image: This is an illustration of a white dwarf star merging into a red giant star. A bow shock forms as the dwarf plunges through the star’s outer atmosphere. The passage strips down the white dwarf’s outer layers, exposing an interior carbon core. From NASA