Kategori: Web Technology

Tutorial ini mengajarkan tentang cara membuat blog statis menggunakan Hugo pada Windows 10. 

Ada banyak pilihan tema open-source untuk membuat blog dengan Hugo. Dalam tutorial ini, kita akan menggunakan tema Hulga.

Ini adalah langkah-langkah menginstall hugo dan menerapkan tema pada blog:

1. Download installer Hugo extended untuk Windows di: https://github.com/gohugoio/hugo/releases . Pastikan untuk mendownload versi extended karena tema Hulga membutuhkan versi ini.
   
2. Extract file .zip tadi ke C:\Hugo\bin , atau folder apapun yang Anda pilih.
   
   
3. Tambahkan direktori hugo (misalnya C:\Hugo\bin) ke Path (ada di bagian System Environment pada setting Windows).
   
4. Buka command line, dan ketik command hugo version . Jika tidak ada pesan error, maka Anda sudah berhasil menginstall Hugo.
   

   

5. Dalam direktori pilihan Anda, ketik command hugo new site mysite . Command ini akan membuat folder bernama mysite yang akan menjadi source blog Anda.
   
   
6. Download .zip tema: https://github.com/wlh320/hugo-theme-hulga
   
7. Extract ke folder mysite/themes, dan ganti nama folder hugo-theme-hulga menjadi hulga

8. Tambahkan theme = "hulga" ke file config.toml yang ada pada direktori mysite. Ini adalah contoh file config.toml sederhana: 
   

   baseURL = "https://example.com"
   languageCode = "id"
   title = "Site Hugo Baru"
   paginate = 10
   theme = "hulga"
   
   [params]
   subtitle = "Keterangan website."
   copyright = "Copyright © 2021"
   
   [menu]
   [[menu.main]]
   identifier = "index"
   name = "index"
   url = "/"
   weight = 1
   
   [taxonomies]
   category = "categories"
   tag = "tags"

9. Buat folder bernama post di dalam folder mysite\content

10. Buat file mypost.md di dalam  mysite\content\post
    Ini adalah contoh konten mypost.md sederhana:
    

    ---
    title: "Postingan Pertama"
    date: 2021-11-17T14:15:55+07:00
    draft: false
    categories: [development, publishing]
    tags: [hugo, static site generator]
    ---
    
    Postingan pertama.

11. Kembali ke command line, masuk ke direktori mysite dengan mengetik cd mysite

12. Aktifkan server dengan command hugo server.
    
    
13. Buka blog anda di http://localhost:1313/
    

    

Referensi:
https://www.freecodecamp.org/news/your-first-hugo-blog-a-practical-guide/
https://gohugo.io/getting-started/quick-start/
https://gohugo.io/getting-started/installing/
https://themes.gohugo.io/themes/hugo-theme-hulga/