Menggunakan Hugo: Bagian Ketiga

Sebelum kita memulai lebih jauh mengenai mengintegrasikan Hugo dengan cloud provider seperti AWS, kita rangkum terlebih dahulu mengenai Hugo.

  1. Command untuk membuat site baru:

       $ hugo new site pembelajar 
    
    Dimana pembelajar adalah nama dari site yang hendak kita buat.

  2. Struktur folder dari site pembelajar ini adalah sebagai berikut:

    .
    |-- archetypes
    |-- config.toml
    |-- content
    |-- data
    |-- layouts
    |-- static
    `-- themes
    
  3. Langkah berikutnya adalah melakukan instalasi themes. Detail untuk instalasi dan penggunaan themes dapat dibaca dari penyedia themes tersebut. Secara umum, langkah-langkah instalasinya adalah:

    • Mendownload themes yang hendak kita pasang ke folder themes.
    • Mencopy isi dari exampleSite ke root folder dari site. exampleSite merupakan isi dari themes yang baru kita download.
  4. Semua isi dari site, yaitu post dan page akan dibuat dan disimpan di folder content.

  5. Untuk menjalankan webserver di localhost, yaitu PC atau laptop maka command ini dieksekusi di root folder dari site:

       $ hugo server 
    

Akan ada notifikasi seperti ini: Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) yang memberitahukan bahwa site kita bisa dilihat di http://localhost:1313/ Secara default, Hugo akan menggunakan port 1313 untuk mengakses webserver yang terpasang di PC atau laptop kita.

Langkah berikutnya adalah men-generate file HTML berikut CSS dan JS yang diperlukan agar site ini dapat dipindahkan ke public webserver. Command yang perlu dieksekusi di root folder dari site adalah:

$ hugo 

Output dari command di atas adalah:

Started building sites ...
Built site for language en:
0 draft content
0 future content
0 expired content
8 pages created
0 non-page files copied
0 paginator pages created
7 tags created
3 categories created
total in 36 ms

dan akan menghasilkan folder public dengan struktur folder sebagai berikut:

|-- public
|   |-- 404.html
|   |-- blog
|   |   |-- creating-a-new-theme
|   |   |   `-- index.html
|   |   |-- goisforlovers
|   |   |   `-- index.html
|   |   |-- hugoisforlovers
|   |   |   `-- index.html
|   |   |-- index.html
|   |   |-- index.xml
|   |   |-- migrate-from-jekyll
|   |   |   `-- index.html
|   |   `-- postingan_1
|   |       `-- index.html
|   |-- categories
|   |   |-- development
|   |   |   |-- index.html
|   |   |   `-- index.xml
|   |   |-- golang
|   |   |   |-- index.html
|   |   |   `-- index.xml
|   |   `-- projects
|   |       |-- index.html
|   |       `-- index.xml
|   |-- css
|   |   `-- main.css
|   |-- img
|   |   `-- profile.png
|   |-- index.html
|   |-- index.xml
|   |-- js
|   |   |-- docs.min.js
|   |   |-- ie10-viewport-bug-workaround.js
|   |   `-- main.js
|   |-- projects
|   |   |-- index.html
|   |   |-- index.xml
|   |   `-- project_1
|   |       `-- index.html
|   |-- resume
|   |   |-- index.html
|   |   `-- index.xml
|   |-- sitemap.xml
|   `-- tags
|       |-- development
|       |   |-- index.html
|       |   `-- index.xml
|       |-- go
|       |   |-- index.html
|       |   `-- index.xml
|       |-- golang
|       |   |-- index.html
|       |   `-- index.xml
|       |-- hugo
|       |   |-- index.html
|       |   `-- index.xml
|       |-- projects
|       |   |-- index.html
|       |   `-- index.xml
|       |-- templates
|       |   |-- index.html
|       |   `-- index.xml
|       `-- themes
|           |-- index.html
|           `-- index.xml

Folder public ini yang akan dipindahkan ke cloud provider. Jika kita mengeksekusi command hugo di luar dari root folder site tersebut maka akan timbul notifikasi seperti di bawah ini:

Started building sites ...
=============================================================
Your rendered home page is blank: /index.html is zero-length
 * Did you specify a theme on the command-line or in your
   "config.toml" file?  (Current theme: "")
 * For more debugging information, run "hugo -v"
=============================================================
Built site for language en:
0 draft content
0 future content
0 expired content
0 pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
total in 5 ms

Postingan berikutnya saya akan membahas mengenai memindahkan folder public ke cloud provider seperti Amazon Web Services - AWS.


comments powered by Disqus