Cara Install dan Konfigurasi Hugo Site Generator di Ubuntu 18.04

Hugo adalah framework free and open-source yang ditulis dalam bahasa Go yang dapat digunakan untuk membuat situs web dengan mudah. Hugo adalah generator situs statis yang sederhana, cepat dan aman, Anda tidak memerlukan database untuk menjalankannya.

Hugo mendukung jenis konten tak terbatas, taksonomi, menu, konten dinamis yang digerakkan oleh API, dan banyak lagi, semua tanpa plugin. Hugo hadir dengan serangkaian fitur yang kaya termasuk, Manajemen Konten yang Kokoh, Template yang Terpasang, Shortcode, Output Custom, Multilingual dan banyak lagi.

Dalam tutorial ini, kita akan belajar cara menginstal Hugo di server Ubuntu 18.04 LTS.

Prasyarat

• Sistem yang menjalankan sistem Ubuntu 18.04.
• Memiliki IP yang menunjuk ke server
• Masuk sebagai user non-root dengan hak sudo.

Sebelum Mulai

Perbarui paket sistem operasi Anda (software). Ini adalah langkah pertama yang penting karena memastikan Anda memiliki pembaruan terbaru dan perbaikan keamanan untuk paket perangkat lunak default sistem operasi Anda:

sudo apt update && sudo apt upgrade -y

Setelah server diperbarui, restart sistem Anda untuk menerapkan semua perubahan

Install Hugo

Secara default, versi terbaru Hugo tidak tersedia di repositori default Ubuntu 18.04. Jadi, Anda perlu mengunduhnya dari repositori Git. Anda dapat mengunduhnya dengan perintah wget seperti berikut:

wget https://github.com/gohugoio/hugo/releases/download/v0.58.2/hugo_0.58.2_Linux-64bit.deb

Setelah download selesai, install Hugo dengan perintah dpkg berikut:

dpkg -i hugo_0.58.2_Linux-64bit.deb

Jika Anda mendapatkan dependency error maka jalankan perintah berikut untuk menyelesaikan dependensi:

apt-get install -f

Selanjutnya, Anda dapat memeriksa versi Hugo dengan perintah berikut:

hugo version

Anda akan mendapatkan output kurang lebih seperti :

Hugo Static Site Generator v0.58.2-253E5FDC linux/amd64 BuildDate: 2019-09-13T08:05:59Z

Anda juga dapat melihat daftar opsi yang tersedia dengan Hugo dengan menjalankan perintah berikut:

hugo --help

output :

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  config      Print the site configuration
  convert     Convert your content to different formats
  deploy      Deploy your site to a Cloud provider.
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  mod         Various Hugo Modules helpers.
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

Flags:
  -b, --baseURL string         hostname (and path) to the root, e.g. http://spf13.com/
  -D, --buildDrafts            include content marked as draft
  -E, --buildExpired           include expired content
  -F, --buildFuture            include content with publishdate in the future
      --cacheDir string        filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
      --cleanDestinationDir    remove files from destination not found in static directories
      --config string          config file (default is path/config.yaml|json|toml)
      --configDir string       config dir (default "config")
  -c, --contentDir string      filesystem path to content directory
      --debug                  debug output
  -d, --destination string     filesystem path to write files to
      --disableKinds strings   disable different kind of pages (home, RSS etc.)
      --enableGitInfo          add Git revision, date and author info to the pages
  -e, --environment string     build environment
      --forceSyncStatic        copy all files when static is changed.
      --gc                     enable to run some cleanup tasks (remove unused cache files) after the build
  -h, --help                   help for hugo
      --i18n-warnings          print missing translations
      --ignoreCache            ignores the cache directory
      --ignoreVendor           ignores any _vendor directory
  -l, --layoutDir string       filesystem path to layout directory
      --log                    enable Logging
      --logFile string         log File path (if set, logging enabled automatically)
      --minify                 minify any supported output format (HTML, XML etc.)
      --noChmod                don't sync permission mode of files
      --noTimes                don't sync modification time of files
      --path-warnings          print warnings on duplicate target paths etc.
      --quiet                  build in quiet mode
      --renderToMemory         render to memory (only useful for benchmark testing)
  -s, --source string          filesystem path to read files relative from
      --templateMetrics        display metrics about template executions
      --templateMetricsHints   calculate some improvement hints when combined with --templateMetrics
  -t, --theme strings          themes to use (located in /themes/THEMENAME/)
      --themesDir string       filesystem path to themes directory
      --trace file             write trace to file (not useful in general)
  -v, --verbose                verbose output
      --verboseLog             verbose logging
  -w, --watch                  watch filesystem for changes and recreate as needed

Setelah selesai, Anda dapat melanjutkan ke langkah berikutnya.

Membuat Website dengan Hugo

Hugo sekarang terinstal, saatnya untuk membuat situs web dan konten dengan Hugo.

Anda dapat membuat situs web baru bernama test.example.com dengan menjalankan perintah berikut:

hugo new site test.example.com

Setelah situs web berhasil dibuat, Anda akan mendapatkan hasil berikut:

