Logo eza.web.id

Panduan Cepat Publikasi Website Hugo ke Firebase

rmdhnreza rmdhnreza
26 Januari 2025
6 menit untuk membaca
Hugo Tutorial
Table of Contents

Apa itu Firebase

Firebase adalah platform pengembangan aplikasi yang disediakan oleh Google. Platform ini menyediakan berbagai layanan seperti autentikasi, database real-time, analitik, dan penyimpanan file, yang semuanya dapat diintegrasikan dengan mudah ke dalam aplikasi web atau seluler. Dengan Firebase, pengembang dapat fokus pada logika aplikasi tanpa harus khawatir tentang infrastruktur backend.

Pada tutorial ini kita akan fokus ke firebase hosting, yaitu layanan hosting statis yang cepat dan aman untuk aplikasi web modern. Firebase Hosting memungkinkan penyebaran situs web dengan satu perintah, mendukung HTTPS secara default, dan menyediakan caching CDN global untuk memastikan performa optimal. Firebase Hosting sangat cocok untuk situs web statis, Progressive Web Apps (PWA), dan aplikasi berbasis framework seperti React, Angular, atau Hugo.

Sebelum melanjutkan, pastikan sudah memiliki akun Firebase. Jika belum, silakan buat akun di Firebase Console. Setelah itu, ikuti langkah-langkah berikut untuk mempublikasikan website Hugo ke Firebase Hosting.

Langkah-langkah Publikasi Website Hugo ke Firebase

1. Install Node.JS

  • Pastikan sudah menginstal Node.js. Jika belum, silakan unduh dan instal dari Node.js.
    Node.js adalah runtime JavaScript yang memungkinkan kita menjalankan JavaScript di luar browser.

    Install nodejs di Windows

    • Unduh installer Node.js dari nodejs.org.
    • Jalankan installer dan ikuti petunjuk instalasi.
    • Pastikan untuk mencentang opsi Add to PATH saat instalasi.

    Install nodejs di Linux menggunakan NVM

    • Buka terminal dan jalankan perintah berikut untuk menginstal NVM (Node Version Manager):
      Terminal window
      curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
    • Setelah itu, jalankan perintah berikut untuk memuat NVM ke dalam shell:
      Terminal window
      export NVM_DIR="$HOME/.nvm"
      [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # Loads nvm
      [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # Loads nvm bash_completion
      Install NVM
      Install NVM
      • Setelah itu, jalankan perintah berikut untuk menginstal Node.js menggunakan NVM: bash nvm install node
        Install Node
        Install Node
        - Setelah instalasi selesai, verifikasi apakah Node.js telah terpasang dengan benar. Jalankan perintah berikut: bash node -v npm -v #### Install nodejs di MacOS
    • Buka terminal dan jalankan perintah berikut untuk menginstal Node.js menggunakan Homebrew:
      Terminal window
      brew install node
    • Setelah instalasi selesai, verifikasi apakah Node.js telah terpasang dengan benar. Jalankan perintah berikut:
      Terminal window
      node -v
      npm -v
      Node & NPM Version
      Node & NPM Version

2. Install Firebase CLI

  • Setelah Node.js terinstal, kita perlu menginstal Firebase CLI (Command Line Interface) untuk mengelola proyek Firebase dari terminal. Jalankan perintah berikut:
Terminal window
npm install -g firebase-tools

Pada gambar dibawah menggunakan pnpm tetapi sama saja dengan npm atau yarn.

Install firebase-tools
Install firebase-tools
  • Setelah instalasi selesai, verifikasi apakah Firebase CLI telah terpasang dengan benar. Jalankan perintah berikut:
Terminal window
firebase --version
Check Firebase Version
Check Firebase Version

3. Login ke Firebase

  • Setelah Firebase CLI terinstal, kita perlu login ke akun Firebase kita. Jalankan perintah berikut:
Terminal window
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.

Login Firebase
Login Firebase
  • Setelah itu, ikuti petunjuk di terminal untuk menyelesaikan proses login. Ini akan membuka jendela browser untuk mengautentikasi akun Firebase kita.
Login Berhasil
Login Berhasil

4. Buat Proyek Firebase

Firebase Init

  • Setelah login, kita perlu membuat proyek Firebase baru. Jalankan perintah berikut:
Terminal window
firebase init

Perintah ini akan memulai proses konfigurasi Firebase Hosting.

  1. Pilih menu Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
  2. Pilih proyek Firebase yang sudah ada atau buat proyek baru.
  3. Pilih opsi Use an existing project jika sudah memiliki proyek Firebase, atau pilih Create a new project untuk membuat proyek baru.
  4. Pilih opsi Public directory dan masukkan nama direktori output Hugo, default direktori output Hugo adalah public.
  5. Pilih opsi Configure as a single-page app (rewrite all urls to /index.html) pilih No.
  6. Pilih opsi Set up automatic builds and deploys with GitHub? (Y/n) pilih No.
  7. Pilih opsi Overwrite index.html? (Y/n) jika ingin menimpa file index.html pilih No.
  8. Setelah itu, Firebase akan membuat file konfigurasi firebase.json dan .firebaserc di direktori proyek kita. File firebase.json berisi konfigurasi untuk Firebase Hosting, sedangkan .firebaserc berisi informasi proyek Firebase kita. Pastikan untuk memeriksa dan mengedit file ini sesuai kebutuhan.
~/reza/firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [],
    "redirects": [],
    "headers": []
  }
}

