DEV Community

Cover image for Cara instalasi HUGO dan perintah dasar penggunaan
Erol Joudy
Erol Joudy

Posted on • Originally published at blog.erol.dev

Cara instalasi HUGO dan perintah dasar penggunaan

Hugo adalah sebuah static site generator yang menggunakan Golang sebagai bahasa pemrograman.

Instalasi

Unduh versi terbaru Hugo dengan cara berikut.

Untuk Ubuntu/Debian

curl -s https://api.github.com/repos/gohugoio/hugo/releases/latest \
 | grep  browser_download_url \
 | grep Linux-64bit.deb \
 | grep -v extended \
 | cut -d '"' -f 4 \
 | wget -i -
Enter fullscreen mode Exit fullscreen mode

Kemudian jalankan perintah dibawah ini, untuk melakukan instalasi.

sudo dpkg -i hugo*_Linux-64bit.deb
Enter fullscreen mode Exit fullscreen mode

Konfirmasi apakah Hugo sudah terpasang lewat perintah ini.

hugo version
Enter fullscreen mode Exit fullscreen mode

Hugo Extended

Unduh versi terbaru Hugo Extended dengan cara berikut.

Untuk Ubuntu/Debian

curl -s https://api.github.com/repos/gohugoio/hugo/releases/latest \
 | grep  browser_download_url \
 | grep Linux-64bit.deb \
 | grep extended \
 | cut -d '"' -f 4 \
 | wget -i -
Enter fullscreen mode Exit fullscreen mode

Kemudian jalankan perintah dibawah ini, untuk melakukan instalasi.

sudo dpkg -i hugo*_Linux-64bit.deb
Enter fullscreen mode Exit fullscreen mode

Konfirmasi apakah Hugo sudah terpasang lewat perintah ini.

hugo version
Enter fullscreen mode Exit fullscreen mode

Perintah Umum

Untuk bantuan ketik hugo help.

Local server

hugo server
Enter fullscreen mode Exit fullscreen mode

Membuat site baru

Ganti PROJECT_NAME dengan nama project atau nama website. Jalankan perintah dibawah secara berurutan.

hugo new site PROJECT_NAME
Enter fullscreen mode Exit fullscreen mode
hugo build
Enter fullscreen mode Exit fullscreen mode

Membuat konten baru

hugo new <PATH>/index.md
Enter fullscreen mode Exit fullscreen mode

Install theme baru

Menyalin atau git clone sebuah theme pada folder namaproject/themes.

Install dari Git

cd mynewsite
cd themes
git clone <ALAMAT_GIT_REPO_THEME>
Enter fullscreen mode Exit fullscreen mode

Install dari file .zip

Ekstrak semua file yang ada di file .zip yg diunduh, ke dalam folder themes. Struktur folder nya akan jadi seperti ini mynewsite/themes/nama-theme-yg-diunduh


Deployment

Persiapan

  1. Pastikan publishDir = "public" di file config.toml dengan contoh sebagai berikut.
   baseURL = "/"
   themesDir = "themes"
   publishDir = "public"
Enter fullscreen mode Exit fullscreen mode
  1. Jalankan hugo

Eksekusi kembali poin 2, tiap kali ada perubahan pada kode.


Firebase

  1. Pastikan "public": "public" di file firebase.json sudah sama dengan publishDir di file config.toml.
  2. Login dengan firebase login
  3. Aktifkan dengan firebase init
  4. Edit file firebase.json dan tambahkan baris berikut.
 .
     "hosting": {
         "site": "nama_project",
         .
     }
Enter fullscreen mode Exit fullscreen mode
  1. Akhiri dengan firebase deploy --only hosting:nama_project

Untuk re-deploy saat ada perubahan pada kode, jalankan perintah,

Lewat PowerShell

hugo; firebase deploy --only hosting:nama_project
Enter fullscreen mode Exit fullscreen mode

Lewat *nix terminal

hugo && firebase deploy --only hosting:nama_project
Enter fullscreen mode Exit fullscreen mode

Netlify

  1. Buat file netlify.toml pada root dan salin kode berikut.
    [build]
    publish = "public"
    command = "hugo --gc --minify"

    [context.production.environment]
    HUGO_VERSION = "0.63.2"
    HUGO_ENV = "production"
    HUGO_ENABLEGITINFO = "true"

    [context.split1]
    command = "hugo --gc --minify --enableGitInfo"

    [context.split1.environment]
    HUGO_VERSION = "0.63.2"
    HUGO_ENV = "production"

    #[context.deploy-preview]
    #command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

    [context.deploy-preview.environment]
    HUGO_VERSION = "0.63.2"

    [context.branch-deploy]
    command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

    [context.branch-deploy.environment]
    HUGO_VERSION = "0.63.2"

    [context.next.environment]
    HUGO_ENABLEGITINFO = "true"
Enter fullscreen mode Exit fullscreen mode
  1. Pastikan nilai HUGO_VERSION sudah sama dengan versi Hugo yang terpasang. Cek dengan perintah hugo version lewat terminal.
  2. Kemudian pastikan juga nilai publish = "public" di file netlify.toml sudah sama dengan publishDir di file config.toml.
  3. Buat site baru dengan cara deploy manual, jalankan perintah berikut.
netlify sites:create --manual --with-ci
Enter fullscreen mode Exit fullscreen mode
  1. Pada langkah Your build command (hugo build/yarn run build/etc): ketikkan hugo --gc --minify atau cukup dengan hugo deploy.
  2. Ikuti langkah selanjutnya.

Untuk mengupdate otomatis, jalankan git push -u origin master tiap kali ada perubahan pada kode.

Discussion (0)