Congratulations! Your new Hugo site is created in /root/test.example.com.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme " command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new /.".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Anda juga dapat membuat daftar semua file yang dibuat di bawah situs web Anda dengan perintah berikut:

ls test.example.com/

Anda akan melihat output berikut:

archetypes  config.toml  content  data  layouts  static  themes

Buat halaman About dan Postingan

Sekarang, ubah direktori ke situs web Anda dan buat halaman about.md dengan perintah berikut:

cd test.example.com
 hugo new about.md

Anda akan melihat output berikut:

/root/test.example.com/content/about.md created

Selanjutnya, buka file about.md dan tambahkan beberapa konten:

nano content/about.md

Buat perubahan berikut:

---
title: "About"
date: 2019-09-10T06:57:08Z
draft: false
---

Halo, selamat datang di blog ini. 

hugo new post/first.md

Anda akan melihat output berikut:

/root/test.example.com/content/post/first.md created

Kemudian, buat posting pertama Anda dengan perintah berikut:

nano content/post/first.md

Anda akan melihat output berikut:

---
title: "First"
date: 2019-09-10T06:58:51Z
draft: false
---

## Ini adalah postingan pertama

Postingan pertama

Siapkan Tema Pertama Anda

Halaman About dan posting blog sekarang sudah dibuat, saatnya untuk mengatur tema pertama Anda.

Pertama, ubah direktori menjadi themes dan unduh hugo-strata-theme dengan perintah berikut:

cd themes
 wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip

Setelah diunduh, ekstrak tema yang diunduh dengan perintah berikut:

unzip master.zip

Selanjutnya, ganti nama tema yang diekstraksi dengan perintah mv seperti yang ditunjukkan di bawah ini:

mv hugo-strata-theme-master hugo-strata-theme

Selanjutnya, Anda perlu menyalin isi contoh file config.toml dari themes/hugo-strata-theme ke file config.toml situs Anda yang terletak di /root/test.example.com/config.toml.

Anda dapat melakukannya dengan perintah berikut:

cat hugo-strata-theme/exampleSite/config.toml > ../config.toml

Selanjutnya, perbarui variabel baseurl dan sertakan halaman baru Anda ke dalam navigasi tema ini di file config.toml seperti yang ditunjukkan di bawah ini:

nano ../config.toml

Perbarui base URL seperti yang ditunjukkan di bawah ini:

baseurl = "/"

Tambahkan juga baris berikut untuk memasukkan halaman baru tentang Anda:

 [[menu.main]]
  name = "About"
  url  = "about"
  weight = 5

Simpan dan tutup file setelah Anda selesai.

Selanjutnya, Anda juga perlu memperbarui tata letak halaman arahan Anda dengan tata letak template tema yang terletak di themes/hugo-strata-theme/layouts/index.html menjadi test.example.com/layouts/index.html:

nano /root/test.example.com/layouts/index.html

Tambahkan konten berikut:

{{ define "main" }}
        {{ if not .Site.Params.about.hide }}
                {{ partial "about" . }}
        {{ end }}

        {{ if not .Site.Params.portfolio.hide }}
                {{ partial "portfolio" . }}
        {{ end }}

        {{ if not .Site.Params.recentposts.hide }}
                {{ partial "recent-posts" . }}
        {{ end }}

        {{ if not .Site.Params.contact.hide }}
                {{ partial "contact" . }}
        {{ end }}
{{ end }}

Simpan dan tutup file setelah Anda selesai.

Setelah selesai, Anda dapat melanjutkan ke langkah berikutnya.

Bangun Situs Web Anda

Tema Anda sekarang dikonfigurasi untuk situs web. Saatnya membangun situs web Anda. Untuk melakukannya, ubah direktori ke situs web Anda dan buat situs dengan perintah berikut:

cd /root/test.example.com
 hugo

Anda akan melihat output :

                   | EN  
+------------------+----+
  Pages            | 17  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  5  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 18 ms

Sekarang, start server Hugo Anda dan bind dengan alamat IP server Anda dengan menjalankan perintah berikut:

hugo server --bind=0.0.0.0 --baseUrl=http://server-atau-domain -D -F

Setelah server mulai berhasil, Anda akan melihat output berikut:

                   | EN  
+------------------+----+
  Pages            | 17  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  5  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 28 ms
Watching for changes in /root/test.example.com/{content,data,layouts,static,themes}
Watching for config changes in /root/test.example.com/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://example.com/ (bind address 0.0.0.0)
Press Ctrl+C to stop

Setelah selesai, Anda dapat melanjutkan untuk mengakses web interface Hugo.

Akses Server Hugo

Server Hugo sekarang mulai dan listen pada port 1313. Selanjutnya, buka web browser dan ketik URL http://example.com:1313. Anda akan diarahkan ke dasbor server Hugo Anda seperti yang ditunjukkan di bawah ini:

Kesimpulan

Dalam tutorial di atas, kami belajar cara menginstal server Hugo di server Ubuntu 18.04. Kami juga telah belajar cara membuat situs dengan tentang halaman dan tema dengan Hugo. Untuk informasi lebih lanjut tentang Hugo, Anda dapat mengunjungi dokumentasi resmi Hugo di Hugo Doc.