3 min read Uncategorized

Tutorial membuat static site memakai Hugo

Tertarik dengan kecepatan situs salah seorang teman, mas Kurnia Ramadhan, dengan websitenya karangan.id, saya akhirnya iseng ingin tahu websitenya itu dijalankan memakai apa.

Dari footer, ada keterangan bahwa websitenya dijalankan memakai Hugo!

Ok, jika dilihat dari segi pemakaian memory, Hugo ini tidak memerlukan Nginx, tidak memerlukan Php sebagai pemroses filenya, melainkan hanya satu file saja, yaitu hugo itu sendiri, Jadi misalnya hugo dijalankan pada ip dan port 80, maka bisa otomatis resolve ke domain, dan tentunya bisa portable alias mudah dipindahkan.

Untuk bisa menjalankan Hugo, bisa dengan menginstallnya, ataupun langsung mendownload filenya dari Github

Kali ini saya ingin menjalankan Hugo langsung dari filenya, tanpa proses install, pada sebuah vps Debian 8 64bit

 

  • Buat direktory untuk penyimpanan file
mkdir -p /var/www/hugo
  • Download hugo
wget https://github.com/gohugoio/hugo/releases/download/v0.47.1/hugo_0.47.1_Linux-64bit.tar.gz
  • Extract hugo
tar xf hugo*
  • Copy hugo ke /usr/bin/hugo
cp hugo /usr/bin/hugo
  • Coba jalankan hugo dimanapun, jika berhasil maka akan muncul seperti dibawah
root# hugo
Error: Unable to locate Config file. Perhaps you need to create a new site.
       Run `hugo help new` for details.

 

Pembuatan static site

  • Sekarang kita pindah ke /var/www/hugo untuk membuat static sitenya 
cd /var/www
hugo new site .

Akan muncul direktori seperti dibawah :

/var/www/hugo
----archetypes
----content
----data
----layouts
----resources
----static
----themes
----config.toml
  • Salah satu themes kesukaan saya yaitu Hyde-Y bisa dipakai untuk contoh kali ini :
cd /var/www/hugo/themes
git clone https://github.com/enten/hyde-y
  • Konfigurasi /var/www/hugo/config.toml
# hostname (and path) to the root eg. http://spf13.com/
baseURL = "https://erawan.space"
 
# Site title
title = ""

# Copyright
copyright = "Copyright (c) 2018 Erawan Arif Nugroho. Powered with Hugo"

# Language
languageCode = "en-EN"

# Metadata format
# "yaml", "toml", "json"
metaDataFormat = "toml"

# Theme to use (located in /themes/THEMENAME/)
theme = "hyde-y"

# Pagination
paginate = 5
paginatePath = "page"

# Enable Disqus integration
disqusShortname = "your_disqus_shortname"
[[menu.main]]
  name = "Home"
  weight = 10
  identifier = "home"
  url = "/"
  

[permalinks]
    post = "/:year/:month/:day/:slug/"
    code = "/:slug/"

[taxonomies]
    tag = "tags"
    topic = "topics"

[author]
    name = "yourname"
    email = "yourname@example.com"

#
# All parameters below here are optional and can be mixed and matched.
#
[params]
    # You can use markdown here.
    brand = "Homepage"
    topline = "of Erawan Arif Nugroho"
    footline = ""
 
    # Sidebar position
    # false, true, "left", "right"
    sidebar = "left"

    # Text for the top menu link, which goes the root URL for the site.
    # Default (if omitted) is "Home".
    home = "Home"

    # Select a syntax highight.
    # Check the static/css/highlight directory for options.
    highlight = "default"

    # Google Analytics.
    googleAnalytics = "Your Google Analytics tracking code"

    # Sidebar social links.
    github = "enten/hugo-boilerplate" # Your Github profile ID
    bitbucket = "" # Your Bitbucket profile ID
    linkedin = "" # Your LinkedIn profile ID (from public URL)
    googleplus = "" # Your Google+ profile ID
    facebook = "" # Your Facebook profile ID
    twitter = "" # Your Twitter profile ID
    youtube = ""  # Your Youtube channel ID
    flattr = ""  # populate with your flattr uid
    flickr = "" # Your Flickr profile ID
    vimeo = "" # Your Vimeo profile ID

    # Sidebar RSS link: will only show up if there is a RSS feed
    # associated with the current page
    rss = true

[blackfriday]
    angledQuotes = true
    fractions = false
    hrefTargetBlank = false
    latexDashes = true
    plainIdAnchors = true
    extensions = []
    extensionmask = []
  • Selanjutnya kita coba memberikan perintah kepada hugo untuk membuat contoh post
cd /var/www/hugo
hugo new posts/my-first-post.md

Akan terbuat file dengan lokasi /var/www/hugo/content/post/my-first-post.md. Secara default, Hugo akan membaca file yang disimpan pada direktori content/post dan menampilkan pada halaman posts.

  • Coba kita jalankan hugo server dengan perintah berikut jika ingin mengakses memakai IP, selama proses testing
cd /var/www/hugo
hugo server --baseUrl=192.168.1.10 --bind="0.0.0.0" --port=4000 --watch

# baseUrl bisa diganti memakai domain atau ip
--baseUrl=www.erawan.space
--baseUrl=192.168.1.10
# perintah --watch agar selalu memonitor perubahan file dan menampilkan updatenya

Silakan sesuaikan IP dan portnya, kemudian coba buka ip dan port tersebut dari browser, dan kita akan melihat contoh halamannya.

Untuk menjalankan Hugo saat boot, bisa dengan menambahkan baris di /etc/rc.local ataupun mengikuti tutorial yang ada di internet.

Keuntungan memakai Hugo, adalah kita hanya perlu mengkompress satu direktory untuk kemudian dijalankan di tempat lain, tanpa perlu mengatur konfigurasi webserver.

  • Setelah merasa siap untuk live, kita perlu menjalankan Hugo agar resolve ke domain tanpa menampilkan port
cd /var/www/hugo
hugo server --baseUrl=https://erawan.space --appendPort=false
  • Dan untuk keperluan proxy dari Nginx ke Hugo, bisa dengan memakai contoh konfigurasi Nginx saya :
server {
	listen 80;
	server_name erawan.space www.erawan.space;
	
	location / {                                                             
            proxy_pass http://127.0.0.1:1313;
            proxy_set_header Host $host;                                     
            proxy_buffering off;     
		
    } 

}

# proxy_pass mengarah ke kondisi default port Hugo berjalan, yaitu 1313

Dengan memakai perintah diatas, maka domain erawan.space dapat diakses memakai www ataupun tanpa www, dengan kondisi memakai https

Contoh tutorial ini, bisa saya jalankan pada Raspberry Pi dengan memory 512MB, maupun VPS dari Prometeus dengan memory 50MB 🙂

Member discussion