Hugo CMS Guide: Build Your Business Website in a Day With AI

You need a website for your business. You know WordPress is slow and gets hacked. You’ve heard “static sites” are better but the technical stuff feels overwhelming.

Here’s the reality: I built this entire site with Hugo and Claude Code in a single weekend. No web development background required. You describe what you want in plain English, Claude writes the code, and you have a production site.

Hugo generates static HTML files. No database to hack, no plugins to update, hosting costs under $20/month (often free). Pages load in under a second instead of the 2-4 seconds typical of WordPress.

This guide gives you everything to build your first business site:

• The exact setup process (30 minutes to first site)
• Copy-paste prompts that generate working templates
• The workflow I use to ship production sites in a day
• How to deploy for free on Cloudflare or Netlify

Quick Navigation

What Is Hugo

Hugo takes your content (written in simple Markdown files) and templates, then generates a complete HTML website. No database. No server-side code. Just files that load fast.

Why this matters for your business:

The business impact is real.

A typical WordPress site loads in 2-4 seconds. A Hugo site loads in under 1 second, often under 500ms.

What this means for your bottom line:

• SEO: Google uses page speed as a ranking factor. Faster sites rank higher
• Conversions: Every second of load time costs roughly 7% in conversions (Portent)
• Ad costs: Faster landing pages mean better Quality Scores and lower CPCs on Google Ads
• Peace of mind: No more midnight emergencies when plugins break

The old problem with Hugo:

The learning curve was brutal. Templates looked like hieroglyphics. You’d spend days figuring out why your menu wouldn’t render.

That problem no longer exists.

Claude Code understands Hugo’s templating system better than most developers. You describe what you want in plain English, it writes the code. The technical barrier is gone.

Hugo vs WordPress: The Real Comparison

Here’s when to use each. No hedging.

Use Hugo for your business when:

• You’re building landing pages, content sites, or marketing pages
• You want pages that load fast (this directly affects conversions)
• You don’t want to worry about security patches and plugin updates
• You’re willing to use AI to handle the technical parts
• You don’t need user accounts, membership areas, or complex e-commerce

Use WordPress when:

• You need a full e-commerce store with complex inventory
• You need user accounts and membership features
• You require a specific WordPress plugin with no alternative
• You have a team that only knows WordPress and won’t learn anything else

For 90% of people starting an online business, Hugo is the right choice. This site runs on Hugo. Every landing page I build runs on Hugo. The performance and maintenance difference is significant.

The Numbers

The hidden cost nobody mentions:

WordPress sites demand ongoing maintenance. Plugin updates break things. PHP versions change. Databases need optimization. You’re either doing this yourself (hours per month) or paying someone $50-200/month.

Hugo sites? Deploy once, forget about it. Updates happen only when you want new features. That time and money goes back into your business.

Getting Started With Hugo

Follow these steps exactly. You’ll have a working site in 30 minutes.

Step 1: Install Hugo

Mac (with Homebrew):

brew install hugo

Windows (with Chocolatey):

choco install hugo-extended

Linux (Ubuntu/Debian):

sudo apt install hugo

Or download directly from the Hugo releases page. Get the “extended” version for your OS.

Verify it worked:

hugo version

You should see something like hugo v0.140.0+extended.

Critical: Install the extended version. Most themes need it for CSS processing. If you get styling errors later, this is usually why.

Step 2: Create Your First Site

hugo new site my-business-site
cd my-business-site

This creates your project structure:

my-business-site/
├── archetypes/      # Content templates
├── assets/          # Files processed by Hugo Pipes
├── content/         # Your actual content (Markdown)
├── data/            # Data files (JSON, YAML, TOML)
├── i18n/            # Translation files
├── layouts/         # HTML templates
├── static/          # Files copied as-is (images, CSS, JS)
├── themes/          # Downloaded themes
└── hugo.toml        # Site configuration

Step 3: Add a Theme

Don’t build from scratch. Start with a theme close to what you want, then customize with AI.

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml

Themes I recommend for business sites:

• Ananke - Clean, simple, good starting point
• PaperMod - Fast, SEO-focused for content sites
• Hugo-Fresh - Landing page / SaaS style
• Blowfish - Feature-rich with dark mode

Browse more at themes.gohugo.io

Get it working fast: Most themes include an exampleSite folder. Copy its contents to your project root to see the theme working immediately with sample content.

Step 4: Create Your First Content

hugo new content posts/my-first-post.md

This creates a Markdown file:

---
title: "My First Post"
og_title: Hugo CMS Guide
date: 2026-01-24T10:00:00-05:00
draft: true
---

Your content here...

Step 5: See Your Site

hugo server -D

The -D flag shows draft content. Open http://localhost:1313 in your browser.

This is where Hugo shines: Save any file and Hugo rebuilds instantly. No waiting. No refreshing. You see changes immediately. This makes the AI development workflow incredibly fast.

