How I Built My Personal Website with Hugo & LoveIt

Building a personal website can be simple, elegant, and completely under your control with
Hugo v0.143.1 and the LoveIt v0.3.0 theme.

In this post, I share my step-by-step journey of creating my website,
including installation, configuration, GitHub Pages deployment, and a custom subdomain setup.

Discover how the Hugo + LoveIt combo enables a fast, SEO-friendly static site for personal branding.

1️⃣ Choosing Hugo and LoveIt

When planning my personal website, I had three key requirements:

• Markdown-first workflow → Easy content creation
• Lightweight static hosting → Ideal for GitHub Pages deployment
• Modern, clean design → Focus on readability and mobile responsiveness

After evaluating several Hugo themes, I selected:

• Hugo Extended Binary → Fast, portable, no complex dependencies
• LoveIt theme → Responsive, SEO-friendly, and perfect for blogs & portfolios

---

2️⃣ Local Setup

Setting up Hugo locally is the first step to building your site.
Here’s how I prepared my environment on Linux 64-bit:

Install Hugo Extended

# Create tools folder
mkdir -p /opt/software/hugo
cd /opt/software/hugo

# Download Hugo Extended binary
wget https://github.com/gohugoio/hugo/releases/download/v0.143.1/hugo_extended_0.143.1_Linux-64bit.tar.gz

# Extract and clean
tar -xvzf hugo_extended_0.143.1_Linux-64bit.tar.gz
rm hugo_extended_0.143.1_Linux-64bit.tar.gz

# Verify installation
./hugo version

Expected output:

hugo v0.143.1-extended+linux/amd64 BuildDate=xxxx

(Optional) Add Hugo to your PATH

echo 'export PATH=/opt/software/hugo:$PATH' >> ~/.coderc
source ~/.coderc

---

Once Hugo is installed, create a new site and set up the LoveIt theme:

• Initialize project

  hugo new site OwnWebsite
  cd OwnWebsite
  git init

• Add LoveIt theme as submodule and ensure exact version is taken

  git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
  git add .gitmodules themes/LoveIt
  cd ./themes/LoveIt
  git fetch --all --tags
  git checkout v0.3.0
  git pull

  .gitignore Setup for Submodule

  Edit# Ignore all other themes except LoveIt submodule
  themes/*/
  !themes/LoveIt/

• Configure hugo.toml

  baseURL = "https://.github.io/"
  title = "My Personal Website"
  theme = ["LoveIt"]

---

3️⃣ Creating Your First Post & Handling Images

Hugo page bundles make it easy to keep Markdown and images together.
Here’s how I created my first blog post with a sample image:

To create the first post:

hugo new posts/first-post/index.md

Add images inside the post folder:

content/posts/first-post/
    index.md
    SampleImage.jpg

Reference images in Markdown:

![Legend Walks](SampleImage.jpg)

Example front matter for a blog post

---
title: "My First Blog Post"
subtitle: "Learning Hugo + LoveIt"
date: 2025-07-31T10:00:00+02:00
draft: false
tags: ["hugo", "loveit", "learning"]
categories: ["blog"]
author: "Your Name"

summary: "This is my first post on my personal site using Hugo LoveIt theme. Exploring markdown, code blocks, images, and shortcodes."
---

Welcome to my **first blog post** with the [LoveIt](https://hugoloveit.com) theme!

## 📌 Key Highlights

1. Markdown is **clean and fast**
2. LoveIt theme provides:
   - TOC support
   - Code highlighting
   - Image lightbox
3. Deployment via **GitHub Pages** is simple

---
![Legend Walks](SampleImage.jpg)

---

4️⃣ Deploying to GitHub Pages

Once your site is ready, deploy it to GitHub Pages for free hosting:

Created public Pages repo: <username>.github.io

Add public/ folder as submodule (gh-pages branch):

git submodule add -b gh-pages git@github.com:/.github.io.git public

Build & deploy your site

hugo --minify
cd public
git add .
git commit -m "Deploy site"
git push origin gh-pages

Enable GitHub Pages → In gh-pages branch Go to Repo Settings → Pages Select branch → ✅ Live!

---

5️⃣ Adding a Custom Subdomain

To make your site accessible via a personal subdomain like
ownwebsite.example.com instead of <username>.github.io:

Add a CNAME Record in DNS

• Host: ownwebsite
• Type: CNAME
• Points to: <username>.github.io

Verify DNS propagation

dig ownwebsite.example.com

Enable HTTPS on GitHub Pages

Go to Repo → Settings → Pages Check “Enforce HTTPS”

Within 30 minutes, the custom domain with HTTPS was active.

---

6️⃣ Key Lessons Learned

Here are the top takeaways from building my site with Hugo & LoveIt:

Use Hugo Extended Binary
→ Cleaner setup, supports SCSS & modern themes without system pollution.

Manage public/ and themes/ as Git submodules
→ Keeps deployment and theme updates under version control.

Organize posts as page bundles
→ Store Markdown and images together to avoid 404 errors.

Verify theme & Hugo version compatibility
→ Prevents build errors and broken layouts.

---

Happy Learning

“Technically authored by me, accelerated with insights from ChatGPT by OpenAI.” Refer: Leverage ChatGPT