What is Hugo?

Hugo: Fast static site generator written in Go

  • Converts markdown → HTML
  • No database needed
  • Extremely fast builds (milliseconds)
  • Single binary (easy installation)

Key Concepts

Static Site Generator

  • Builds HTML files at build time (not runtime)
  • No server-side processing
  • Just serve files (S3, CloudFront, etc.)

Content

  • Written in markdown (.md files)
  • Stored in content/ directory
  • Organized by sections (folders)

Theme

  • Controls site appearance
  • Layouts, CSS, JavaScript
  • Can customize or use existing

Front Matter

  • Metadata at top of markdown file
  • Between --- markers
  • YAML, TOML, or JSON format

Project Structure

my-site/
├── hugo.yaml          # Site configuration
├── content/           # Your markdown files
│   └── posts/
│       └── my-post.md
├── themes/            # Theme files
│   └── PaperMod/
├── static/            # Static files (images, etc.)
├── layouts/           # Custom layouts (optional)
└── public/            # Generated site (after build)

Create New Post

# Create new post
hugo new posts/my-study-note.md

# Opens: content/posts/my-study-note.md

Generated file:

---
title: "My Study Note"
date: 2025-11-27T21:30:00+09:00
draft: true
---

Your content here...

Front Matter Fields

---
title: "Post Title"           # Required
date: 2025-11-27T21:30:00+09:00  # Required
draft: false                  # true = hidden, false = published
tags: ["aws", "s3"]          # Post tags
categories: ["AWS"]          # Post categories
description: "Short summary" # Meta description
---

Common Commands

# Start development server
hugo server -D

# -D flag: Show draft posts
# Access: http://localhost:1313

# Build site (production)
hugo

# Output: public/ directory

# Build with drafts
hugo -D

# Clean public directory
rm -rf public/

Development Workflow

# 1. Start server
hugo server -D

# 2. Create new post
hugo new posts/aws-notes.md

# 3. Edit content/posts/aws-notes.md
# Browser auto-refreshes on save

# 4. When ready, set draft: false

# 5. Build for production
hugo

# 6. Deploy public/ directory

Configuration (hugo.yaml)

baseURL: https://your-domain.com/
title: My Study Notes
theme: PaperMod

params:
  description: "My learning journey"
  author: Your Name
  ShowReadingTime: true
  ShowCodeCopyButtons: true
  ShowToc: true  # Table of contents

menu:
  main:
    - name: Posts
      url: /posts/
      weight: 1
    - name: Tags
      url: /tags/
      weight: 2

Markdown Syntax

# Heading 1
## Heading 2
### Heading 3

**Bold text**
*Italic text*

- Bullet point
- Another point

1. Numbered list
2. Second item

[Link text](https://example.com)

![Image alt text](/images/photo.jpg)

`inline code`

```bash
# Code block
echo "Hello"


## Organizing Content

**By topic:**

content/ ├── posts/ │ ├── aws/ │ │ ├── s3-basics.md │ │ └── cloudfront-basics.md │ └── git/ │ └── ssh-setup.md


**By date:**

content/ ├── posts/ │ ├── 2025-11-27-aws-s3.md │ ├── 2025-11-28-git-ssh.md


## Deployment

**Build site:**
```bash
hugo

Upload to S3:

aws s3 sync ./public s3://my-bucket --delete

Invalidate CloudFront:

aws cloudfront create-invalidation \
  --distribution-id E1234ABCDEFGHI \
  --paths "/*"

Hugo vs Next.js

FeatureHugoNext.js
LanguageGoJavaScript/React
Build speedExtremely fastSlower
Learning curveEasy (just markdown)Steeper (React)
Dynamic featuresNoneSSR, API routes
Best forBlogs, docsWeb apps

Notes

  • Hugo is perfect for study notes (simple, fast)
  • PaperMod theme is clean and minimal
  • Use tags/categories to organize posts
  • Draft posts won’t appear in production build
  • Hugo watches files and auto-rebuilds in dev mode