public: direktori output Hugo yang berisi file statis website kita.
ignore: daftar file dan direktori yang akan diabaikan saat proses deploy.
rewrites: daftar aturan untuk mengalihkan URL ke file tertentu.
redirects: daftar aturan untuk mengalihkan URL ke URL lain.
headers: daftar aturan untuk menambahkan header HTTP ke respons.

Untuk full konfigurasi silakan lihat dokumentasi Firebase Hosting.

5. Build Website Hugo

  • Setelah konfigurasi selesai, kita perlu membangun (build) website Hugo kita. Jalankan perintah berikut:
Terminal window
hugo
  • Perintah ini akan menghasilkan file statis website kita di dalam direktori public.
  • Setelah proses build selesai, kita dapat memeriksa hasilnya dengan membuka file index.html di dalam direktori public menggunakan browser.
  • Jika website sudah sesuai, kita siap untuk mempublikasikannya ke Firebase Hosting.

6. Deploy ke Firebase Hosting

  • Setelah website sudah siap, kita dapat mempublikasikannya ke Firebase Hosting. Jalankan perintah berikut:
Terminal window
firebase deploy
  • Setelah proses deploy selesai, Firebase akan memberikan URL untuk mengakses website kita. URL ini biasanya berbentuk https://<project-id>.web.app atau https://<project-id>.firebaseapp.com.
  • Buka URL tersebut di browser untuk melihat website kita yang sudah dipublikasikan.

    Jika ingin mengupdate website, cukup lakukan perubahan pada konten website, lalu jalankan perintah hugo dan firebase deploy lagi.

7. Konfigurasi Hugo

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

  1. Edit file hugo.toml di root folder proyek Hugo kita
baseURL = "https://<project-id>.web.app/"
languageCode = "en-us"
title = "Eza"
theme = "PaperMod"
  1. Build kembali situs hugo dengan perintah hugo
  2. Unggah folder public dengan perintah firebase deploy
  3. Setelah itu, kita dapat mengakses website kita di URL https://<project-id>.web.app/.
Hugo Website Home
Hugo Website Home
Hugo Website Page
Hugo Website Page

Kesimpulan

Dengan mengikuti langkah-langkah di atas, kita telah berhasil mempublikasikan website Hugo ke Firebase Hosting. Firebase Hosting adalah solusi yang cepat dan aman untuk menyebarkan aplikasi web statis. Dengan Firebase, kita dapat dengan mudah mengelola dan memperbarui website kita kapan saja. Jika ada pertanyaan atau masalah, jangan ragu untuk menghubungi saya melalui kolom komentar di bawah ini.