Skip to content

Install Theme

🚀 Get Started

Panduan ini menjelaskan cara menginstal Hugo Theme pada project Hugo.

Hugo menyediakan berbagai pilihan theme yang dapat digunakan untuk mempercepat proses pengembangan website tanpa harus membuat tampilan dari awal.

Pada panduan ini digunakan Ananke, yaitu theme bawaan yang direkomendasikan oleh dokumentasi resmi Hugo.

Setelah menyelesaikan panduan ini, project Hugo siap dijalankan menggunakan theme Ananke.

📋 Prerequisites

Pastikan project Hugo telah berhasil dibuat.

Apabila belum, ikuti panduan berikut.

Pastikan Git telah terinstal.

git --version

Contoh output.

git version 2.x.x

▶️ Procedure

Change to Project Directory

Masuk ke direktori project.

cd ~/git/personal-site

Clone Theme Repository

Klik Hugo Themes untuk melihat list theme yang tersedia. Contoh misalnya ananke.

Clone repository Ananke ke direktori themes.

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

Contoh output.

Cloning into 'themes/ananke'...
remote: Enumerating objects...
Receiving objects: 100%
Resolving deltas: 100%

Configure Hugo Theme

Buka file konfigurasi Hugo.

vim hugo.toml

Perbarui konfigurasi berikut.

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My Personal Site'
theme = 'ananke'

Engineering Notes

Parameter theme menentukan Hugo Theme yang digunakan saat proses build maupun saat menjalankan Development Server.

Apabila menggunakan theme yang berbeda, ubah nilai parameter tersebut sesuai nama direktori theme pada folder themes.

Review Theme Directory

Tampilkan struktur direktori themes.

tree themes -L 2

Contoh output.

themes/
└── ananke
    ├── archetypes
    ├── assets
    ├── layouts
    ├── static
    └── theme.toml

Pastikan repository Ananke berhasil diunduh.

✅ Verification

Pastikan theme berhasil dikloning.

ls themes

Contoh output.

ananke

Periksa konfigurasi Hugo.

grep "^theme" hugo.toml

Contoh output.

theme = "ananke"

Verification

Hugo Theme berhasil diinstal dan siap digunakan.

💡 Engineering Notes

Hugo Theme dapat diinstal dengan beberapa metode, seperti Git Clone, Git Submodule, maupun mengunduh source code secara manual.

Pada panduan ini digunakan Git Clone karena lebih sederhana dan mudah dipahami.

Untuk kebutuhan production, penggunaan Git Submodule lebih disarankan karena memudahkan proses update theme tanpa mencampurkan source code project dengan source code theme.

Panduan penggunaan Git Submodule akan dibahas pada dokumen terpisah.