How-To Create A Hugo Web App

This guide will walk you through setting up a Hugo static site. Follow these steps to get your local development environment ready so you can build your Hugo-based website.

Prerequisites

Before you begin this tutorial you must install:

• Go (Hugo is written in Go)
• Hugo (The extended version is recommended)
• Git

Create a Site

Verify that you have installed Hugo v0.128.0 or later.

hugo version

Create the directory structure for your project in the my-website directory.

hugo new site my-website

Creates this directory structure:

my-site/
├── archetypes/
│   └── default.md
├── assets/
├── content/
├── data/
├── i18n/
├── layouts/
├── static/
├── themes/
└── hugo.toml         <-- site configuration

When you build your site, Hugo creates a public directory:

my-site/
├── archetypes/
│   └── default.md
├── assets/
├── content/
├── data/
├── i18n/
├── layouts/
├── public/ <-- created when you build your site
├── static/
├── themes/
└── hugo.toml       

Change the current directory to the root of your project:

cd my-website

Initialise an empty Git repository in the current directory.

git init

Clone the Hugo Profile theme into the themes directory, adding it to your project as a Git submodule. Other themes can be found here

git submodule add https://github.com/gurusabarish/hugo-profile.git themes/hugo-profile

Append a line to the site configuration file, indicating the current theme:

git init

Create hugo.yaml (you can use hugo.toml too) inside root folder.

Setup the configurations in hugo.yaml. reference

Start Hugo’s development server to view the site locally.

hugo server

Configure the site

With your editor, open the site configuration file (hugo.toml or hugo.yaml) in the root of your project.

baseURL: "https://example.org/"
languageCode: "en-uk"
title: "Example Website"
theme: hugo-profile

Make the following changes:

1. Set the baseURL for your production site. This value must begin with the protocol and end with a slash, as shown above.
2. Set the languageCode to your language and region.
3. Set the title for your production site.

This hugo.yaml configures your site identity (above), theme behavior, profile details, social links, and navigation menu. The hugo-profile theme then reads these values and generates the portfolio website layout automatically, which will be build in the public folder.

Add content

Hugo can handle blog posts where it by default, Hugo looks inside the content/ folder. Blog posts usually live in content/blogs/, where each post is just a Markdown file (.md)

I used Obsidian to first write blog posts for the Hugo website. Obsidian saves notes as Markdown (.md), which Hugo can read directly.

Once installed, open Obsidian and create a new note. Add the front matter block (between ---) at the top.

---
title: "My First Blog Post"
date: 2025-09-07
description: "This is a test post written in Obsidian."
draft: false
tags: ["hugo", "obsidian", "blogging"]
---

Write your blog content as usual.

##Example

This is my first post! Written in **Obsidian**, published with **Hugo** 🚀

Save the file into your Hugo project under content/. I use the a command which will upload all my blogs to this file in the Hugo site.

rsync -av --delete "/Users/user/Documents/Obsidian Vault/blogs" "/Users/user/Desktop/projects/my-website/content"