I recently stumbled across a Reddit post that perfectly captures a frustration many developers face:
"I've been making complex web apps with React or Vue with all the magic abstracted for me... I was asked by an acquaintance to make them a website for their small business. I need to make a landing page with no dynamic content... What tools can I use that are a step-up from raw HTML, CSS, JS?"
Sound familiar?
This developer isn't alone. Somewhere between writing raw HTML files and spinning up a full React application lies a massive gap – and that's exactly where most small business websites live.
You know the type: local restaurants, consulting firms, plumbers, photographers, small agencies. They need a professional online presence, but they don't need a database, user authentication, or a shopping cart with real-time inventory.
Yet here's the surprising part: most developers and business owners don't know there's a better way. They either hand-code everything (tedious and error-prone) or reach for WordPress (overkill and expensive) or React (way overkill for static content).
There's a third option that's faster, cheaper, and honestly better for these use cases: Static Site Generators.
In this guide, I'll show you how to build a professional website using Hugo (a blazing-fast static site generator), GitHub (for version control), and Netlify (for free hosting). By the end, you'll have a site that:
Companies like Smashing Magazine, Let's Encrypt, and 1Password use Hugo for their websites. If it's good enough for them, it's definitely good enough for your small business site.
Let's dive in.
Here's a truth bomb: Most small business websites are massively overengineered.
Think about what a typical local business website actually does:
That's it. No user accounts. No real-time data. No complex interactions. Just information that changes maybe once a week, if that.
Yet I see developers building these sites with React, Next.js, or installing WordPress with 15 plugins. It's like using a chainsaw to slice bread – technically it works, but you're creating problems you didn't have before.
The average WordPress site weighs in at about 2.5MB and takes 3.5 seconds to load. That same content as a static site? Around 200KB and loads in under a second. We're talking about a site that's 12x smaller and 4x faster.
Total: $120-$520+ per year
Total: $0 per year
When you visit a WordPress site, here's what happens:
This happens every single time someone visits. It's like baking a fresh cake every time someone wants a slice!
A static site generator works differently:
It's like baking all your cakes once, then just serving slices. Way faster, way simpler.
Hugo has some serious advantages:
1. Speed That'll Make You Do a Double-Take
Hugo builds 1,000 pages in less than 1 second. Jekyll takes 50+ seconds to do the same. When you're developing and want to see changes instantly, this matters. A lot.
2. It's a Single Binary
With Jekyll, you need Ruby and a bunch of gems. With Gatsby, you need Node.js and npm packages. With Hugo? You download one file. That's it. No dependency hell, no version conflicts, no "works on my machine" problems.
3. Battle-Tested and Trusted
Hugo has over 84,000 stars on GitHub and is used by Smashing Magazine, Let's Encrypt, 1Password, and Linode. If these companies trust it for their high-traffic sites, you can trust it for your business.
4. Theme Ecosystem
There are over 400 free Hugo themes covering every use case imaginable. Gethugothemes alone offers 70+ professionally designed themes.
5. SEO-Friendly Out of the Box
Hugo generates clean, semantic HTML that search engines love. It automatically creates sitemaps, RSS feeds, and proper heading hierarchies.
Basically, if your website is primarily about showing information rather than processing transactions or user data, Hugo is ideal.
Our setup has three main components:
1. Hugo – Your Website Builder
Hugo takes your content (written in simple Markdown files) and your theme (the design) and combines them into a complete website made of HTML, CSS, and JavaScript files.
2. GitHub – Your Code Storage and Version Control
GitHub is where your website's source code lives. Here's why it's awesome:
3. Netlify – Your Free Hosting Platform
Netlify takes your website files and makes them available to the world:
Here's the beautiful workflow:
Performance
Your site is just HTML, CSS, and JavaScript files served from a CDN. There's no database to query, no server-side code to run. Most Hugo sites load in under a second and can handle 100,000 visitors in a day without breaking a sweat.
Security
You can't hack what isn't there. WordPress sites get hacked because they're running PHP code and connecting to databases. Your Hugo site? It's just files. There's no login page to attack, no database to inject SQL into. The attack surface is basically zero.
Scalability
Static files on a CDN can handle massive traffic spikes. Netlify's free tier includes 100GB of bandwidth per month. That's roughly 100,000 page views for a typical small business site. For free.
Cost
Free is pretty hard to beat. The only thing you'll pay for is your domain name, which costs about $12-15/year no matter what hosting you use.
Developer Experience
Making changes is fast and easy. Want to update your "About" page? Edit a text file or use a visual editor. Want to see how it looks? The preview is instant.
Here's what you need to get started:
That's literally it. You don't need coding knowledge. You don't need to install anything on your computer.
Head over to Sitepins and create a free account. Sitepins is a visual interface for Hugo that handles all the technical stuff behind the scenes.
Their free plan includes:
Once you're logged in, click "Create New Site." Sitepins will show you a gallery of themes. These are professionally designed Hugo themes that cover different types of websites. Let's explore some options here:
For Business/Agency Sites
For SaaS Marketing Sites
For Blogs
For Portfolios
For Documentation Sites
My recommendation: Start with Hugoplate if you're unsure. It's versatile and modern.
Sitepins will ask you to connect your GitHub account. If you don't have one, go to GitHub and create a free account—it takes 2 minutes.
Click "Connect GitHub" in Sitepins. A popup will appear asking for permissions. Sitepins is asking permission to:
Click "Authorize Sitepins." Behind the scenes, Sitepins is now creating a new GitHub repository with all your site's files.
Sitepins will automatically prompt you: "Deploy to Netlify?" Click "Yes, Deploy Now."
You'll need to create a Netlify account if you don't have one. Use the same email you used for GitHub to keep things simple.
Authorize Netlify to access your GitHub repository. Netlify will now:
When it's done, you'll see: "Your site is live!" Click the URL Netlify provides, and there it is – your website, live on the internet!
Go back to Sitepins and click "Edit Site." You'll see a visual editor with your site's content.
Updating Text
Changing Images
Adjusting Colors and Fonts
Managing Content
Right now, your site is at something like "your-site.netlify.app". To use your own domain like yourbusiness.com, see the "Connecting Your Custom Domain" section below.
If you're comfortable with the command line, this section is for you. This approach gives you more control and helps you understand exactly what's happening under the hood.
What you need:
On Windows
Download Hugo from GitHub releases. Look for the file named hugo_extended_X.XX.X_windows-amd64.zip (get the "extended" version).
Extract the zip file
Move hugo.exe to C:\Hugo\bin
Add C:\Hugo\bin to your Windows PATH:
Or if you have Chocolatey:
choco install hugo-extended
On Mac
If you have Homebrew:
brew install hugo
Don't have Homebrew? Install it first:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
On Linux
For Ubuntu/Debian:
sudo apt-get install hugo
For Arch:
sudo pacman -S hugo
Verify the installation
Open your terminal and run:
hugo version
You should see something like:
hugo v0.120.4-f11bca5fec2ebb3a02727fb2a5cfb08da96fd9df+extended darwin/arm64 BuildDate=2023-11-08T11:18:07Z
On Windows
Download Git from git-scm.com and run the installer. The default options are fine.
On Mac
Git should already be installed. To verify:
git --version
If it's not installed, Mac will prompt you to install command line tools. Say yes.
On Linux
sudo apt-get install git # Ubuntu/Debian
sudo pacman -S git # Arch
Verify
git --version
You should see: git version 2.x.x
Download and install VS Code – it's free, fast, and has great Hugo support.
Once installed, add these recommended extensions:
Open VS Code
Click the Extensions icon (Ctrl+Shift+X / Cmd+Shift+X)
Search for and install:
Open your terminal.
Navigate to where you want your site folder:
cd ~/Documents
hugo new site my-business-site
cd my-business-site
Hugo creates a new folder with this structure:
my-business-site/
├── archetypes/ # Templates for new content
├── assets/ # Files that need processing
├── content/ # Your actual content (markdown files)
├── data/ # Data files (JSON, YAML)
├── layouts/ # HTML templates
├── static/ # Static files (images, fonts)
├── themes/ # Where themes live
└── hugo.toml # Main configuration file
Initialize Git in your project first:
git init
Install the Hugoplate theme as a Git submodule:
git submodule add https://github.com/zeon-studio/hugoplate.git themes/hugoplate
Copy the example configuration from the theme:
cp themes/hugoplate/exampleSite/hugo.toml hugo.toml
Open hugo.toml in VS Code:
code hugo.toml
You'll see something like this:
baseURL = "https://example.com/"
languageCode = "en-us"
title = "My Business Site"
theme = "hugoplate"
[params]
description = "A description of your site"
author = "Your Name"
[[menu.main]]
name = "Home"
url = "/"
weight = 1
[[menu.main]]
name = "About"
url = "/about/"
weight = 2
Let's customize the important bits:
baseURL = "https://yourbusinesssite.com/"
languageCode = "en-us"
title = "Your Business Name"
theme = "hugoplate"
[params]
description = "We provide excellent services for your needs"
author = "Your Name"
twitter = "yourusername"
github = "yourusername"
email = "hello@yourbusiness.com"
Save the file.
Let's create an "About" page:
hugo new about.md
Open the file:
code content/about.md
You'll see:
---
title: "About"
date: 2025-11-18T10:30:00+06:00
draft: true
---
Let's add some content:
---
title: "About Our Business"
date: 2025-11-18T10:30:00+06:00
draft: false
---
## Who We Are
We're a family-owned business serving the community since 2010. Our mission is to provide high-quality services with a personal touch.
## What We Do
We specialize in:
- Service one
- Service two
- Service three
## Why Choose Us
Our commitment to excellence and customer satisfaction sets us apart. We treat every project as if it were our own.
Notice I changed draft: false? That's important – Hugo won't show draft pages on the live site.
Markdown basics
# Heading 1 (biggest)
## Heading 2
### Heading 3
**bold text**
*italic text*
[link text](https://url.com)
- for bullet lists
1. for numbered lists
Run:
hugo server -D
The -D flag means "show draft content" during development.
Open your browser and go to http://localhost:1313/
There's your website! The cool part? Hugo is watching for changes. Edit content/about.md, save, and watch your browser update automatically.
Most Hugo themes are designed to be customized without editing the theme files directly.
Changing Colors and Fonts
Check your theme's documentation. For Hugoplate, look in assets/data/theme.json.
Overriding Theme Files
Hugo looks in your project first, then falls back to the theme.
Want to customize the homepage? Copy themes/hugoplate/layouts/index.html to layouts/index.html and edit your copy.
Adding Custom CSS
Create assets/css/custom.css and add your styles.
Adding Images
Put images in static/images/. They'll be available at /images/yourphoto.jpg.
In markdown:
Pro tip: Optimize your images before adding them. Use TinyPNG.com. Aim for images under 500KB each.
Update your baseURL in hugo.toml to your actual domain:
baseURL = "https://yourbusinesssite.com/"
Build your site:
hugo --gc --minify
This command:
hugo – Runs the build--gc – Garbage collection (cleans up unused cache)--minify – Makes your HTML, CSS, and JS smaller (faster loading)Hugo creates a public/ folder with your complete website.
Create a new repository on GitHub called my-business-site.
In your terminal:
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/my-business-site.git
git push -u origin main
Important note: The public/ folder shouldn't be committed to Git. Create a .gitignore file in your project root.
echo "public/" > .gitignore
git add .gitignore
git commit -m "Add gitignore"
git push
Why? Netlify generates the public/ folder during build—no need to store it in Git.
Netlify Build Settings
hugo --gc --minifypublicHUGO_VERSION = 0.120.4Netlify will:
Result: A live URL like random-name-123.netlify.app
Now when you make changes:
git add . && git commit -m "Update" && git pushRecommended registrars:
Avoid GoDaddy (upsells & expensive).
Netlify will provide DNS records:
Option 1: Manually add DNS records
Add A + CNAME in your registrar's DNS settings.
Option 2: Use Netlify DNS (Recommended)
Replace nameservers with Netlify's.
DNS may take 1–48 hours to propagate. Netlify auto-creates SSL certificates.
Best Practices
Popular options:
Organizing Content Structure
Create folders in your content/ directory to organize pages by type:
content/
├── blog/
│ ├── post-1.md
│ └── post-2.md
├── services/
│ ├── service-1.md
│ └── service-2.md
└── pages/
├── about.md
└── contact.md
Using Shortcodes
Hugo has built-in shortcodes for YouTube, tweets, figures, and more.
Creating Blog Posts
hugo new blog/my-first-post.md
Updating Hugo
brew upgrade hugo # Mac
choco upgrade hugo # Windows
Updating Themes
If using Git submodules:
git submodule update --remote themes/hugoplate
Backup Options
GitHub already stores your history. Extra backups are optional but recommended.
Tools to consider:
Forms
Comments
Simple E-commerce
API Integrations
Add dynamic content with JavaScript fetching APIs.
| Option | Cost |
|---|---|
| WordPress | $1,140 – $3,240 |
| Hugo + GitHub + Netlify Free | $195 – $345 |
| Hugo + Premium hosting | $964 – $1,164 |
Documentation
Communities
Themes
Learning
Tools