How I Set Up This Site with Hugo, Netlify, and Cloudflare

My experience building this blog with Hugo and the Stack theme, automated deployments through Netlify, and global delivery via Cloudflare.

I recently rebuilt my personal site from scratch, and I wanted to share what I learned along the way. My requirements were simple: something fast, easy to maintain, and with automated deployments. I didn’t want to deal with databases, server maintenance, or complex CMS systems.

After some research, I went with Hugo paired with the Stack theme, deployed through Netlify, with Cloudflare handling DNS and CDN. The setup turned out to be surprisingly straightforward, and the result is exactly what I wanted.

Why I Chose This Setup

I picked Hugo because it’s incredibly fast and generates pure static HTML. No server-side processing, no security vulnerabilities to worry about. The Stack theme caught my eye immediately – clean, card-based design that just works.

For hosting, Netlify was a no-brainer. Their free tier is generous, and the git-based deployment workflow is elegant: I write locally, push to GitHub, and Netlify automatically builds and deploys everything.

Cloudflare was already managing my domain, so I kept it there for DNS and their global CDN. The combination means visitors anywhere in the world get fast load times.

The entire workflow: write locally → push to GitHub → Netlify auto-deploys → Cloudflare serves it globally.


Setting Up Locally

I’m on a Mac, so I used Homebrew to install everything I needed:

1
brew install hugo go git

After installation, I verified everything was working:

1
2
3
hugo version
go version
git --version

Then I created the site structure and set it up as a Hugo module:

1
2
3
mkdir santoshmano && cd santoshmano
hugo new site .
hugo mod init github.com/santoshmano/santoshmano.com

Configuring the Stack Theme

I created a hugo.toml configuration file with these settings:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
baseURL = "https://santoshmano.com/"
title = "Santosh Manoharan"
languageCode = "en-us"
paginate = 10
enableRobotsTXT = true

[module]
  [[module.imports]]
    path = "github.com/CaiJimmy/hugo-theme-stack/v3"

[params]
  enableSearch = true
  showReadingTime = true
  showCodeCopyButtons = true
  mainSections = ["blog"]

[params.colorScheme]
  toggle = true
  default = "auto"

[taxonomies]
  tag = "tags"
  category = "categories"

[markup]
  [markup.goldmark.renderer]
    unsafe = true
  [markup.highlight]
    noClasses = false
    lineNos = true

To preview locally, I ran:

1
hugo server -D

This starts a development server at http://localhost:1313 with live reload, which made testing changes incredibly fast. When I was ready to build for production, I used:

1
hugo --minify

Pushing to GitHub

I initialized a git repository and pushed everything to GitHub:

1
2
3
4
5
6
git init
git add .
git commit -m "Initial Hugo setup with Stack theme"
git branch -M main
git remote add origin https://github.com/santoshmano/santoshmano.com.git
git push -u origin main

Deploying to Netlify

I logged into Netlify and connected my GitHub repository. The setup was straightforward:

  1. Clicked “Add new site”“Import from GitHub”
  2. Selected my repository
  3. Configured the build settings:
    • Build command: hugo --minify
    • Publish directory: public
  4. Added an environment variable:
    • Key: HUGO_VERSION
    • Value: 0.139.0
  5. Hit “Deploy site”

Within minutes, my site was live at a Netlify subdomain.

Adding netlify.toml

For better control over the build process, I added a netlify.toml file to my project root:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
[build]
  command = "hugo --minify"
  publish = "public"

[build.environment]
  HUGO_VERSION = "0.139.0"
  HUGO_ENV = "production"
  HUGO_ENABLEGITINFO = "true"

[context.production.environment]
  HUGO_ENV = "production"

[context.deploy-preview.environment]
  HUGO_VERSION = "0.139.0"

Connecting My Custom Domain with Cloudflare

Since my domain was already registered with Cloudflare, I kept it there for DNS management instead of switching to Netlify’s DNS.

DNS Configuration

In Cloudflare’s DNS settings, I added two CNAME records:

For the root domain (santoshmano.com):

Type: CNAME
Name: @
Content: santoshmano.netlify.app
Proxy status: Proxied (🟠 orange cloud ON)
TTL: Auto

For the www subdomain:

Type: CNAME
Name: www
Content: santoshmano.netlify.app
Proxy status: Proxied (🟠 orange cloud ON)
TTL: Auto

SSL/TLS Configuration

In Cloudflare’s SSL/TLS settings, I set the encryption mode to Full. This ensures proper end-to-end encryption between Cloudflare and Netlify.


Adding the Domain in Netlify

Back in Netlify, I added my custom domain:

  1. Went to Site settingsDomain management
  2. Clicked “Add a domain”
  3. Entered santoshmano.com and verified it
  4. Repeated the process for www.santoshmano.com
  5. Set santoshmano.com as the primary domain

Setting Up HTTPS

In Netlify’s HTTPS section, I clicked “Verify DNS configuration” and then “Provision certificate”. Netlify automatically issued a Let’s Encrypt SSL certificate, which took about 5-10 minutes.


Testing Everything

After waiting for DNS propagation (around 15 minutes in my case), I tested:

  • https://santoshmano.com → loaded perfectly
  • https://www.santoshmano.com → redirected to the main domain
  • https://santoshmano.netlify.app → also worked

Issues I Ran Into

A few hiccups along the way that might save you some time:

  • Certificate provisioning took longer than expected - I had to wait about 15 minutes and click “Verify DNS” a couple of times before it went through. Patience is key.
  • Initially forgot to set SSL mode to “Full” in Cloudflare - This caused redirect loops. Once I fixed the SSL/TLS setting, everything worked smoothly.
  • The Hugo version matters - Netlify was using an older Hugo version by default, which broke the Stack theme. Setting HUGO_VERSION in the environment variables fixed it.

How It All Fits Together

The architecture is elegantly simple:

My Mac (write posts in Markdown)
    |
    | git push
    v
GitHub (stores the code)
    |
    | triggers webhook
    v
Netlify (builds with Hugo, deploys)
    |
    | serves content to
    v
Cloudflare (DNS, CDN, SSL)
    |
    | delivers to
    v
Visitors (fast HTTPS everywhere)

Every time I push to GitHub, Netlify automatically rebuilds and deploys the site. Cloudflare’s CDN ensures fast load times globally.


Reflections

This setup has been running smoothly for months now. The git-based workflow feels natural, and I love that I can write in Markdown without worrying about databases or server maintenance.

The Stack theme has been great out of the box, though I did add some custom styling in assets/scss/custom.scss to tweak the dark mode colors and accent color to my liking.

If you’re considering building a personal site or blog, I’d highly recommend this stack. It’s fast, secure, free (for most personal use cases), and requires minimal maintenance.


comments powered by Disqus

© 2025 Santosh Manoharan