Deploy Website Hugo Kamu di Firebase

Andrianto Putro | Apr 7, 2022
Deploy Website Hugo Kamu di Firebase

Halo, sebelum membahas lebih lanjut kita perkenalkan dulu apa itu Hugo. Hugo merupakan Static Site Generator (SSG) yang cukup populer di dunia. SSG ini bisa kita gunakan untuk membuat website yang tidak perlu kita kontrol dengan kode, jadi dengan Hugo kita bisa membuat sebuah situs website yang sederhana dengan cepat dan mudah.

Prerequisite

  1. Hugo CLI
  2. Firebase CLI + Akun Firebase
  3. Pengetahuan Dasar CLI (Command Line Interface)

Membuat Project Firebase

  1. Kunjungi link berikut ini untuk membuat akun Firebase: https://firebase.google.com/
  2. Pastikan disini kalian sudah memiliki akun Google, karena untuk membuat akun Firebase sangat mudah hanya berbekal akun Google saja ya.
  3. Masuk menggunakan akun Google yang sudah disiapkan
  4. Masuk ke Console Firebase
  5. Klik pada menu “Add Project” dan masukkan nama project yang ingin kalian buat lalu klik “Continue”
  6. Dari sini kalian bisa pilih pakai Google Analytics kalian lalu “Create Project”

Instalasi

Sebelumnya disini saya pastikan bahwa kalian sudah memiliki file project Hugo yang sudah dibuat.

  1. Masuk ke folder project yang sudah dibuat dengan menggunakan terminal atau command prompt, lalu ketikkan perintah berikut :
npm install -g firebase-tools
  1. Setelah terinstall Firebase CLI, selanjutnya kalian harus login Firebase via terminal atau command prompt.
firebase login
  1. Masih di dalam project Hugo, kalian harus inisialisasi Firebase.
firebase init
  1. Nah dari sini akan ada beberapa pertanyaan yang harus kalian jawab, jadi jawab seperti ini.
    • Pilih hosting dipertanyaan fitur (ada 2 pilihan hosting, pilih keduanya)
    • Pilih project yang disiapkan / Use an existing project
    • Kamu akan diarahkan ke project yang sudah dibuat sebelumnya di Firebase Console, pilih project tersebut
    • Ada pertanyaan untuk set public directory, secara default akan di set public jadi langsung tekan Enter
    • Configure as a single page app ? Piiih No
    • Lalu yang terakhir ada dua pilihan untuk menimpa / overwrite file index.html dan 404.html , bisa kalian pilih Yes apabila file tersebut ingin diganti file baru oleh Firebase
    • Setup Firebase selesai
  2. Selanjutnya, kita akan membuat ulang file static public direktorinya.
hugo && firebase deploy

Deploy Hugo ke Firebase selesai, website kalian sekarang sudah online atau sudah bisa diakses via internet atau sudah public ya, meskipun URL website kalian masih URL random dari Firebase-nya. Namun kalian bisa custom domain kalian sendiri kok.

Terima kasih telah membaca artikel ini, jika ada pertanyaan silahkan komen di bawah ini.

comments powered by Disqus