Cara Membuat Website Di Firebase Console Lewat CLI

5/5 – (5 votes)

Cara Membuat Website Di Firebase Console Lewat CLI

Cara membuat website di Firebase Console lewat CLI – Bicara tentang membuat website atau blog, mungkin sebagian dari kita sudah mengenal platform yang cukup populer seperti Blogger ataupun WordPress.

Dari kedua platform ini, keduanya sama-sama meng-hosting file html, css, dan juga javascript untuk kebutuhan website atau blog yang akan digunakan.

Namun kadang hosting yang diperlukan untuk membuat website atau blog sendiri bisa dikatakan agak mahal, dan cukup menguras budget. Karena memang biasanya hosting yang dibeli ini, kerap dipakai untuk para pemilik blog yang sudah memiliki template dan topik dari artikel untuk dibagikan.

Sedangkan untuk mereka yang ingin membuat web statis atau sekedar untuk portofolio, rasanya hosting yang dibutuhkan tidaklah begitu besar, dan tidak ditargetkan untuk membagikan artikel atau lain sebagainya.

Read More

Itulah mengapa, kebutuhan akan web statis kini semakin meningkat. Terlebih lagi, banyak para pemilik website yang memilih untuk mendesain web yang mereka bangun sesuai dengan keinginan mereka.

Karena hal ini, akhirnya Google mengeluarkan platform berupa Firebase Console yang kerap digunakan untuk membuat web statis, ataupun aplikasi berbasis Android.

Walaupun begitu, kamu juga bisa kok men-deploy ataupun mempublikasikan website statis kamu di Firebase Console dengan hosting gratis yang disediakan oleh Google dengan cara yang mudah.

Cara Membuat Website di Firebase Console lewat CLI

Dan untuk kamu yang ingin membuat website statis di Firebase CLI, kamu bisa mengikuti langkah-langkah berikut untuk men-deploy web statis pertama kamu.

1. Siapkan File yang Dibutuhkan

Langkah pertama yang kamu butuhkan adalah menyiapkan file atau bahan yang dibutuhkan, seperti.

  • Aplikasi Code Editor (Bracket, Visual Studio Code, CudaText Editor, Notepad++)
  • File HTML, CSS, Gambar, atau Javascript
  • Firebase Console CLIDownload

Adapun dari bahan yang disebutkan di atas, pada tutorial ini saya menggunakan code editor berupa Bracket.

2. Buat File Directory (root) untuk File HTML dan CSS

Kemudian buat directory untuk menyimpan project web statis yang akan dibuat. Misalnya, saya buat di directory C\Documents\ dengan nama folder web-statis-saya kurang lebih, akan seperti ini.

buat-root-directory-terlebih-dahulu
via jaditau.my.id

Nantinya, directory ini akan menjadi tempat kita menyimpan file dari website statis yang akan kita buat.

3. Jalankan Firebase CLI

Jika sudah, kamu bisa langsung memindahkan Firebase Console CLI ke directory yang sudah kamu buat tadi.

copy-firebase-cli-ke-root-directory
via jaditau.my.id

Cara ini digunakan untuk mempermudah Firebase CLI untuk membaca directory tempat kita akan membuat web statis. Lanjut untuk buka Firebase CLI tadi dengan cara klik kanan > Run as Administrator dan tunggu sampai tampilannya berubah menjadi seperti ini.

buka-aplikasi-firebase-cli
via jaditau.my.id

4. Login ke Firebase CLI

Karena sebelumnya saya sudah login dan kemudian logout, maka munculnya menjadi seperti ini. Silakan kamu pilih pada opsi jika muncul pertanyaan seperti di atas.

Dan untuk login, kamu bisa mengetikkan perintah

  • firebase login
jalankan-perintah-firebase-login
via jaditau.my.id

Nantinya kamu akan diarahkan ke browser untuk login menggunakan email yang sudah didaftarkan ke Firebase Console.

halaman-login-ke-firebase-cli
via jaditau.my.id

Lanjut untuk memilih email yang sudah terdaftar tadi, dan kemudian klik pada izinkan

berikan-perizinan-pada-firebase-cli
via jaditau.my.id

Jika semuanya sudah selesai, maka kamu akan melihat tampilan seperti ini.

verifikasi-login-firebase-cli-berhasil
via jaditau.my.id

Kamu bisa langsung close tab pada laman tersebut, atau lansung pindah ke Firebase CLI.

5. Buat Project di Firebase CLI

Langkah selanjutnya adalah kita akan membuat project pertama kita di Firebase Console. Caranya sangat mudah, tinggal mengetikkan perintah

  • firebase projects:create
buat-project-di-firebase-CLI
via jaditau.my.id

Dan kemudian, kamu akan diminta untuk memberikan nama project dan id project sesuai keinginanmu. Biasanya, saya akan menyamakan antara nama project dan juga id project.

berikan-nama-project-baru-di-firebase-cli
via jaditau.my.id

