Slide 1 / 20

⚡

Hugo

Static Site Generator

1 Week - Complete Guide

Static site generator tercepat di dunia - buat website dalam hitungan detik

Overview

Tujuan Pembelajaran

Memahami apa itu Hugo dan static site
Mampu install dan setup Hugo
Membuat content dengan Markdown
Mengerti Hugo themes
Mengerti shortcodes dan partials
Deploy Hugo ke production

Kenapa Hugo?

Sangat Cepat - Build dalam hitungan milidetik
Single Binary - Tidak perlu dependencies
Flexible - Supports 100+ content types
No Database - Semua static HTML
Free Hosting - Netlify, Vercel, GitHub Pages

Setup

Install Hugo

Linux (binary)

# Download
wget https://github.com/gohugoio/hugo/releases/download/v0.123.0/hugo_extended_0.123.0_linux-amd64.tar.gz

# Extract
tar -zxf hugo_extended_*.tar.gz

# Install
sudo install hugo /usr/local/bin/

# Verify
hugo version

macOS

brew install hugo

Windows

# Via Chocolatey
choco install hugo -extended

# Via Scoop
scoop install hugo

Minggu 1

Buat Site Baru

# Buat site baru
hugo new site mysite

# Masuk ke folder
cd mysite

# Struktur folder
mysite/
├── archetypes/
├── content/
├── data/
├── layouts/
├── static/
├── public/        # Output build
├── config.toml    # Konfigurasi

Run Server

# Development server
hugo server

# Dengan draft
hugo server -D

# Specific port
hugo server -p 1313

Buka http://localhost:1313 untuk preview!

Minggu 1

Membuat Content

# Buat halaman
hugo new about.md

# Buat post
hugo new posts/my-first-post.md

# Buat dengan folder
hugo new posts/2024/hello-world.md

Front Matter

---
title: "My First Post"
date: 2024-01-15
draft: false
author: "John Doe"
tags: ["hugo", "static-site"]
categories: ["Tech"]
---

# Konten di bawah ini

Front Matter Fields

title, date, draft
author, tags, categories
slug, url
custom fields

Minggu 1

Markdown Basics

Text Formatting

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

**Bold** or __Bold__
*Italic* or _Italic_
~~Strikethrough~~

> Blockquote

Lists & Links

- Item 1
- Item 2
  - Nested

1. First
2. Second