Understanding Hugo Structure

You don’t need to memorize this. But understanding the mental model makes working with AI much faster.

Content Organization = URL Structure

Your folder structure becomes your URL structure:

content/
├── _index.md           # Homepage (yoursite.com/)
├── about/
│   └── index.md        # yoursite.com/about/
├── blog/
│   ├── _index.md       # yoursite.com/blog/ (list of posts)
│   ├── post-1/
│   │   └── index.md    # yoursite.com/blog/post-1/
│   └── post-2/
│       └── index.md    # yoursite.com/blog/post-2/
└── services/
    ├── _index.md       # yoursite.com/services/
    ├── seo/
    │   └── index.md    # yoursite.com/services/seo/
    └── ppc/
        └── index.md    # yoursite.com/services/ppc/

Two things to remember:

• _index.md (with underscore) = listing pages that show child pages
• index.md (no underscore) = actual content pages

This structure is exactly what you need for proper SEO silo architecture.

Page Bundles Keep Things Organized

Put each piece of content in its own folder with its images:

content/blog/my-post/
├── index.md          # The post content
├── hero.jpg          # Images for this post
├── diagram.png
└── data.json         # Any data files

Why this matters for your workflow: When you reference images with ![Alt](hero.jpg), Hugo knows to look in the same folder. No more hunting through /static/images/blog/2026/01/ for the right file.

Frontmatter Controls Everything

Every content file starts with metadata:

---
title: "Complete Guide to PPC"
og_title: Hugo CMS Guide
description: "Learn pay-per-click advertising from scratch"
date: 2026-01-24
draft: false
tags: ["ppc", "advertising", "guide"]
categories: ["Marketing"]
author: "Your Name"
weight: 1
aliases:
  - /old-url/
  - /another-old-url/
---

The fields that matter most:

• title - Your page title and SEO title tag
• description - Meta description for search results
• draft - Set true to hide from production (work in progress)
• aliases - Old URLs that redirect here (important for SEO when restructuring)

Templates: You Don’t Need to Understand Them

Hugo uses Go templates that look like this:

{{ .Title }}
{{ .Content }}
{{ range .Pages }}
  <h2>{{ .Title }}</h2>
{{ end }}

You don’t need to learn this syntax. When you tell Claude Code “add a sidebar with recent posts,” it knows exactly how to write the template code. Just describe what you want in plain English.

Shortcodes: Build Once, Reuse Forever

Shortcodes are reusable components you drop into any page with simple syntax. They’re how you maintain consistency across your site without copying HTML everywhere.

Built-in Shortcodes

Hugo includes these out of the box:

{{< youtube dQw4w9WgXcQ >}}
{{< figure src="/images/hero.jpg" title="Caption here" >}}

The Shortcodes You Actually Need

For a business site, you’ll want shortcodes for CTAs, testimonials, pricing comparisons, and notices. Here’s how to create them:

CTA Box (you’ll use this constantly)

Create layouts/shortcodes/cta.html:

<div class="cta-box bg-blue-600 text-white p-8 rounded-lg my-8">
  <h3 class="text-2xl font-bold mb-4">{{ .Get "title" }}</h3>
  <p class="mb-4">{{ .Inner }}</p>
  {{ if .Get "button" }}
    <a href="{{ .Get "link" }}" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold">
      {{ .Get "button" }}
    </a>
  {{ end }}
</div>

Use it anywhere:

{{< cta title="Ready to Start?" button="Get Started" link="/signup" >}}
Join thousands of marketers already using AI to build sites faster.
{{< /cta >}}

Notice Box for Tips and Warnings

Create layouts/shortcodes/tip.html:

<div class="tip-box border-l-4 border-green-500 bg-green-50 p-4 my-4">
  <p class="font-semibold text-green-800">Pro Tip</p>
  <p class="text-green-700">{{ .Inner }}</p>
</div>

Use it:

{{< tip >}}
Always use the extended version of Hugo for SCSS support.
{{< /tip >}}

The Faster Approach: Have AI Create Them

Instead of writing shortcode HTML yourself, tell Claude Code:

Create a Hugo shortcode for a testimonial box that accepts:
- quote (text)
- author (name)
- company (optional)
- image (optional)

Style it with Tailwind CSS. Make it look professional.

Claude generates the file, you save it, and it’s ready to use across your entire site.

AI-powered Hugo Development

This is where the real leverage is. Instead of learning Hugo’s templating syntax, you describe what you want and Claude Code builds it.

Why This Works So Well

Hugo has extensive documentation that AI models have trained on. The templating syntax is predictable. Static files mean no runtime errors to debug. And Hugo’s instant rebuilds let you test changes immediately.

The result: you describe what you want, Claude writes the code, you see results in seconds.