Dan jika tampilannya sudah seperti ini, maka project yang kita buat sudah sukses dan bisa digunakan untuk meng-hosting website statis yang akan kita buat.

6. Masuk ke Local

Setelah project berhasil dibuat, maka selanjutnya kita akan pindah ke directory yang kita buat di komputer/laptop atau dikenal dengan local file. Caranya, cukup ketikkan

  • cd \directory

Karena tadi directory yang kita buat adalah di Documents\web-statis-saya, maka perintah yang digunakan adalah cd C:\Users\Heyaiz\Documents\web-statis-saya

pindah-ke-directory-local-yang-sudah-dibuat
via jaditau.my.id

7. Jalankan Firebase Init

Setelah berpindah directory, kita akan langsung menjalankan firebase guna memberikan perintah jika kita baru saja membuat project baru di Firebase Console.

Kamu bisa menjalankan perintah

  • firebase init

Lalu pilih opsi Hosting: Configure Files for Firebase Hosting and (optionally) set up GitHub Action deploys dan tekan tombol spasi untuk memilih, lalu tekan enter.

jalankan-firebase-lewat-firebase-init
via jaditau.my.id

Nantinya akan muncul Project Setup. Di sini, kamu bisa memilih use an existing project lalu tekan enter

project-setup-firebase-cli
via jaditau.my.id

Lalu pilih directory yang baru saja kita buat tadi, yakni webstatisfaiz

pilih-project-firebase-console
via jaditau.my.id

Setelah itu kamu akan melakukan Hosting Setup. Untuk mempersingkat, biasanya saya menggunakan opsi berikut ini.

  • What do you want to use as your public directory? (public) – Enter
  • Configure as a single-page app (rewrite all urls to /index.html)? – Y
  • Set up automatic builds and deploys with GitHub? – N
hosting-setup-firebase-console-cli
via jaditau.my.id

Tunggu sampai proses nya selesai.

8. Masuk ke Project Firebase yang Sudah Dibuat

Setelah proses setup selesai, maka selanjutnya kita akan masuk kedalam file project kita dengan perintah

  • firebase use (nama project)

Karena kita membuat project dengan nama webstatisfaiz, maka perintah yang saya gunakan adalah firebase use webstatisfaiz

masuk-ke-project-firebase
via jaditau.my.id

Sampai sini, kamu sudah berhasil membuat project, dan masuk kedalam file project dari Firebase Console yang kamu buat. Dan kita tinggal lanjut ke langkah selanjutnya.

9. Tambahkan File ke Directory root

Langkah selanjutnya adalah kamu bisa kembali masuk ke directory root yang kamu buat di komputer atau lokal kalian. Di sini, kamu bisa menambahkan file html yang kamu buat, atau bahkan file lain seperti CSS dan lain sebagainya.

Kamu bisa menambahkannya pada folder Public yang ada di directory.

tambahkan-file-ke-directory-lokal
via jaditau.my.id

Kamu bisa juga kok me-replace file index.html yang sudah ada, dengan yang kamu punya.

10. Edit File HTML untuk Website Statis

Barulah sampai sini kamu tinggal melakukan pegeditan file index.html yang kamu miliki, dengan menggunakan aplikasi code editor yang kamu punya, seperti di sini saya menggunakan Brackets.

proses-edit-file-html-untuk-web-statis
via jaditau.my.id

Silakan ber-kreasi sesuka keinginanmu, kamu bisa menambahkan laman, css, javascript, atau gambar yang di embed melalui image url, ataupun pada directory lokal.

Jangan lupa untuk menyimpan tiap perubahan untuk melihat perubahan dari file yang kamu buat. Atau, kamu juga bisa mengetikkan perintah firebase serve untuk mendapatkan link localhost untuk melihat preview nya.

11. Publikasikan Website

Setelah proses perubahan atau peng-editan selesai, langkah terakhir adalah men-deploy atau mempublikasikan web statis yang sudah kita buat, agar bisa kita bagikan link-nya dan diakses dari mana saja.

Langsung saja kembali ke Firebase CLI, lalu ketikkan perintah

  • firebase deploy

Dan jika tampilannya sudah seperti ini, maka kamu sudah berhasil untuk membuat website statis pertama kamu.

deploy-web-statis-di-firebase-console-cli
via jaditau.my.id

Dan bisa dilihat, untuk web statis yang saya buat sudah bisa di akses pada laman webstatisfaiz.web.app. Untuk itu, kamu perlu memperhatikan Project Name kamu, sebab Project Name akan menjadi domain web kamu ketika live.

Cara-Buat-Web-Statis-di-Firebase-Console-lewat-CLI
via jaditau.my.id

Gimana, gampang banget kan?

Kesimpulan

Walaupun website yang dibangun merupakan statis, tentunya kamu bisa melakukan modifikasi pada laman, teks, ataupun konten yang ada di dalamnya menggunakan file html yang kamu buat melalui aplikasi code editor. Jadi, kamu bisa lebih bebas membuat desain web yang kamu inginkan.

Semoga bermanfaat.


SIMILAR POSTS

Related posts