Membuat Blog dengan Hugo dan Netlify

Jika AhmadiHamid.com dibangun di atas Jekyll kali ini saya mencoba Hugo buat AhmadiHam.id. Sedangkan untuk hosting saya gunakan Gitlab dan Netlify. Berikut adalah catatan sederhana langkah demi langkah yang dilakukan.

Membangun web

Di sini saya menggunakan sistem operasi ArchLinux. Buat distro lain atau bahkan sistem operasi lain misal Windows atau MacOS kamu bisa baca di sini.

Memasang Hugo

# pacman -S hugo

Cek hasil instalasi.

$ hugo version
Hugo Static Site Generator v0.44 linux/amd64 BuildDate: 2018-07-14T17:51:41+0200

Membuat `site` Baru

Supaya enggak repot saya sudah menyiapkan repo yang berisi website hugo siap pakai dengan tema kiera. Kamu bisa menemukan tema lain di https://themes.gohugo.io.

Unduh repo lengkap. Ekstrak. Ubah konfigurasi site di berkas config.toml

baseURL = "http://ahmadiham.id/"
languageCode = "en-us"
title = "AhmadiHam.id"
copyright = "Copyright &copy; 2018 - Ahmadi Hamid"
canonifyurls = true
theme = "kiera"
...
[params]
    tagline = "Catatan Ahmadi Hamid"

Tes di `lokal`

Selesai menyesuaikan konfigurasi kita dapat menguji website yang baru dibangun di komputer lokal.

$ hugo server -D                                        ⏎

                   | EN  
+------------------+----+
  Pages            | 32  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  2  
  Processed images |  0  
  Aliases          |  9  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 190 ms
Watching for changes in /mnt/053ECEED5AAC064B/Git/hugo-web/{content,themes}
Watching for config changes in /mnt/053ECEED5AAC064B/Git/hugo-web/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Buka http://localhost:1313/ di peramban buat melihat hasil.

Kalau kamu perhatikan website sudah berisi postingan dummy, silakan hapus dan ganti dengan tulisan kamu di folder content/posts.

Publikasi Website

Unggah website ke Repo Git kamu

Deploy ke Netlify

Pilih “Deploy Site”. Jika proses deploy sukses web kamu akan tersedia di subdomain Netlify [nama-acak].netlify.com. Yang dapat kita ganti dengan domain sendiri.

Custom Domain

Pilih tombol “Domain settings” - “Add custom domain” - (isi domain kamu) - (ikuti petunjuk sampai jendela pup up tertutup) - Pilih “Check DNS configuration” - Pilih “Set up Netlify DNS for [nama domain kamu]” - (ikuti lagi petunjuk set up) - Dan terakhir ubah nameserver di provider domain kamu ke nameserver Netlify. Selesai deh, kita tinggal menunggu propagasi.

Satu lagi yang asik dari Netlify, web kita juga telah otomatis memperoleh sertifikat SSL dari letsencrypt.

Assalamualaykum!

Referensi :

https://gohugo.io/getting-started/quick-start/

https://gohugo.io/hosting-and-deployment/hosting-on-netlify/

https://t.me/halamanbelakang

Blog