Membuat website statik tanpa hosting dengan Hugo dan Github
Tags: hugo, github, webdev
Published: 2021-05-25 19:34:00

Adapun hal-hal yang perlu ada/diketahui terlebih dahulu, agar supaya tutorial ini dapat diikuti/dipelajari dengan baik, adalah sebagai berikut.

- Command-line Hugo dan Git sudah terpasang di laptop/PC.
- Minimal tahu struktur dan cara mengedit halaman web pada Hugo.
- Punya akun Github.
- Minimal pernah 1x membuat repository di Github dan tahu cara push dan pull.

## Membuat repository yang dibutuhkan
Buatlah sebanyak 2 (dua) buah repository di [Github](https:/github.com). Pada tutorial ini akan menggunakan nama repository `webku.github.io` dan `webku-source`. Ganti `webku` sesuai selera masing-masing.

Jangan lupa menyimpan alamat remote URL kedua repository diatas, silahkan menggunakan Notepad atau yang lain. Struktur URL-nya akan terlihat mirip seperti ini,
```text
https://github.com/namanama/webku.github.io.git
```
```text
https://github.com/namanama/webku-source.git
```

## Membuat website Hugo baru
Ketikkan perintah berikut.
```bash
hugo new site webku-source
```
```bash
cd webku-source
```

Pada root direktori `webku-source`, edit file konfigurasi milik Hugo bernama `config.toml`, dan isilah dengan konfigurasi berikut ini.
```toml
baseURL = "https://webku.github.io"
languageCode = "en-us"
title = "Webku"
publishDir = "webku.github.io"
```

Kemudian dalam direktori `layouts`, buatlah sebuah direktori baru bernama `_default`. Isilah direktori `_default` dengan sebuah file bernama `baseof.html`, yang didalamnya memuat struktur kode berikut.
```html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Webku</title>
</head>
<body>
   <header>
      {{ block "bodyheader" . }}{{ end }}
   </header>
   <main>
      {{ block "bodymain" . }}{{ end }}
   </main>
   <footer>
      {{ block "bodyfooter" . }}{{ end }}
   </footer>
</body>
</html>
```

Selanjutnya dalam direktori `layouts`, buatlah sebuah file baru bernama `index.html`, yang memuat kode berikut ini.
```html
{{ define "bodyheader" }}
<h1>Ini adalah header.</h1>
{{ end }}

{{ define "bodymain" }}
<p>Ini website Hugo yang menggunakan Github sebagai hosting.</p>
{{ end }}

{{ define "bodyfooter" }}
<small>Ini adalah teks footer.</small>
{{ end }}
```

Sesudah itu, untuk melihat tampilan dari halaman yang baru dibuat diatas, pada terminal ketik perintah `hugo server`. Hugo akan menjalankan sebuah server lokal yang normalnya memiliki alamat `http://localhost:1313`.

Buka di browser alamat server lokal Hugo diatas, ketik `http://localhost:1313`. Tekan <kbd>Ctrl+C</kbd> untuk menghentikan server lokal Hugo.

## Deploying

### Push konten direktori `webku-source` ke repository Github
Langkah berikutnya adalah mengirimkan isi direktori `webku-source` ke repository bernama `webku-source` yang sudah dibuat sebelumnya di Github.

Pada terminal, pastikan posisi ada dalam root direktori `webku-source`, ketikkan perintah berikut ini secara berurutan.
```bash
git init
```
```bash
git add .
```
```bash
git commit -am "Initial commit"
```
```bash
git remote add origin https://github.com/namanama/webku-source.git
```
> *Catatan:* Jangan lupa mengganti alamat URL diatas, dengan URL milik repository Anda.

```bash
git branch -M main
```
```bash
git push -u origin main
```

Output yang diharapkan dari perintah terakhir diatas adalah mirip dengan dibawah ini,
```bash
...
Total 9 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/namanama/webku-source.git
 * [new branch]         main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
```

### Push konten direktori `webku.github.io` ke repository Github
Langkah selanjutnya adalah membuat versi file statik dari website Hugo yang dibuat sebelumnya, dan mengirimkannya ke repository bernama `webku.github.io` di Github. Versi file statik yang ada dalam repository inilah yang akan menjadi source code website-nya.

Adapun langkahnya sebagai berikut, jalankan secara berurutan. Pastikan sebelumnya pada terminal, posisi ada pada root direktori `webku-source`.
```bash
git submodule add https://github.com/namanama/webku.github.io.git
```
> Abakan jika di terminal muncul pesan `Unable to checkout submodule... dst.`

```bash
hugo
```
> Perintah ini akan membuat versi file statik website kedalam direktori `webku.github.io`

```bash
cd webku.github.io
```
```bash
git add .
```
```bash
git commit -am "Website pertama dengan Hugo dan Github"
```
```bash
git branch -M main
```
```bash
git push -u origin main
```
```bash
cd ..
```

Output yang diharapkan dari perintah terakhir `git push -u origin main` diatas adalah mirip dengan dibawah ini,
```bash
...
Total 9 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/namanama/webku.github.io.git
 * [new branch]         main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
```

Lanjutkan dengan melakukan update repository `webku-source` kembali. Hal ini disebabkan adanya penambahan direktori `webku.github.io` dalam folder `webku-source`. Jalankan langkah berikut secara berurutan.
```bash
git add .
```
```bash
git commit -am "Penambahan folder webku.github.io"
```
```bash
git push -u origin main
```

Output yang diharapkan dari perintah terakhir diatas adalah mirip dengan dibawah ini,
```bash
...
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/namanama/webku-source.git
  0c6s3s1..968725d         main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
```

## Publish `webku.github.io`
Pada tahap ini, semua file yang dibutuhkan untuk mempublish website yang dibuat diatas, sudah tersedia di Github. Sekarang saatnya mengaktifkan fitur **Github Pages**, dengan cara sebagai berikut.

1. Akses website [Github](https://github.com) pada browser, lalu buka halaman repository dari `webku.github.io`.
1. Pilih tab `Settings`, kemudian pada menu kiri pilih menu `Pages`.
1. Pada bagian **Source**, klik pada menu dropdown `None` terus ambil pilihan `main`, dan klik **Save**.
1. Akan muncul sebuah pesan `Your site is ready to be published at http://webku.github.io/`, yang mengindikasikan website sudah publish.
1. Pastikan memberi tanda centang pada `Enforce HTTPS`, tunggu sampai sudah ada pesan `Your site is published at https://webku.github.io/`.
1. Silahkan akses URL tersebut `https://webku.github.io` pada browser.

## Perubahan konten website
Apabila konten website Anda mengalami perubahan, jalankan perintah dibawah ini secara berurutan, agar supaya perubahan yang dilakukan bisa segera publish.

Pastikan pada terminal, posisi ada pada root direktori `webku-source`.
```bash
hugo
```
```bash
cd webku.github.io
```
```bash
git add .
```
```bash
git commit -am "Update kedua webku.github.io"
```
```bash
git push -u origin main
```
```bash
cd ..
```
```bash
git add .
```
```bash
git commit -am "Perubahan kedua webku.github.io"
```
```bash
git push -u origin main
```

Sekian.
Terima kasih sudah membaca.