Darshit's blogs

Create & Deploy a Free Blog with Hugo and Cloudflare Pages

If you’ve ever wanted to start a blog with:

  • 🆓 Zero hosting costs
  • ⚡ Lightning-fast performance
  • 🧩 Clean, customizable themes
  • 🚀 Automatic deployment from GitHub

…then Hugo + Cloudflare Pages is the perfect combo for you!

In this post, we’ll walk you step-by-step through the process of building your own blog using Hugo, a powerful static site generator, and Cloudflare Pages, a free deployment platform. No complicated setup. No servers. Just write and deploy.

🧰 Prerequisites

Before we begin, make sure you have:

✨ Step 1: Install Hugo

Install Hugo on your system by following the official quick-start guide:

On macOS:

brew install hugo

On Ubuntu/Debian:

sudo apt install hugo

Verify Installation:

hugo version

You should see something like: hugo v0.124.1+extended darwin/arm64

🏗️ Step 2: Create a New Hugo Site

Let’s create the blog structure:

hugo new site my-hugo-blog
cd my-hugo-blog

This sets up the basic structure.

🎨 Step 3: Use a Better Theme (hugo-paper)

Instead of the default theme, we’ll use hugo-paper — it’s minimal, beautiful, and content-focused.

Add the theme as a Git submodule:

git init
git submodule add https://github.com/nanxiaobei/hugo-paper themes/hugo-paper

Configure the theme in config.toml:

Replace your config.toml with:

baseURL = 'https://your-site-name.pages.dev/'
languageCode = 'en-us'
title = 'My Hugo Blog'
theme = 'hugo-paper'

[params]
  author = 'Your Name'
  homeSubtitle = 'Just a simple blog built with Hugo and Cloudflare Pages'

✍️ Step 4: Write Your First Blog Post

Create a post with:

hugo new posts/hello-world.md

This creates content/posts/hello-world.md.

Open it and add your content:

---
title: "Hello World"
date: 2025-06-08T12:00:00+05:30
draft: false
---

Welcome to my first blog post! 🎉

I'm building this blog using Hugo and deploying it on Cloudflare Pages — all for free!

To see your blog locally:

hugo server -D

Open your browser and go to http://localhost:1313.

⚠️ Posts with draft: true are hidden by default unless you use -D.

🧪 Step 5: Test Build Locally

To build your site locally and preview:

hugo

This generates static files in the public/ folder.

☁️ Step 6: Deploy to Cloudflare Pages (for FREE)

Now let’s publish your blog to the internet using Cloudflare Pages.

🌀 Push to GitHub

  1. Create a GitHub repo (e.g., my-hugo-blog)
  2. Add remote and push code:
git remote add origin https://github.com/YOUR_USERNAME/my-hugo-blog.git
git branch -M main
git add .
git commit -m "Initial commit"
git push -u origin main

🌐 Setup Cloudflare Pages

  1. Go to Cloudflare Pages

  2. Click “Create a project”

  3. Connect your GitHub account

  4. Select your repo

  5. Configure the following:

    • Framework preset: Hugo
    • Build command: hugo
    • Build output directory: public

  6. Click Deploy Site

⚡ That’s it! Your blog is live at https://your-site-name.pages.dev.

You can get a custom domain later too (Cloudflare makes it easy).

🎁 Bonus: Customize the Theme

Let’s say you want to tweak the layout — maybe add a banner, change fonts, etc.

🛠 How Hugo Themes Work

Hugo themes are structured under the themes/ directory. You can override any file by copying it to your project’s /layouts/ directory.

📝 Example: Customize Post Layout

  1. Copy from theme to your project:
mkdir -p layouts/_default
cp themes/hugo-paper/layouts/_default/single.html layouts/_default/
  1. Edit layouts/_default/single.html as you wish.

Maybe add this above the content block:

<h1 class="custom-title">🌟 My Custom Blog Layout</h1>
  1. Restart server and preview:
hugo server -D

Your overrides take precedence over the theme!

🔄 Updating the Theme

If the theme gets updated, pull the latest changes:

git submodule update --remote --merge