Erol J.
{Erol Blog}

{Erol Blog}

Membuat website statik tanpa hosting dengan Hugo dan Github

Membuat website statik tanpa hosting dengan Hugo dan Github

Cara membuat sebuah website statik sederhana dengan Hugo dan menggunakan Github sebagai hosting.

Subscribe to my newsletter and never miss my upcoming articles

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. 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,

https://github.com/namanama/webku.github.io.git
https://github.com/namanama/webku-source.git

Membuat website Hugo baru

Ketikkan perintah berikut.

hugo new site webku-source
cd webku-source

Pada root direktori webku-source, edit file konfigurasi milik Hugo bernama config.toml, dan isilah dengan konfigurasi berikut ini.

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.

<!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.

{{ 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 Ctrl+C 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.

git init
git add .
git commit -am "Initial commit"
git remote add origin https://github.com/namanama/webku-source.git

Catatan: Jangan lupa mengganti alamat URL diatas, dengan URL milik repository Anda.

git branch -M main
git push -u origin main

Output yang diharapkan dari perintah terakhir diatas adalah mirip dengan dibawah ini,

...
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.

git submodule add https://github.com/namanama/webku.github.io.git

Abakan jika di terminal muncul pesan Unable to checkout submodule... dst.

hugo

Perintah ini akan membuat versi file statik website kedalam direktori webku.github.io

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

Output yang diharapkan dari perintah terakhir git push -u origin main diatas adalah mirip dengan dibawah ini,

...
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.

git add .
git commit -am "Penambahan folder webku.github.io"
git push -u origin main

Output yang diharapkan dari perintah terakhir diatas adalah mirip dengan dibawah ini,

...
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 pada browser, lalu buka halaman repository dari webku.github.io.
  2. Pilih tab Settings, kemudian pada menu kiri pilih menu Pages.
  3. Pada bagian Source, klik pada menu dropdown None terus ambil pilihan main, dan klik Save.
  4. Akan muncul sebuah pesan Your site is ready to be published at http://webku.github.io/, yang mengindikasikan website sudah publish.
  5. Pastikan memberi tanda centang pada Enforce HTTPS, tunggu sampai sudah ada pesan Your site is published at https://webku.github.io/.
  6. 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.

hugo
cd webku.github.io
git add .
git commit -am "Update kedua webku.github.io"
git push -u origin main
cd ..
git add .
git commit -am "Perubahan kedua webku.github.io"
git push -u origin main

Sekian. Terima kasih sudah membaca.

 
Share this