Movatterモバイル変換

[0]ホーム
URL:

Skip to content
DEV Community
Log in Create account

DEV Community

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

Posted on • Edited on • Originally published atblog.erol.dev

     

Membuat website statik tanpa hosting dengan Hugo dan Github

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 diGithub. Pada tutorial ini akan menggunakan nama repositorywebku.github.io danwebku-source. Gantiwebku 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 modeExit fullscreen mode
https://github.com/namanama/webku-source.git
Enter fullscreen modeExit fullscreen mode

Membuat website Hugo baru

Ketikkan perintah berikut.

hugo new site webku-source
Enter fullscreen modeExit fullscreen mode
cdwebku-source
Enter fullscreen modeExit fullscreen mode

Pada root direktoriwebku-source, edit file konfigurasi milik Hugo bernamaconfig.toml, dan isilah dengan konfigurasi berikut ini.

baseURL="https://webku.github.io"languageCode="en-us"title="Webku"publishDir="webku.github.io"
Enter fullscreen modeExit fullscreen mode

Kemudian dalam direktorilayouts, buatlah sebuah direktori baru bernama_default. Isilah direktori_default dengan sebuah file bernamabaseof.html, yang didalamnya memuat struktur kode berikut.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 modeExit fullscreen mode

Selanjutnya dalam direktorilayouts, buatlah sebuah file baru bernamaindex.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 modeExit fullscreen mode

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

Buka di browser alamat server lokal Hugo diatas, ketikhttp://localhost:1313. TekanCtrl+C untuk menghentikan server lokal Hugo.

Deploying

Push konten direktoriwebku-source ke repository Github

Langkah berikutnya adalah mengirimkan isi direktoriwebku-source ke repository bernamawebku-source yang sudah dibuat sebelumnya di Github.

Pada terminal, pastikan posisi ada dalam root direktoriwebku-source, ketikkan perintah berikut ini secara berurutan.

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

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

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

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

...Total 9(delta 0), reused 0(delta 0), pack-reused 0To https://github.com/namanama/webku-source.git*[new branch]         main -> mainBranch'main'setup to track remote branch'main' from'origin'.
Enter fullscreen modeExit fullscreen mode

Push konten direktoriwebku.github.io ke repository Github

Langkah selanjutnya adalah membuat versi file statik dari website Hugo yang dibuat sebelumnya, dan mengirimkannya ke repository bernamawebku.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 direktoriwebku-source.

git submodule add https://github.com/namanama/webku.github.io.git
Enter fullscreen modeExit fullscreen mode

Abakan jika di terminal muncul pesanUnable to checkout submodule... dst.

hugo
Enter fullscreen modeExit fullscreen mode

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

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

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

...Total 9(delta 0), reused 0(delta 0), pack-reused 0To https://github.com/namanama/webku.github.io.git*[new branch]         main -> mainBranch'main'setup to track remote branch'main' from'origin'.
Enter fullscreen modeExit fullscreen mode

Lanjutkan dengan melakukan update repositorywebku-source kembali. Hal ini disebabkan adanya penambahan direktoriwebku.github.io dalam folderwebku-source. Jalankan langkah berikut secara berurutan.

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

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

...Total 3(delta 0), reused 0(delta 0), pack-reused 0To https://github.com/namanama/webku-source.git  0c6s3s1..968725d         main -> mainBranch'main'setup to track remote branch'main' from'origin'.
Enter fullscreen modeExit fullscreen mode

Publishwebku.github.io

Pada tahap ini, semua file yang dibutuhkan untuk mempublish website yang dibuat diatas, sudah tersedia di Github. Sekarang saatnya mengaktifkan fiturGithub Pages, dengan cara sebagai berikut.

  1. Akses websiteGithub pada browser, lalu buka halaman repository dariwebku.github.io.
  2. Pilih tabSettings, kemudian pada menu kiri pilih menuPages.
  3. Pada bagianSource, klik pada menu dropdownNone terus ambil pilihanmain, dan klikSave.
  4. Akan muncul sebuah pesanYour site is ready to be published at http://webku.github.io/, yang mengindikasikan website sudah publish.
  5. Pastikan memberi tanda centang padaEnforce HTTPS, tunggu sampai sudah ada pesanYour site is published at https://webku.github.io/.
  6. Silahkan akses URL tersebuthttps://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 direktoriwebku-source.

hugo
Enter fullscreen modeExit fullscreen mode
cdwebku.github.io
Enter fullscreen modeExit fullscreen mode
git add.
Enter fullscreen modeExit fullscreen mode
git commit-am"Update kedua webku.github.io"
Enter fullscreen modeExit fullscreen mode
git push-u origin main
Enter fullscreen modeExit fullscreen mode
cd ..
Enter fullscreen modeExit fullscreen mode
git add.
Enter fullscreen modeExit fullscreen mode
git commit-am"Perubahan kedua webku.github.io"
Enter fullscreen modeExit fullscreen mode
git push-u origin main
Enter fullscreen modeExit fullscreen mode

Sekian.
Terima kasih sudah membaca.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

DevOps Engineer @sulutprovgoid • Android & Web Developer @kawanua • Somehow turning coffee into code since "who knows when" 👨‍💻☕️
  • Location
    Indonesia
  • Education
    freeCodeCamp
  • Work
    Lead Web Developer at Ertomedia
  • Joined

More fromErol Joudy

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account
[8]ページ先頭
©2009-2025 Movatter.jp