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, dan resources.
Langkah 2: Navigasikan ke Direktori Proyek
- Masukkan direktori proyek dengan perintah:
```
cd hugo-bootstrap
```

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 mytheme dengan struktur yang serupa dengan folder dasar.

4. Mengintegrasikan Bootstrap 5

Langkah 1: Buat Struktur Direktori Bootstrap
- Buat direktori assets dalam direktori static Anda (atau sesuai dengan struktur yang Anda pilih).
```
mkdir public/assets/css 
mkdir public/assets/js 
```
- Simpan file CSS dan JS Anda di direktori tersebut.
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 (direktori layouts).
```
<link rel="stylesheet" href="{{ .Site.BaseURL }}assets/css/bootstrap.min.css">
```

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>

5. Mengustomisasi Template Dasar

Langkah 1: Buka dan Edit baseof.html
- Buka file baseof.html di dalam direktori layouts.
- Ini adalah file yang mendefinisikan struktur dasar situs Anda, termasuk tag HTML dan struktur dasar.
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.
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.

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.