Hugo Firebase

Hugo, sebagai salah satu static site generator terpopuler, menawarkan kecepatan dan fleksibilitas luar biasa dalam membangun situs web. Sementara itu, Firebase Hosting menyediakan platform yang andal dan cepat untuk mendeploy situs statis. Kombinasi keduanya akan menghasilkan situs web yang performanya optimal.

Apa yang Dibutuhkan?

1. Akun Firebase (Akun Google): Untuk membuat project di console.firebase.google.com.
2. Project Hugo: Pastikan memiliki project Hugo yang siap untuk di-deploy. Jika belum, baca terlebih dahulu artikel Cara Membuat Website Statis dengan Hugo untuk Pemula

Node.js dan npm (atau pnpm/yarn): Diperlukan untuk menjalankan Firebase CLI.

Instalasi Node.js

Node.js adalah runtime JavaScript yang memungkinkan kita menjalankan JavaScript di luar browser. npm (Node Package Manager) adalah alat untuk mengelola paket-paket Node.js.

1. Instalasi Node.js di Linux

1. Update Sistem

1

sudo apt update && sudo apt upgrade -y

2. Instalasi Node.js dengan nvm (Node Version Manager):

• Install NVM:

1

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

• Aktifkan NVM:

1

source $HOME/.bashrc

• Instal Node.js (Versi terbaru untuk LTS)

1

nvm install lts

3. Verifikasi instalasi

1
2

node -v
npm -v

2. Instalasi Node.js di MacOS

1. Install Homebrew (jika belum terinstal):

1

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Instal Node.js menggunakan Homebrew:

1

brew install node

3. Verifikasi instalasi

1
2

node -v
npm -v

3. Instal Node.js di Windows

1. Unduh Installer Node.js: Kunjungi situs resmi Node.js di nodejs.org dan unduh versi LTS.
2. Jalankan Instaler: Ikuti wizard instalasi dan pastikan opsi untuk menambahkan Node.js ke PATH dicentang.
3. Verifikasi instalasi: Buka CMD/PowerShell/Terminal, lalu ketik:

1
2

node -v
npm -v

Instalasi Firebase CLI

1. Instal Firebase CLI secara global (pada gambar menggunakan pnpm, tetapi sama saja.)

1

npm install -g firebase-tools

2. Verifikasi instalasi:

1

firebase --version

3. Login ke Firebase

1

firebase login

Nanti akan muncul pilihan Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? (Y/n) cukup pilih n saja.

Default browser otomatis akan terbuka dan login menggunakan akun Google kamu di browser, jika sudah maka akan ada notif Firebase CLI Login Successful pada browser dan Success! Logged in as [email protected] pada terminal.

Hosting website ke Firebase

Pastikan kalian sudah build hugo website kalian dengan mengetik perintah hugo pada direktori website yang akan di hosting ke Firebase.
Setelah itu akan ada folder baru yang bernama public setelah menjalankan perintah hugo

1. Firebase init

• Jalankan perintah firebase init Perintah ini akan memulai proses konfigurasi Firebase Hosting.
  • Pilih menu Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
    Gunakan tombol panah untuk menavigasi menu, lalu pilih opsi ini dengan SPACE dan tekan ENTER.

• Please select an option: Create a new project
  Jika belum memiliki project Firebase, pilih opsi ini untuk membuat project baru.

• Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]: NamaProject
  Sistem akan meminta ID project. Masukkan nama project yang diinginkan, misalnya eza-web-id. Perlu diingat, ID project ini tidak dapat diubah setelah ditentukan.

• What would you like to call your project? (defaults to your project ID) (NamaProject): ENTER
  Sistem akan menanyakan nama project. Secara default, nama ini akan sama dengan ID project. Tekan ENTER untuk melanjutkan tanpa perubahan.

• What do you want to use as your public directory? (public): ENTER
  Cukup tekan ENTER. Direktori default public akan digunakan sebagai folder tempat menyimpan file hasil build Hugo.

