Hi, this is Ravi Kumar, and I come from a non-IT background.
Recently, I started using Hugo to create a website for my personal use, and I want to share my knowledge with you all.
Introduction
If you’re not from an IT background but have received the Hugo tool to learn and implement, don’t worry! This guide is made just for you. I’ll take you step by step through the easiest way to install, set up, and use Hugo without any coding knowledge.
Hugo is a static site generator, which means it helps you build websites from simple text files, without needing a database or complex software.
By the end of this guide, you’ll be able to: ✅ Install Hugo manually.
✅ Set up a Hugo website with a ready-made theme.
✅ Add content without coding.
✅ View your website on your computer.
✅ (Optional) Publish it online for free!
Let’s get started! 🚀
Step 1: Download and Install Hugo
🔹 Windows Users
- Go to the Hugo releases page:
👉 https://github.com/gohugoio/hugo/releases - Scroll down and download the file named
hugo_extended_XXX_Windows-64bit.zip(ReplaceXXXwith the latest version number). - Extract the ZIP file.
- Move the extracted
hugo.exefile to a folder likeC:\Hugo\. - Set Up Hugo in System (One-time step):
- Press Win + R, type
sysdm.cpl, and press Enter. - Go to Advanced → Click Environment Variables.
- Find Path, click Edit, then New → Add
C:\Hugo\. - Click OK, close, and restart your computer.
- Press Win + R, type
- Verify Installation:
- Open Command Prompt (CMD) and type:
hugo version - If you see a version number, Hugo is installed!
- Open Command Prompt (CMD) and type:
🔹 Mac Users
- Download Hugo from Hugo Releases (
hugo_extended_XXX_macOS-64bit.tar.gz). - Open Terminal and navigate to the Downloads folder:
cd ~/Downloads - Extract the file:
tar -xvzf hugo_extended_XXX_macOS-64bit.tar.gz - Move Hugo to the system path:
sudo mv hugo /usr/local/bin/ - Verify Installation:
hugo versionIf you see a version number, Hugo is installed!
Step 2: Create a New Hugo Website
- Open Command Prompt (Windows) or Terminal (Mac/Linux).
- Navigate to a folder where you want to create your website:
cd Documents - Run the following command to create a new Hugo site:
hugo new site my-website - Open the
my-websitefolder in File Explorer (Windows) or Finder (Mac).
Now you have a Hugo website folder with this structure:
my-website/
├── archetypes/
├── content/
├── layouts/
├── static/
├── themes/
├── config.toml
Step 3: Install a Theme (No Coding Required)
- Go to Hugo Themes
- Choose a theme (I recommend “Ananke” for beginners).
- Click Download and extract the theme.
- Move the theme folder into
my-website/themes/. - Open
config.toml(a simple text file) in Notepad and add this line:theme = "ananke" - Save and close the file.
Step 4: Create Your First Post
- Open the
content/folder insidemy-website. - Inside
content/, create a folder posts/ (if it doesn’t exist). - Inside posts/, create a new file first-post.md.
- Open the file in Notepad and add:
--- title: "My First Post" date: 2025-02-01 draft: false --- Welcome to my first Hugo website! 🚀 - Save and close the file.
Step 5: View Your Website Locally
- Open Command Prompt (Windows) or Terminal (Mac).
- Navigate to your Hugo site folder:
cd my-website - Start the Hugo server:
hugo server - Open http://localhost:1313/ in your web browser. 🎉
Step 6: Publish Your Website (Optional)
Once you’re happy with your site, you can publish it online for free using Netlify.
1. Sign Up for Netlify
🔗 https://www.netlify.com/ (Free account)
2. Upload Your Site
- Open your Hugo folder (
my-website). - Open Command Prompt and run:
hugo --minify - This creates a public/ folder.
- Drag and drop the
public/folder into Netlify, and your site is live!
Final Thoughts: You Can Do This! 🎉
✅ You installed Hugo manually (without coding!). ✅ You created a website with a ready-made theme. ✅ You added a post easily using a simple text file. ✅ You viewed your website on your computer. ✅ (Optional) You published your website online!
💡 Need More Help? Watch this free video tutorial:
👉 Getting Started With Hugo | FREE COURSE