Setting Up Claude Code

Claude Code is a CLI tool that lets Claude work directly in your codebase.

Install it:

npm install -g @anthropic-ai/claude-code

Use it:

cd my-hugo-site
claude

Then describe what you want in plain English:

Create a landing page template for my Hugo site. Include:
- Hero section with headline, subheadline, and CTA button
- Features section with 3 columns of icons and text
- Testimonials slider
- Pricing table with 3 tiers
- Footer with links and newsletter signup

Use Tailwind CSS for styling. Make it mobile-responsive.

Claude Code reads your existing Hugo structure, creates the template files, adds CSS/JS, and updates config as needed.

The Workflow That Works

1. Start with a theme or blank site
2. Describe what you want in plain English
3. Let Claude Code generate the files
4. Preview with hugo server
5. Iterate: “Make the hero taller” or “Change the button to green”

Copy-Paste Prompts for Common Tasks

Create a page template:

Create a Hugo template for a [services/pricing/about] page.
Include these sections: [list sections]
Use Tailwind CSS for styling.
Make it mobile-responsive.

Create a shortcode:

Create a Hugo shortcode for a [testimonial/CTA/warning box].
Parameters: [list what it should accept]
Style it with Tailwind CSS.
Show me how to use it.

Fix something that’s broken:

My Hugo site has this issue: [describe problem]

Here's my template code:
[paste code]

Here's the error message:
[paste error]

What's wrong and how do I fix it?

Customize a theme:

I'm using the [theme name] Hugo theme. I want to:
1. [specific change]
2. [specific change]

Show me what to change and where.

Real Example: Building a Landing Page

Here’s exactly how I’d build a landing page for a new business.

Step 1: Initial prompt to Claude Code

Create a high-converting landing page template for my Hugo site.

Page structure:
1. Navigation bar with logo and "Get Started" CTA
2. Hero section: headline, subheadline, email capture form
3. Problem section: 3 pain points with icons
4. Solution section: how we solve each pain point
5. Features: 6 features in a 2x3 grid
6. Social proof: customer logos + testimonial
7. CTA section: final call-to-action
8. Footer: links, copyright