• Configure as a single-page app (rewrite all urls to /index.html)? (y/N) N
  Situs Hugo tidak memerlukan pengaturan ini karena setiap halaman sudah memiliki file HTML-nya sendiri.

• Set up automatic builds and deploys with GitHub? (y/N) N
  Opsi ini dapat dilewati jika tidak memerlukan integrasi dengan GitHub pada tahap ini.

• File public/404.html already exists. Overwrite? (y/N) N

• File public/index.html already exists. Overwrite? (y/N) N

Jika file public/404.html atau public/index.html sudah ada, Firebase akan menanyakan apakah ingin menimpa file tersebut. Ketik N dan tekan ENTER untuk mempertahankan file yang ada.

2. Firebase JSON

Setelah semua langkah selesai, Firebase akan menghasilkan file firebase.json dengan struktur seperti berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [],
    "redirects": [],
    "headers": []
  }
}

Penjelasan Konfigurasi

• public: Menunjukkan folder tempat file hasil build Hugo berada. Default-nya adalah public.
• ignore: File atau folder yang tidak akan disertakan dalam hosting, seperti konfigurasi Firebase (firebase.json), file tersembunyi (.*), dan folder node_modules.
• rewrites: Tidak ada aturan penulisan ulang karena Hugo menghasilkan file HTML untuk setiap halaman.
• redirects: Kosong karena tidak ada pengalihan khusus.
• headers: Kosong karena belum ada pengaturan header tertentu.

File ini adalah inti dari konfigurasi hosting Firebase. Jika diperlukan, aturan tambahan seperti pengalihan (redirects) atau header dapat ditambahkan secara manual.

Untuk dokumentasi lengkapnya, bisa kunjungi https://firebase.google.com/docs/hosting/full-config

3. Firebase deploy

• Tujuan Perintah firebase deploy
  Perintah firebase deploy digunakan untuk mengunggah file dari folder public ke server Firebase Hosting. Folder public ini adalah direktori yang dihasilkan oleh Hugo setelah proses build, berisi file statis seperti HTML, CSS, JavaScript, dan aset lainnya.

  • Pastikan Folder public Sudah Berisi Hasil Build Hugo
    Sebelum menjalankan firebase deploy, pastikan file dan folder hasil build Hugo sudah berada di direktori public. Untuk memastikan, jalankan perintah hugo di root project Hugo:
  • Jalankan Perintah firebase deploy
    Setelah hasil build tersedia, jalankan perintah berikut di terminal: firebase deploy
  • Proses yang Terjadi Saat firebase deploy
    1. Firebase memeriksa file konfigurasi firebase.json untuk menentukan folder publik (public secara default).
    2. Firebase memindai semua file di dalam folder public.
    3. Firebase mengunggah file ke server Firebase Hosting.
    4. Firebase menerapkan aturan atau pengaturan khusus berdasarkan konfigurasi di firebase.json (seperti pengalihan atau header jika ada).
  • Hasil akhir
    Setelah proses deploy selesai, Firebase akan menampilkan URL situs di terminal, seperti:

1
2
3
4

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/NamaProject/hosting
Hosting URL: https://NamaProject.web.app

Konfigurasi Hugo

Setelah mendapat Hosting URL, edit file hugo.toml dan ubah baseURL dengan Hosting URL yang didapat sebelumnya

1

baseURL = https://eza-web-id.web.app

1. Edit file hugo.toml

2. Build kembali situs hugo dengan perintah hugo
3. Unggah folder public dengan perintah firebase deploy

Penutup

Langkah-langkah dalam panduan ini memberikan cara praktis untuk menghosting situs Hugo di Firebase dengan efisien. Dengan menawarkan platform yang andal dan mendukung performa tinggi, Firebase menjadi pilihan ideal untuk project statis.

Panduan ini dirancang untuk mempermudah proses serta membantu mencapai hasil yang optimal. Semoga informasi ini bermanfaat dan dapat mendukung kesuksesan dalam mengelola hosting situs web menggunakan Hugo dan Firebase.