Prerequisites

Install Hugo Install Git

Creating a Site and Setting the PaperMod Theme

Create a site with YAML as the configuration file format and navigate to the directory.

hugo new site MySite --format yaml
cd MySite

Initialize the site as a Git repository and add PaperMod as a submodule.

git init
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

Set PaperMod as the theme in the configuration file.

echo 'theme: ["PaperMod"]' >> hugo.yaml

Creating the First Post

Create the first post using the following command.

hugo new posts/first-post.md

Edit the created file, disable the draft status (draft: true → draft: false or remove the key), and add sample content like “Hello, world!” as shown in the example below.

---
date: '2024-12-07T17:41:19+09:00'
title: 'First Post'
---

Hello, world!

Start the development server to preview the site.

hugo server

Creating a README.md File

It is useful to include information in a README.md file for replicating the environment on other devices. An example can be found in this GitHub commit. Copy and modify it as needed.

Committing Changes

After verifying the setup, stage and commit the changes.

git add .
git commit -m "Initial commit"

Creating a GitHub Repository

Create a new repository on GitHub. The repository can be either public or private.

Push the local repository to GitHub.

Deploying to Cloudflare Pages

Create a Cloudflare account and log in. Follow the steps below from the dashboard:

  1. Navigate to “Workers & Pages” > “Pages” and click “Connect to Git.” Select the repository created earlier.

  2. In the “Build and Deploy” setup:

  • If using a custom domain, ensure the custom domain is specified in the baseURL of hugo.yaml and leave the build command as hugo.
  • If not using a custom domain, set the build command to hugo -b $CF_PAGES_URL to use the domain provided by Cloudflare Pages. The $CF_PAGES_URL environment variable is automatically set.
  1. Specify the Hugo version as a build environment variable, as the default Hugo version may not support PaperMod. Confirm the version locally with hugo version and set it (e.g., HUGO_VERSION=0.137.0).
  2. Remember to set “Build output” to “public” (the folder name that contains index.html)
  3. Save the settings and deploy the site. Deployment takes a few minutes. After deployment, you can configure a custom domain from the dashboard if desired.

Conclusion

Using Cloudflare Pages, you can create and deploy a Hugo site for free with minimal effort. Hugo also offers a variety of themes, making it worthwhile to explore different options.

PaperMod is one of the most popular Hugo themes1, widely supported with abundant user-created resources. This blog will continue to cover configuration examples for PaperMod.

Much of the content aligns with Cloudflare’s official guide; however, this article emphasizes the PaperMod theme and includes practical examples, such as reusable README files.

References

This post is originally from this tutorial with slight modification.