Tutorial membuat static site memakai Hugo

Erawan

6 years ago

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

1	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

1	wget https://github.com/gohugoio/hugo/releases/download/v0.47.1/hugo_0.47.1_Linux-64bit.tar.gz

Extract hugo

tar xf hugo*

1	tar xf hugo*

Copy hugo ke /usr/bin/hugo

cp hugo /usr/bin/hugo

1	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.

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 .

1 2	cd /var/www hugo new site .

Akan muncul direktori seperti dibawah :

/var/www/hugo
----archetypes
----content
----data
----layouts
----resources
----static
----themes
----config.toml

/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

1 2	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 = []

# hostname (and path) to the root eg. http://spf13.com/

baseURL = "https://erawan.space"

# Site title

title = ""

# Copyright

# 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

1 2	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

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

1 2	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

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 🙂