use
projects
How I Built This Website

How I Built This Website

📋 TLDR: Hugo + Hextra Website Setup

  • 🏗️ Tech Stack: Hugo static site generator + Hextra documentation theme
  • ⚡ Quick Setup: Install Hugo → Create site → Add Hextra theme → Configure → Deploy
  • 📁 Content Structure: Organized by categories (Read, Use, Listen, Enjoy, See, About)
  • 🚀 Deployment: Netlify, Vercel, or Cloudflare Pages
  • 🔍 Features: Search, responsive design, dark mode, fast performance

Key Resources:

🚀 Introduction

This website is built using Hugo, a fast and flexible static site generator written in Go, combined with the Hextra theme, a modern and feature-rich theme designed for documentation sites. In this article, I’ll walk through the process of setting up a similar site and organizing content.

📚 Hugo and Hextra Documentation

🔗 Hugo Documentation

Hugo’s official documentation is comprehensive and well-structured. Key areas to focus on include:

  • 🚀 Quick Start Guide: Gets you up and running in minutes
  • 📝 Content Management: Understanding how Hugo handles markdown files
  • ⚙️ Configuration: The hugo.toml file structure and options
  • 🎨 Themes: How to install and customize themes
  • 🚀 Deployment: Various options for hosting your site

🔗 Hextra Theme Documentation

The Hextra documentation is essential for understanding the theme’s capabilities:

  • 🏁 Getting Started: Installation and basic setup
  • ⚙️ Configuration: Theme-specific parameters and customization
  • 📄 Content Types: Different page types and layouts
  • 🧩 Shortcodes: Pre-built components for rich content
  • 🎨 Styling: CSS customization and dark mode support

🛠️ Setting Up the Website

📋 Prerequisites

Before starting, ensure you have:

  • 🐹 Go installed on your system
  • 📦 Git for version control
  • ✏️ A text editor (VS Code recommended)

⚙️ Installation Steps

  1. 📥 Install Hugo (if not already installed):

    # Using package manager (recommended)
brew install hugo  # macOS
# or
sudo apt install hugo  # Ubuntu/Debian

  2. 🏗️ Create a new Hugo site:

    hugo new site my-website
cd my-website

  3. 🎨 Add the Hextra theme:

    git init
git submodule add https://github.com/imfing/hextra.git themes/hextra

  4. ⚙️ Configure the site by editing hugo.toml:

    baseURL = "https://yourdomain.com/"
languageCode = "en-us"
title = "Your Site Title"
theme = "hextra"

[params]
  enableSearch = true
  enableSidebar = true

  5. 📄 Create your first pages:

    hugo new _index.md  # Homepage
hugo new about/_index.md  # About section

  6. 🚀 Start the development server:

    hugo server

    Visit http://localhost:1313 to see your site.

📁 Content Organization by Category

The key to a maintainable knowledge site is thoughtful content organization. Here’s how I structured this site:

🏷️ Main Categories

The site uses six main content categories, each with its own folder:

  • 📖 Read (/content/read/): Books, articles, and written content
  • 🛠️ Use (/content/use/): Tools, projects, and tutorials
  • 🎧 Listen (/content/listen/): Music and podcasts
  • 🎉 Enjoy (/content/enjoy/): Cooking, games, and travel
  • 👁️ See (/content/see/): Art, movies, and videos
  • ℹ️ About (/content/about/): Personal information and site details

🗂️ Content Structure

Each category follows a consistent structure:

content/
├── _index.md              # Category listing page
├── subcategory1/
│   ├── _index.md         # Subcategory listing
│   └── item1.md          # Individual content item
└── subcategory2/
    ├── _index.md
    └── item2.md

📋 Front Matter

Every content file includes essential metadata:

---
title: "Content Title"
description: "Brief description"
date: 2025-10-09
draft: false
breadcrumbs: true
---

🧭 Navigation Menu

The main navigation is configured in hugo.toml:

[menu]
  [[menu.main]]
  name = "Read"
  url = "/read/"
  weight = 3

  [[menu.main]]
  name = "Use"
  url = "/use/"
  weight = 4
  # ... other menu items

⚡ Advanced Features

🔍 Search Functionality

Hugo’s built-in search is enhanced by Hextra’s search interface. Enable it in your configuration:

[params]
  enableSearch = true

📊 Analytics Integration

Add web analytics using the built-in Analytics integration

📱 Responsive Design

Hextra is mobile-first and responsive out of the box. The theme includes:

  • 🌙 Dark/light mode toggle
  • 📱 Mobile-friendly navigation
  • 📝 Optimized typography
  • ⚡ Fast loading performance

🚀 Deployment

For production deployment, I recommend:

  1. 🏗️ Build the site:

    hugo --minify

  2. 🌐 Deploy to your hosting platform:

    • ☁️ Netlify: Drag and drop the public/ folder
    • ▲ Vercel: Connect your Git repository
    • ☁️ Cloudflare Pages: Push to Git and configure deployment

💡 Tips for Success

  1. 🎯 Start simple: Begin with basic pages and add complexity gradually
  2. 📋 Use archetypes: Create templates for consistent front matter
  3. 🧩 Leverage shortcodes: Use Hextra’s built-in components for rich content
  4. 💾 Regular backups: Keep your content safe with version control
  5. 📈 Performance monitoring: Use tools like Lighthouse to optimize loading times

This setup provides a solid foundation for a knowledge management site that’s both powerful and maintainable. The combination of Hugo’s speed and Hextra’s features creates an excellent platform for sharing and organizing information.