[Link text](https://example.com)
![Image alt](/images/photo.jpg)

Code

Inline `code`

```
Code block
multiple lines
```

Minggu 1

Konfigurasi

config.toml (default)

baseURL = 'https://example.com/'
languageCode = 'en-us'
title = 'My Hugo Site'
theme = ['theme-name']

[params]
description = "My awesome site"
author = "John Doe"

config.yaml

baseURL: https://example.com/
languageCode: en-us
title: My Hugo Site
theme:
  - theme-name

params:
  description: My awesome site

config.json

{
  "baseURL": "https://example.com/",
  "title": "My Hugo Site",
  "params": {
    "description": "My awesome site"
  }
}

Minggu 1

Templates Basics

Single Page Template

{{ define "main" }}
<h1>{{ .Title }}</h1>
<p>{{ .Date.Format "2006-01-02" }}</p>

{{ .Content }}
{{ end }}

List Template

{{ define "main" }}
<h1>{{ .Title }}</h1>

{{ range .Pages }}
  <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  <p>{{ .Summary }}</p>
{{ end }}
{{ end }}

Variables

.Title - Judul halaman
.Content - Isi konten
.Summary - Ringkasan
.Date - Tanggal
.Params - Parameter custom

Minggu 1

Home Page

layouts/index.html

{{ define "main" }}
<header>
  <h1>{{ .Site.Title }}</h1>
  <p>{{ .Site.Params.description }}</p>
</header>

<main>
  {{ range first 5 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
    <article>
      <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
      <p>{{ .Summary }}</p>
    </article>
  {{ end }}
</main>
{{ end }}

Site Variables

.Site.Title - Judul site
.Site.Params - Parameter global
.Site.RegularPages - Semua halaman
.Site.Menus - Menu yang didefinisikan

Minggu 1

Shortcodes

Buat Shortcode

{{/* layouts/shortcodes/youtube.html */}}
<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/{{ .Get "id" }}" 
          frameborder="0" allowfullscreen></iframe>
</div>

Pakai Shortcode

{{ youtube id="dQw4w9WgXcQ" }}

{{/* Dengan inner content */}}
{{/* layouts/shortcodes/note.html */}}
<div class="note">{{ .Inner }}</div>

{{


        
        
        
            Minggu 1
            Partials
            Buat Partial
            {{/* layouts/partials/header.html */}}
<header>
  <nav>
    <a href="/">Home</a>
    {{ range .Site.Menus.main }}
      <a href="{{ .URL }}">{{ .Name }}</a>
    {{ end }}
  </nav>
</header>
            Pakai Partial
            {{ partial "header.html" . }}

{{/* Dengan parameter */}}
{{ partial "head.html" (dict "title" .Title "css" "style.css") }}
            Common Partials
            header.html
footer.html
head.html
sidebar.html
metadata.html
            
        
        
        
        
            Minggu 1
            Taxonomies
            Konfigurasi
            [taxonomies]
  tag = "tags"
  category = "categories"
  series = "series"
            Di Content
            ---
title: "My Post"
tags: ["hugo", "web"]
categories: ["Tech"]
---
            Akses Taxonomies
            {{ range .Site.Taxonomies.tags }}
  <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a>
{{ end }}
            
        
        
        
        
            Minggu 2
            Menus
            Konfigurasi
            [menu]
  [[menu.main]]
    name = "Home"
    url = "/"
    weight = 1
  
  [[menu.main]]
    name = "Blog"
    url = "/posts/"
    weight = 2
  
  [[menu.main]]
    name = "About"
    url = "/about/"
    weight = 3
            Di Content
            ---
title: "About"
menu:
  main:
    weight: 10
---
            Render Menu
            {{ range .Site.Menus.main }}
  <a href="{{ .URL }}" class="{{ if $.IsMenuCurrent "main" . }}active{{ end }}">
    {{ .Name }}
  </a>
{{ end }}
            
        
        
        
        
            Minggu 2
            Hugo Themes
            Cari Themes
            # Browse themes
https://themes.gohugo.io/
            Install Theme
            # Via git submodule (recommended)
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

# Clone
git clone --depth 1 https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
            Config Theme
            theme = "ananke"

# Atau dengan submodules
theme = ["ananke", "other-theme"]
            Gunakan theme sebagai starting point, lalu kustomisasi!
            
        
        
        
        
            Minggu 2
            Assets & Pipes
            Asset Pipeline
            # assets/css/main.scss
$primary: #FF3933;

body {
  font-family: sans-serif;
  color: $primary;
}
            Build CSS
            {{ $style := resources.Get "css/main.scss" | toCSS | minify }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
            Build JS
            {{ $js := resources.Get "js/main.js" | minify | fingerprint }}
<script src="{{ $js.RelPermalink }}"></script>
            Image Processing
            {{ $img := resources.Get "images/photo.jpg" }}
{{ $resized := $img.Resize "400x" }}
<img src="{{ $resized.RelPermalink }}">
            
        
        
        
        
            Minggu 2
            Multilingual
            Konfigurasi
            [languages]
  [languages.en]
    languageName = "English"
    weight = 1
    title = "My Site"
    
  [languages.id]
    languageName = "Bahasa Indonesia"
    weight = 2
    title = "Situs Saya"

  [languages.fr]
    languageName = "Francais"
    weight = 3
            Content per Language
            content/
├── posts/
│   ├── hello.en.md
│   ├── hello.id.md
│   └── hello.fr.md
            Language Switcher
            {{ range .Site.Languages }}
  <a href="{{ $.RelPermalink | relLangURL }}">{{ .LanguageName }}</a>
{{ end }}
            
        
        
        
        
            Minggu 2
            RSS Feed
            Enable RSS
            [outputs]
  home = ["HTML", "RSS"]
            Template RSS
            {{- $.Scratch.Add " feed" (printf "%s %s" .Title .RSSLink ) -}}
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>{{ .Title }}</title>
    <link>{{ .Permalink }}</link>
    {{ range first 10 .Pages }}
    <item>
      <title>{{ .Title }}</title>
      <link>{{ .Permalink }}</link>
      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}</pubDate>
    </item>
    {{ end }}
  </channel>
</rss>
            Link RSS
            <link rel="alternate" type="application/rss+xml" 
      title="{{ .Site.Title }}" href="{{ .RSSLink }}">
            
        
        
        
        
            Minggu 2
            Deployment
            Build
            # Build ke folder public
hugo

# Build dengan environment
hugo --environment production
            GitHub Pages
            # .github/workflows/hugo.yaml
name: Deploy Hugo

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
      - name: Build
        run: hugo --minify
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
            
        
        
        
        
            Troubleshooting
            Troubleshooting
            Masalah Solusi
Template error Cek: hugo --verbose
Page not found Cek front matter & URL
Theme not working Update theme submodule
Build failed Cek config & dependencies
            Commands Debug
            # Verbose output
hugo --verbose

# Drafts included
hugo -D

# Cek semua pages
hugo --printPathWarnings

# List taxonomies
hugo --printUnusedTemplates
            
        
        
        
        
            
                🎉 Selesai!
                Next Steps
                
                    1. Practice: buat site dengan Hugo
                    2. Eksplorasi themes di themes.gohugo.io
                    
3. Deploy ke GitHub Pages/Netlify
                    4. Build portfolio atau blog

Masalah	Solusi
Template error	Cek: hugo --verbose
Page not found	Cek front matter & URL
Theme not working	Update theme submodule
Build failed	Cek config & dependencies

Hugo

Tujuan Pembelajaran

Kenapa Hugo?

Install Hugo

Linux (binary)

macOS

Windows

Buat Site Baru

Run Server

Membuat Content

Front Matter

Front Matter Fields

Markdown Basics

Text Formatting

Lists & Links

Code

Konfigurasi

config.toml (default)

config.yaml

config.json

Templates Basics

Single Page Template

List Template

Variables

Home Page

layouts/index.html

Site Variables

Shortcodes

Buat Shortcode

Pakai Shortcode

Partials

Buat Partial

Pakai Partial

Common Partials

Taxonomies

Konfigurasi

Di Content

Akses Taxonomies

Menus

Konfigurasi

Di Content

Render Menu

Hugo Themes

Cari Themes

Install Theme

Config Theme

Assets & Pipes

Asset Pipeline

Build CSS

Build JS

Image Processing

Multilingual

Konfigurasi

Content per Language

Language Switcher

RSS Feed

Enable RSS

Template RSS

Link RSS

Deployment

Build

GitHub Pages

Troubleshooting

Commands Debug

🎉 Selesai!

Kuis: Hugo