Cara Setup Hugo Static Site Generator

Hendra Wijaya

· Januari 7, 2026 · 3 menit baca

Hugo adalah static site generator tercepat yang ditulis dalam Go. Mari pelajari cara setup dan penggunaannya.

Installing Hugo

Ubuntu/Debian

# Using apt sudo apt install hugo

wget https://github.com/gohugoio/hugo/releases/download/v0.121.0/hugo_extended_0.121.0_linux-amd64.deb sudo dpkg -i hugo_extended_0.121.0_linux-amd64.deb

macOS

brew install hugo

Verify Installation

hugo version

Creating New Site

Initialize Project

# Create new site hugo new site mysite Navigate to directory

cd mysite

Project Structure

mysite/
├── archetypes/
├── assets/
├── content/
├── data/
├── layouts/
├── static/
├── themes/
└── hugo.toml

Adding Theme

Install Theme

# Initialize git git init Add theme as submodule

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Configure Theme

# hugo.toml
baseURL = 'https://example.org/'
languageCode = 'id'
title = 'My Website'
theme = 'ananke'

Creating Content

New Post

hugo new posts/my-first-post.md

Post Structure

---
title: "My First Post"
date: 2026-01-07T00:00:00+07:00
draft: false
tags: ["tag1", "tag2"]
categories: ["category1"]
---
Content goes here...

Content Organization

content/
├── _index.md
├── about.md
├── posts/
│   ├── _index.md
│   ├── first-post.md
│   └── second-post.md
└── projects/
    └── project-1.md

Running Development Server

Start Server

# Start dev server hugo server -D With live reload on localhost:1313

Options

# Different port hugo server -p 3000 Include drafts hugo server -D Bind to all interfaces

hugo server --bind 0.0.0.0

Hugo Templates

Base Template

<!-- layouts/_default/baseof.html -->
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
  <head>
    <meta charset="UTF-8" />
    <title>{{ .Title }} | {{ .Site.Title }}</title>
  </head>
  <body>
    {{ block "main" . }}{{ end }}
  </body>
</html>

Single Template

<!-- layouts/_default/single.html -->
{{ define "main" }}
<article>
  <h1>{{ .Title }}</h1>
  <time>{{ .Date.Format "2 January 2006" }}</time>
  {{ .Content }}
</article>
{{ end }}

List Template

<!-- layouts/_default/list.html -->
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ range .Pages }}
<article>
  <a href="{{ .Permalink }}">{{ .Title }}</a>
</article>
{{ end }} {{ end }}

Configuration

hugo.toml

baseURL = 'https://example.org/'
languageCode = 'id'
title = 'My Website'
theme = 'ananke'
[params]
description = "My personal website"
author = "John Doe"
[menu]
[[menu.main]]
name = "Home"
url = "/"
weight = 1
[[menu.main]]
name = "Posts"
url = "/posts/"
weight = 2

Building for Production

Build Command

# Build static files
hugo
Output in public/ directory

Deployment Options

# Build with minification hugo --minify Build to custom directory

hugo -d dist/

Shortcodes

Built-in Shortcodes

<!-- YouTube embed -->
{{ </
 youtube VIDEO_ID />}}
<!-- Twitter embed -->
{{ </
 tweet USER STATUS_ID />}}
<!-- Figure with caption -->
{{ </
 figure src="/images/photo.jpg" title="Caption" />}}

Custom Shortcode

<!-- layouts/shortcodes/alert.html -->
<div class="alert alert-{{ .Get 0 }}">{{ .Inner }}</div>

{{ </* alert warning */>}}
This is a warning message.
{{ </* /alert */>}}

Kesimpulan

Hugo menyediakan kecepatan build yang luar biasa dengan flexibility dalam templating. Perfect untuk blog, documentation, dan portfolio sites.

Ditulis oleh