Salin dan Bagikan

Cara Setup Hugo Static Site Generator

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

# Or download from GitHub releases
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.