Friends keep asking how I set up my website. Here is the complete walkthrough — from zero to a working personal site with a blog, custom domain, and HTTPS. No prior experience needed.

The Stack

Total cost: ~$20/year for the domain. Everything else is free.

Why This Stack?

• Hugo is fast, has no dependencies, and handles CJK (Chinese/Japanese/Korean) text well. If you write in Chinese, this matters.
• Netlify builds your site automatically every time you push to GitHub. No server to manage.
• Private repo means your source code isn’t public. Netlify can still build from private repos — GitHub Pages cannot (without paying).
• Squarespace for domains is straightforward. You could also use Namecheap, Google Domains (now Squarespace), or any registrar.

Step 1: Install Hugo

On macOS (with Homebrew):

1

brew install hugo

On Linux:

1
2

sudo apt install hugo
# or download from https://github.com/gohugoio/hugo/releases

On Windows: download from Hugo releases. Get the “extended” version.

Verify:

1
2

hugo version
# Should show something like: hugo v0.159.0+extended

Step 2: Create a New Site

1
2

hugo new site mysite
cd mysite

This creates a directory structure:

mysite/
├── archetypes/
├── content/        ← your writing goes here
├── layouts/        ← custom templates (optional)
├── static/         ← images, CSS, files
├── themes/         ← theme goes here
└── config.toml     ← site configuration

Step 3: Add a Theme

I use hugo-ivy by Yihui Xie. It is minimal, supports MathJax, and handles Chinese text properly.

1
2

git init
git submodule add https://github.com/yihui/hugo-ivy.git themes/hugo-ivy

Then edit your config file. I prefer YAML over TOML, so I use config.yaml:

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

baseurl: "https://yourdomain.com/"
languageCode: "en-us"
title: "Your Name"
theme: "hugo-ivy"
hasCJKLanguage: true
enableEmoji: true

menu:
  main:
    - name: "English"
      url: "/en/"
      weight: 1
    - name: "中文"
      url: "/cn/"
      weight: 2
    - name: "About"
      url: "/about/"
      weight: 3

Step 4: Write Content

Create your about page:

1

hugo new about.md

Edit content/about.md:

1
2
3
4
5

---
title: "About"
---

Write something about yourself.

Create a blog post:

1

mkdir -p content/en

Edit content/en/hello.md:

1
2
3
4
5
6

---
title: "Hello World"
date: 2026-03-29
---

This is my first post.

For Chinese posts, put them in content/cn/.

Step 5: Preview Locally

1

hugo server -D

Open http://localhost:1313 in your browser. The -D flag shows draft posts. Hugo live-reloads — every time you save a file, the browser updates automatically.

Step 6: Push to GitHub

Create a private repository on GitHub (e.g., yourusername/mysite).

1
2
3
4

git add -A
git commit -m "initial site"
git remote add origin https://github.com/yourusername/mysite.git
git push -u origin main

Step 7: Deploy on Netlify

1. Go to app.netlify.com and sign in with GitHub.
2. Click “Add new site” → “Import an existing project” → select your repo.
3. Build settings:
   • Build command: hugo
   • Publish directory: public
4. Under Environment variables, add:
   • HUGO_VERSION = 0.159.0 (or whatever version you installed locally)
5. Click Deploy.

Netlify gives you a temporary URL like yoursite-abc123.netlify.app. Check that it works.

Important: every time you git push, Netlify automatically rebuilds and deploys. No manual steps needed.

Step 8: Buy a Domain (Squarespace)

1. Go to domains.squarespace.com.
2. Search for your desired domain and purchase it (~$20/year for .com or .org).
3. In the Squarespace DNS settings, add these records:

4. In Netlify, go to Domain management → Add custom domain → enter your domain.
5. Netlify will automatically provision an HTTPS certificate (Let’s Encrypt). This takes a few minutes.

Step 9: Adding MathJax (for math content)

If you write math, you need MathJax. The hugo-ivy theme supports it. In your post’s front matter, add:

1
2
3
4
5

---
title: "My Math Post"
math: true
mathjax: true
---

Inline math: $E = mc^2$

Display math — important: wrap $$...$$ blocks in <div> tags to prevent Hugo’s Markdown parser (Goldmark) from mangling them:

1
2
3

<div>
$$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$
</div>

For multi-line equations with \\, always use <div> wrappers. This is the single most common source of math rendering bugs in Hugo.

Step 10: Adding Static Files

If you have an existing website (plain HTML, CV PDFs, etc.), put everything in the static/ directory:

static/
├── index.html        ← your old homepage (optional)
├── cv/
│   └── CV.pdf
├── talks/
│   └── slides.pdf
└── images/
    └── photo.jpg

Hugo copies everything in static/ to the root of your built site. So static/cv/CV.pdf becomes yourdomain.com/cv/CV.pdf.

Pro tip: if you put an index.html in static/, it overrides Hugo’s generated homepage. This is useful if you want to keep your old academic homepage as the landing page while using Hugo for the blog section.

Summary

The complete workflow:

1. Write a post in content/en/ or content/cn/
2. Preview with hugo server -D
3. git add -A && git commit -m "new post" && git push
4. Netlify auto-deploys in ~30 seconds
5. Your post is live at yourdomain.com

That’s it. No server, no database, no WordPress, no maintenance. Write Markdown, push, done.

Or, Skip All of the Above

You don’t actually need to know any of this.

Install OpenClaw, connect it to Claude, and tell your AI agent: “Build me a personal website with a blog.” It will set up Hugo, pick a theme, configure Netlify, write your about page, debug your MathJax, fix your DNS records, and push to GitHub — all while you sit there drinking tea.

This entire site — including the page you are reading right now — was migrated, configured, and deployed by my AI agent in one morning. I mostly just said “好” a lot.

The future is not about learning every tool. It’s about having someone who learns them for you.

If you still run into problems after all that, feel free to email me. But honestly, just ask the AI.