I recently decided to create a blog and wanted to share my setup process. I already had a domain name registered and chose to use Cloudflare Pages (their free hosting service) along with the Hugo framework for the implementation.

Note: While I went with Hugo, Cloudflare Pages supports many other frameworks including Next.js, Gatsby, Jekyll, Eleventy, and more. You can find the full list in their documentation.

Prerequisites:

  • A registered domain name
  • macOS (though the steps are similar for other operating systems)
  • Basic comfort with command line operations
  • GitHub account
  • Cloudflare account (free tier is sufficient)

Here’s the technical guide on how I set everything up:

  1. First, create an empty repository on GitHub and clone it:
git clone https://github.com/yourusername/your-repo-name.git
cd your-repo-name
  1. Install Hugo using Homebrew:
brew install hugo
  1. Initialize the Hugo site (the --force flag is needed since the directory isn’t empty due to git):
hugo new site . --force
  1. At this point, you’ll notice a hugo.toml file was created. Rename it to config.toml:
mv hugo.toml config.toml
  1. Choose and set up a theme. I browsed the Hugo themes and found one I liked. Add it as a git submodule:
git submodule add https://github.com/theme-author/theme-name.git themes/theme-name
  1. Test the site locally:
hugo server -D
  1. Once everything looks good locally, commit and push to GitHub:
git add .
git commit -m "Initial Hugo site setup"
git push origin main

  1. Set up Cloudflare Pages:

    • Go to Cloudflare dashboard
    • Select “Workers & Pages”
    • Create a new Pages project
    • Connect your GitHub repository
    • Important: Add an environment variable named HUGO_VERSION with your local Hugo version 
      # Check your Hugo version with:
hugo version

  2. For custom domain setup:

    • In Cloudflare Pages, go to your project
    • Select “Custom Domains”
    • Follow the prompts to set up your domain
    • Update your domain registrar’s nameservers to Cloudflare’s
    • Wait for propagation (took about 20 minutes in my case)
    • On macOS, flush your DNS cache: 
      sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder

That’s it! Now every push to the main branch automatically triggers a new deployment through Cloudflare Pages. The setup might seem involved, but it creates a robust, fast, and easily maintainable blog infrastructure.