DEV Community

Cover image for Membuat website statik tanpa hosting dengan Hugo dan Github
Erol Joudy
Erol Joudy

Posted on • Updated on • Originally published at blog.erol.dev

Membuat website statik tanpa hosting dengan Hugo dan Github

#hugo #github #webdev

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
Enter fullscreen mode Exit fullscreen mode 
https://github.com/namanama/webku-source.git
Enter fullscreen mode Exit fullscreen mode

Membuat website Hugo baru

Ketikkan perintah berikut.

hugo new site webku-source
Enter fullscreen mode Exit fullscreen mode 
cd webku-source
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 }}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
git add .
Enter fullscreen mode Exit fullscreen mode 
git commit -am "Initial commit"
Enter fullscreen mode Exit fullscreen mode 
git remote add origin https://github.com/namanama/webku-source.git
Enter fullscreen mode Exit fullscreen mode

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

git branch -M main
Enter fullscreen mode Exit fullscreen mode 
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

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'.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

hugo
Enter fullscreen mode Exit fullscreen mode

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

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

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'.
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode 
git commit -am "Penambahan folder webku.github.io"
Enter fullscreen mode Exit fullscreen mode 
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

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'.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
cd webku.github.io
Enter fullscreen mode Exit fullscreen mode 
git add .
Enter fullscreen mode Exit fullscreen mode 
git commit -am "Update kedua webku.github.io"
Enter fullscreen mode Exit fullscreen mode 
git push -u origin main
Enter fullscreen mode Exit fullscreen mode 
cd ..
Enter fullscreen mode Exit fullscreen mode 
git add .
Enter fullscreen mode Exit fullscreen mode 
git commit -am "Perubahan kedua webku.github.io"
Enter fullscreen mode Exit fullscreen mode 
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Sekian.
Terima kasih sudah membaca.

Top comments (0)

Read next

charlottetowell profile image

Creating a NextJS Web App With 0 Web Dev Experience

Charlotte Towell -

fleek_ profile image

Introducing Fullstack Next.js Support on Fleek: Build, Deploy, and Scale Dynamic Apps with Ease

Fleek -

amenibensaada profile image

Client-Side Rendering and SPAs in Web Development🌐

Ameni Ben Saada -

lithephp profile image

Improving the Performance of Your PHP Application with Lithe Cache

Lithe -