Cara Membuat Website Dengan Hugo + Bootstrap 5
- Oka bRionZ
- Web development
- June 26, 2025
Table of Contents
Cara Membuat Website Dengan Hugo + Bootstrap 5
Membuat website dengan Hugo dan Bootstrap 5 dapat menjadi cara yang efektif dan mudah untuk menciptakan situs statis yang responsif. Berikut adalah langkah-langkah detail untuk memulai dan menyelesaikan proyek Anda. Sebelumnya saya pernah menulis tentang Cara Membuat Hugo Themes .
1. Instalasi Hugo
Langkah 1: Unduh Hugo
- Kunjungi situs resmi Hugo dan unduh installer yang sesuai dengan sistem operasi Anda.
Langkah 2: Instalasi
- Jalankan installer yang telah Anda unduh. Pastikan Hugo terinstal dengan benar dan sudah tersedia dalam variabel lingkungan atau jalur sistem.
2. Membuat Proyek Hugo
Langkah 1: Buat Direktori Proyek
- Buka terminal atau command prompt dan navigasikan ke direktori yang diinginkan.
- Jalankan perintah berikut untuk membuat direktori proyek:
hugo new site hugo-bootstrap - Ini akan menciptakan struktur direktori dasar untuk Hugo, termasuk direktori
layouts,data,content,archetypes, danresources.
Langkah 2: Navigasikan ke Direktori Proyek
- Masukkan direktori proyek dengan perintah:
cd hugo-bootstrap
- Masukkan direktori proyek dengan perintah:
3. Membuat Tema Default (Opsional)
- Langkah 1: Buat Tema Default
- Jika Anda ingin membuat tema default untuk memperbarui struktur, jalankan perintah berikut:
hugo new theme mytheme - Ini akan menciptakan folder
mythemedengan struktur yang serupa dengan folder dasar.
- Jika Anda ingin membuat tema default untuk memperbarui struktur, jalankan perintah berikut:
4. Mengintegrasikan Bootstrap 5
Langkah 1: Buat Struktur Direktori Bootstrap
- Buat direktori
assetsdalam direktoristaticAnda (atau sesuai dengan struktur yang Anda pilih).mkdir public/assets/css mkdir public/assets/js - Simpan file CSS dan JS Anda di direktori tersebut.
- Buat direktori
Langkah 2: Tambahkan Bootstrap CSS
- Salin file Bootstrap CSS ke dalam direktori
public/assets/css.cp path/to/bootstrap/css/bootstrap.min.css public/assets/css/ - Tambahkan link CSS di file
baseof.html(direktorilayouts).<link rel="stylesheet" href="{{ .Site.BaseURL }}assets/css/bootstrap.min.css">
- Salin file Bootstrap CSS ke dalam direktori
Langkah 3: Tambahkan Bootstrap JS
- Salin file Bootstrap JS ke dalam direktori
public/assets/js.cp path/to/bootstrap/js/bootstrap.min.js public/assets/js/ - Tambahkan script di file
baseof.html.<script src="{{ .Site.BaseURL }}assets/js/bootstrap.min.js"></script>
- Salin file Bootstrap JS ke dalam direktori
5. Mengustomisasi Template Dasar
Langkah 1: Buka dan Edit
baseof.html- Buka file
baseof.htmldi dalam direktorilayouts. - Ini adalah file yang mendefinisikan struktur dasar situs Anda, termasuk tag HTML dan struktur dasar.
- Buka file
Langkah 2: Tambahkan Klasifikasi Bootstrap
- Perbarui kode HTML untuk memasukkan klasifikasi Bootstrap yang diperlukan.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="{{ .Site.BaseURL }}assets/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<!-- Konten utama situs Anda -->
</div>
<script src="{{ .Site.BaseURL }}assets/js/bootstrap.min.js"></script>
</body>
</html>
6. Membuat Halaman Konten
Langkah 1: Buat Halaman Baru dengan perintah
hugo new- Jalankan perintah berikut untuk membuat halaman baru:
hugo new about/index.md - Ini akan menciptakan file markdown baru dalam direktori
content.
- Jalankan perintah berikut untuk membuat halaman baru:
Langkah 2: Edit dan Tambahkan Konten di File Markdown
- Buka dan edit file markdown yang baru dibuat.
- Tambahkan konten menggunakan sintaks markdown.
Contoh:
---
title: Tentang Saya
date: 2023-12-26T14:00:00+07:00
draft: false
---
# Tentang Saya
Saya adalah seorang pengembang web yang memiliki minat dalam teknologi web modern seperti Hugo dan Bootstrap.
## Pengalaman
- **Pengalaman Pertama**: Membuat situs web sederhana dengan HTML, CSS, dan JavaScript.
- **Pengalaman Kedua**: Menggunakan Hugo dan Bootstrap untuk membuat situs web responsif.
## Proyek Terkini
- **Proyek 1**: Membuat blog pribadi menggunakan Hugo dan Bootstrap 5.
- **Proyek 2**: Mengembangkan aplikasi web menggunakan React dan Node.js.
7. Jalankan Server Hugo (Opsional)
- Langkah 1: Jalankan Server Hugo
- Jalankan perintah berikut untuk menjalankan server Hugo:
hugo server -D - Ini akan memulai server Hugo dan membuat situs Anda dapat diakses melalui URL
http://localhost:1313.
- Jalankan perintah berikut untuk menjalankan server Hugo:
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat website yang responsif menggunakan Hugo dan Bootstrap 5. Jika Anda ingin memperbarui atau menambahkan fitur lebih lanjut, Anda dapat mencari tutorial lanjutan atau dokumentasi resmi untuk mendapatkan informasi lebih detail.
