Tutorial Membuat Static Website Dengan Hugo

Hugo adalah Static Webite Generator yang ditulis menggunakan bahasa program Go. Hugo adalah project Open Source yang dilisensikan di bawah Lisensi Apache 2.0. Hugo mampu memuat halaman dalam hitungan detik ( <1ms per halaman) karena itu Hugo terkenal dengan “The world’s fastest framework for building websites”.

Disini saya akan men-deploy website hugo ke Firebase, selain ke Firebase kalian juga bisa hosting website kalian ke Github, Gitlab atau Netlify.

Sebelum membuat website dengan Hugo pastikan kalian menginstall Hugo nya terlebih dahulu.

  1. Install hugo versi terbaru yang bisa kalian download di github.com/gohugoio/hugo/releases
  2. Saya sarankan kalian mengunduh versi extended nya, karena beberapa tema hanya support versi extended
  3. Untuk pengguna Windows saya sarankan install menggunakan scoop, yang bisa kalian lihat tutorial nya di website ini tepat nya Cara Menginstall Package Manager Scoop Di Windows 10

Tutorial Membuat Static Website dengan Framework Hugo

  1. Setelah kalian menginstall hugo nya, buka Windows Powershell untuk yang menggunakan sistem operasi Windows dan buka Terminal untuk sistem operasi berbasis Linux dan jalankan perintah hugo version dan jika tidak ada error maka hugo sudah berhasil di install di sistem operasi kalian.

Membuat Website Dengan Hugo

  1. Kita harus membuat website nya dulu dengan perintah hugo new site rmdhnreza untuk rmdhnreza kalian bisa ganti dengan nama yang kalian mau, jika sudah selesai hugo akan membuat folder baru dengan nama tadi.

Tutorial Membuat Static Website dengan Framework Hugo

  1. Masuk ke folder yang baru dibuat cd rmdhnreza
  2. Download tema hugo nya yang bisa kalian dapatkan di themes.gohugo.io, disini saya akan menggunakan tema paper. Perlu kalian ketahui, setiap tema config nya pasti berbeda ada yang menggunakan format .TOML dan ada juga yang menggunakan format .YML, jadi pastikan kalian menginstallnya sesuai dengan dokumentasi tema tersebut.
  3. Untuk menginstall tema paper di root folder hugo website kalian ketikan perintah perintah
1
 git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper
  1. Edit config.toml menggunakan editor, lalu ubah nama temanya

Tutorial Membuat Static Website dengan Framework Hugo

  1. kita coba jalankan hugo nya dengan perintah hugo server -D Jika tidak ada error maka pemasangan tema berhasil CTRL + C untuk menghentikan proses hugo.
  2. Buat post dengan perintah hugo new PostPertama.md pastikan ekstensi .md (markdown) kalian tulis.

Tutorial Membuat Static Website dengan Framework Hugo

  1. Maka akan muncul file baru di folder content, disana kalian bisa edit post nya dan pastikan draft: false agar nanti muncul pada saat kita hosting ke firebase
  2. Jalankan lagi hugo server dengan perintah hugo server -D lalu buka di browser http://localhost:1313

Tutorial Membuat Static Website dengan Framework Hugo

  1. Jika dirasa sudah cukup CTRL + C untuk menghentikan proses hugo, dan ketik perintah hugo nanti akan muncul folder baru bernama public, nah folder ini yang nantinya akan kita hosting ke firebase

Tutorial Membuat Static Website dengan Framework Hugo

Hosting ke Firebase

Sebelum kita mengupload static website kita ke Firebase pastikan kalian sudah menginstall npm package firebase-tools di sistem operasi kalian, jika kalian belum menginstallnya kalian download dan install nodeJS versi terbaru, setelah terinstall masukan perintah npm install -g firebase-tools di Powershell, CMD ataupun terminal. Jika Kalian sudah menginstall firebase tools nya, kita langsung saja mulai hosting static website kita ke firebase

  1. Login ke firebase, gunakan perintah
1
 firebase login
  1. Setelah berhasil login, ketikan perintah
1
 firebase init
  • Pilih Hosting
  • Pilih project kalian jika kalian belum punya project tinggal pilih Create a new project
  • Beri nama & ID project kalian
  • What do you want to use as your public directory? Enter
  • Configure as a single-page app (rewrite all urls to /index.html)? No
  • File public/404.html already exists. Overwrite? No
  • File public/index.html already exists. Overwrite? No

Tutorial Membuat Static Website dengan Framework Hugo

  1. Sekarang kita upload semua file yang ada di folder public dengan perintah
1
 firebase deploy
  1. Jika berhasil nanti akan muncul URL nya di terminal, bisa kalian buka di browser https://rmdhnrezamyid.web.app
  2. Edit config.toml, ganti bagian baseURL nya dengan link website kalian lalu save

Tutorial Membuat Static Website dengan Framework Hugo

  1. Langkah terakhir kalian ketikan perintah
1
2
 hugo
 firebase deploy

Sekarang buka URL kalian di browser, Tutorial Membuat Static Website dengan Framework Hugo

Untuk lebih lengkapnya bisa kalian kunjungi dokumentasi hugo di https://gohugo.io/documentation/.

Bantu bagikan halaman ini ke:
Built with Hugo
Theme Stack designed by Jimmy