This is my setup for running a personal blog: Hugo for static site generation, GitHub for version control, Vercel for deployment, Namecheap for domain, and Cloudflare for DNS/CDN. The whole process takes about an hour.

Tech Stack Overview

Prerequisites

Before starting, make sure you have:

• GitHub account
• Vercel account (sign up with GitHub)
• Hugo installed locally
• Git installed locally

Optional (only if you want a custom domain):

• Namecheap account (for domain)
• Cloudflare account

Install Hugo (macOS)

1

brew install hugo

Verify installation:

1

hugo version

Step 1: Create Hugo Site

Create a new site

1
2

hugo new site my-blog
cd my-blog

Initialize Git

1

git init

Add hugo-theme-stack theme

1

git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack

Configure the site

Create hugo.yaml in the root directory:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

baseurl: https://yourdomain.com/
languageCode: en-us
theme: hugo-theme-stack
title: My Blog

params:
  mainSections:
    - posts
  sidebar:
    subtitle: Your tagline here

menu:
  main: []

markup:
  goldmark:
    renderer:
      unsafe: true
  highlight:
    noClasses: false

Create your first post

1

hugo new content posts/hello-world/index.md

Edit content/posts/hello-world/index.md:

1
2
3
4
5
6
7

---
title: "Hello World"
date: 2026-01-21T00:00:00+08:00
draft: false
---

First post.

Preview locally

1

hugo server

Open http://localhost:1313 in your browser.

Step 2: Push to GitHub

Create .gitignore

1
2
3

echo "public/" >> .gitignore
echo "resources/" >> .gitignore
echo ".hugo_build.lock" >> .gitignore

Commit and push

1
2

git add .
git commit -m "Initial commit"

Create a new repository on GitHub, then:

1
2
3

git remote add origin https://github.com/YOUR_USERNAME/my-blog.git
git branch -M main
git push -u origin main

Or use GitHub CLI:

1

gh repo create my-blog --public --source=. --push

Step 3: Deploy to Vercel

Connect GitHub to Vercel

1. Go to vercel.com/new
2. Click Import Git Repository
3. Select your my-blog repository
4. Configure build settings:

5. Add Environment Variable (optional):

   • Scroll to Environment Variables
   • Add HUGO_BASEURL = https://yourdomain.com/
   • This overrides baseurl in hugo.yaml during build

6. Click Deploy

The site will be available at https://my-blog-xxx.vercel.app.

💡 At this point, your blog is already live and accessible. The following steps (4-6) are optional — only needed if you want a custom domain.

Step 4: Purchase Domain on Namecheap

1. Go to namecheap.com
2. Search for your desired domain
3. Add to cart and complete purchase
4. Go to Domain List → Manage → Nameservers
5. Select Custom DNS (we’ll add Cloudflare nameservers later)

Step 5: Setup Cloudflare

Add site to Cloudflare

1. Go to dash.cloudflare.com
2. Click Add a Site
3. Enter your domain name
4. Select the Free plan
5. Cloudflare will scan existing DNS records

Get nameservers

Cloudflare will provide two nameservers, e.g.:

1
2

anna.ns.cloudflare.com
bob.ns.cloudflare.com

Update Namecheap nameservers

1. Go back to Namecheap → Domain List → Manage
2. Under Nameservers, select Custom DNS
3. Add the two Cloudflare nameservers
4. Save changes

Note: DNS propagation may take up to 24 hours, but usually completes within minutes.

Configure DNS records

In Cloudflare Dashboard → DNS → Records, add:

Enable SSL/TLS

1. Go to SSL/TLS → Overview
2. Set encryption mode to Full (strict)

Step 6: Add Custom Domain to Vercel

1. Go to your Vercel project dashboard
2. Click Settings → Domains
3. Add your domain (e.g., yourdomain.com)
4. Add www.yourdomain.com as well
5. Vercel will verify the DNS configuration

Once verified, the blog is accessible at your custom domain.

References

• Hugo Documentation
• hugo-theme-stack Documentation
• Vercel Documentation
• Cloudflare Documentation