Create and Publish a Hugo Blog on Cloudflare Pages

Introduction Link to heading

After spending some time self-hosting various applications, I thought it would be a great idea to document and share what I’ve been building and experimenting with.

For this article, We’ll use HUGO, a popular static site generator known for its simplicity and speed. When paired with a GitHub repository and Cloudflare Pages, you get a modern, efficient, and secure platform for deploying and hosting static sites. This combination offers a cost-effective solution for setting up a blog with minimal effort.

In this guide, I’ll walk you through the entire process of installing Hugo, setting up your blog, and deploying it to Cloudflare Pages. The goal is to help you get your blog up quickly and efficiently.

Setting Up Hugo Link to heading

For Hugo official documentation refer Quick start | Hugo - Official Documentation

1. Install Hugo

   First, install Hugo on your system:

   sudo apt install hugo
   
   # Verify Installation
   hugo version
   

2. Create a Github Repository Create a new repository on GitHub and clone it to your local machine:

   git clone https://github.com/<account>/<repoName>.git
   cd repoName
   

3. Create a new Hugo site

   Initialize a new Hugo site in your repository:

   hugo new site quickstart
   cd quickstart
   

   This will create the following directory structure:

   # quickstart directory structure
   .cloudflare
   └── quickstart
       ├── archetypes
       │   └── default.md
       ├── assets
       ├── content
       ├── data
       ├── hugo.toml
       ├── i18n
       ├── layouts
       ├── static
       └── themes
   

There are loads of themes you can choose from Themes. For this demo we’ll be using coder theme Hugo Coder

1. Add the repository into your Hugo Project repository as a submodule git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder.
2. Configure your hugo.toml. You can either use this minimal configuration as a base, or look for a complete explanation about all configurations here. The hugo.toml inside the exampleSite is also a good reference.
3. Build your site with command hugo server and see the result at http://localhost:1313/. If you’re using a seperate device for building the hugo site and need to access the hugo site at http://192.168.x.x:1313/, then use the –baseURL flag in the command hugo server -D --baseURL http://192.168.x.x/.

For Building and Customizing Your Hugo Site, use Hugo Docs and exampleSite for reference

Getting Started and deploying to Cloudflare Pages Link to heading

1. Push the changes to your git repository

   Commit and push your changes to GitHub:

   git add .
   git commit -m "Pushing Hugo site to github repo"
   git push origin main
   

2. Set Up Cloudflare Pages

   • Create a Cloudflare account
   • Sign-In to your cloudflare account
   • Navigate to “Worker & Pages”
   • Click create and select Pages
   • Choose ‘Connect to Git’
   • Authenticate and connect your Github account
   • Select the repository containing your hugo blog
   • Choose your Production Branch (eg., ‘main’)

3. Configure Build Settings Set the following build configurations

   • Framework Present : Hugo
   • Build command: hugo
   • build output directory : /public (By Default)
   • Environment variable: Set HUGO_VERSION to v0.xxx.x if your theme requires a specific version or your getting version error during deployment.

4. Deploy the Site Click “Save and Deploy” to start the deployment process.

5. HTTPS Configuration Cloudflare Pages automatically provisions HTTPS for your site, so no additional SSL/TLS configuration is needed.

Conclusion Link to heading

Creating and publishing a Hugo blog on Cloudflare Pages is an efficient and cost-effective way to establish your online presence. Cloudflare Pages automatically handles HTTPS configuration, ensuring your site is served securely. This approach combines the power of Hugo’s static site generation with Cloudflare’s robust hosting and deployment infrastructure, resulting in a fast, secure, and easily maintainable blog.

Happy blogging!