Design: Dark theme with blue accents (#3b82f6), modern typography, mobile-first.

Create all necessary files.

Step 2: Review and iterate

Claude Code creates the files. Run hugo server to preview.

Then refine with follow-up requests:

• “Make the hero section full-height on desktop”
• “Add more whitespace between sections”
• “The mobile menu isn’t working, fix it”
• “Add a carousel for 3 testimonials”

Step 3: Add your content

Create content/landing/my-product.md:

---
title: "My Product - Landing Page"
og_title: Hugo CMS Guide
layout: "landing"
hero:
  headline: "Stop Wasting Money on Ads That Don't Convert"
  subheadline: "Our platform shows you exactly which campaigns are profitable"
  cta_text: "Start Free Trial"
pain_points:
  - icon: "chart-down"
    title: "Wasted Ad Spend"
    description: "You're spending thousands but can't track what's working"
---

You now have a custom landing page. The whole process takes an afternoon, not weeks.

Deploying Your Hugo Site

You need your site live on the internet. Here’s how to do it for free.

Option 1: Cloudflare Pages (Recommended)

This is what I use. Fastest CDN, unlimited bandwidth, completely free.

Setup (do this once):

1. Push your Hugo site to GitHub
2. Go to Cloudflare Pages and connect your repo
3. Set build command: hugo
4. Set output directory: public
5. Add environment variable: HUGO_VERSION = 0.140.0

Every time you push to GitHub, Cloudflare automatically rebuilds and deploys. Your site is live in under a minute.

Cost: Free for most business sites.

Option 2: Netlify

Good alternative with built-in form handling.

Setup:

1. Push your Hugo site to GitHub
2. Connect Netlify to your repo
3. Set build command: hugo
4. Set publish directory: public
5. Deploy

Cost: Free tier is generous. Paid starts at $19/month if you need team features.

When to choose Netlify: You need contact forms without setting up a separate service.

Option 3: GitHub Pages

Free but slower than Cloudflare/Netlify. Fine for portfolio sites, not ideal for business sites where speed affects conversions.

My Recommendation

Start with Cloudflare Pages. It’s free, it’s the fastest CDN available, and the setup is straightforward. Move to Netlify only if you need their specific features like built-in form handling.

Common Hugo Tasks with AI

Copy-paste these prompts for tasks you’ll do repeatedly.

Adding a New Page Type (Case Studies, Services, etc.)

I need a new page type in Hugo called "case-study" with these fields:
- client_name (string)
- industry (string)
- challenge (markdown)
- solution (markdown)
- results (array of metrics with label and value)
- testimonial (object with quote, author, title)
- featured_image (string)

Create:
1. An archetype template for easy content creation
2. A single.html layout for displaying case studies
3. A list.html layout for the case studies index
4. Example CSS

Show me how to use it.

Building a Contact Form

Add a contact form to my Hugo site that works with Netlify Forms.

Include fields:
- Name (required)
- Email (required)
- Company (optional)
- Message (required, textarea)

Add:
- Client-side validation
- Success/error messages
- Honeypot spam protection
- Styling that matches my site

Setting Up a Blog

Set up a full blog system in Hugo with:
- Blog post template with featured image, author, date, reading time
- Category pages that list all posts in each category
- Tag pages
- Related posts section at the bottom of each post
- Pagination (10 posts per page)
- RSS feed

Include all necessary templates and config changes.

Adding Schema Markup for SEO

For the full breakdown, see the Schema and JSON-LD guide.

Add JSON-LD structured data to my Hugo site:
1. Organization schema on the homepage
2. Article schema on blog posts
3. BreadcrumbList schema on all pages
4. FAQ schema (when FAQ frontmatter exists)

Create a partial that handles all schema types.
Output the JSON-LD in the <head> section.

Full SEO Setup

Optimize my Hugo site for SEO:

1. Create a <head> partial with:
   - Dynamic title tags
   - Meta descriptions from frontmatter
   - Open Graph tags for social sharing
   - Twitter Card tags
   - Canonical URLs
   - JSON-LD structured data

2. Create an XML sitemap
3. Add robots.txt
4. Create a breadcrumb partial

Show me how to control SEO settings via frontmatter.

Tips That Will Save You Frustration

Performance

Ask Claude to set up Hugo Pipes for asset processing. This handles CSS/JS minification automatically:

{{ $styles := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">

Use WebP images with fallbacks. Lazy load images below the fold.

Stay Organized

Use page bundles (each content piece in its own folder with its images). Create archetypes for content types you create often so new pages start with the right frontmatter.

Content Workflow

Write in Markdown. It’s faster than any visual editor. Use shortcodes for repeated components. Set draft: true for work-in-progress and schedule posts with future dates.

Version Control

Add your Hugo site to Git. Commit often. The public/ folder doesn’t need to be tracked. It’s regenerated on every build.

Troubleshooting Common Issues

When something breaks, check these first:

“Page not found” after creating content

1. Check draft: true in frontmatter. Use hugo server -D to see drafts
2. Make sure the file is in the right folder under content/
3. Check for typos in the filename (must be .md)
4. Restart the dev server

CSS not loading / site looks broken

1. Make sure you have the extended Hugo version: hugo version should show +extended
2. Check baseURL in hugo.toml. It should be / for local development
3. Look for SCSS compile errors in terminal output

Theme not applying

1. Verify theme is in themes/[theme-name]/
2. Check hugo.toml has theme = '[theme-name]'
3. Copy the theme’s exampleSite/ content to your project root
4. Check theme documentation for required config

Images not showing

1. Use page bundles. Put images in the same folder as index.md
2. Reference images relatively: ![Alt](image.jpg) not ![Alt](/images/image.jpg)
3. Check case sensitivity (Linux servers care about Image.jpg vs image.jpg)

Build errors with partials

Check you’re passing context correctly:

<!-- Correct -->
{{ partial "header.html" . }}

<!-- Wrong - missing the dot -->
{{ partial "header.html" }}

When in doubt

Paste the error message to Claude Code:

My Hugo site shows this error: [paste error]
Here's my template: [paste code]
Fix it.

Nine times out of ten, it’s a simple fix that AI catches immediately.

Start Building

Hugo + Claude Code removes the technical barrier between you and a production website. You don’t need to learn templating syntax or web development. You describe what you want, AI builds it, and you have a site that’s faster and more secure than WordPress.

Your next step:

1. Install Hugo (extended version)
2. Pick a theme close to what you want
3. Run claude in your project folder
4. Describe what you want to change
5. Deploy to Cloudflare Pages

This site runs on Hugo. Every landing page I build for clients runs on Hugo. The combination of speed, security, and AI-assisted development makes it the obvious choice for anyone building a business online.

If you’re starting from scratch and need the full picture of content site strategy, start with the Content Website Guide. If you already have a site idea and want to learn more about structuring content for SEO, see the Silo Structure Guide.

Related Guides

Building your site:

• Claude Code Guide, the AI tool that makes this possible
• Content Website Guide, full content site strategy
• Site Architecture with AI, plan your structure before building

SEO setup:

• Schema and JSON-LD Guide, structured data for Hugo
• Internal Linking with AI, build link equity between pages

Sources

• Hugo Official Documentation
• Hugo Quick Start Guide
• Hugo Templates Documentation
• Hugo Shortcodes Documentation
• Cloudflare Pages Hugo Guide
• Netlify Hugo Documentation
• Portent: Site Speed Impact on Revenue