Pada masa yang lampau ketika _internet_ masih baru untuk umum, mahal dan lambat, ada [Geocities][] yang memberikan kesempatan bagi amatir membuat [Static Web Page][] dengan [Web hosting service][] gratis.
Dan sekarang yang terjadi adalah kebalikkannya, banyak pilihan yang menawarkan jasanya. Salah satunya adalah [Firebase][].

[Firebase Hosting][Firebase] menawarkan _hosting_ untuk [Static Web Page][] dalam platformnya. _Service_ ini ada karena [Firebase][] memerlukannya bagi dukungan _service_ lainnya. Jadi mari kita gunakan ini untuk membuat [Static Web Page][] dan bisa menggunakan _domain_ kita sendiri.

![alt text][i-website]

### Firebase CLI

Memulainya kita ada bantuan yang [Firebase][] sediakan untuk ini. Kita perlu [Node.js][] dengan [NPM][]. Dan kita pasang menggunakan perintah `npm install -g firebase-tools`.

![alt text][i-npm-firebase-tools]

Saat ini versinya seperti pada gambar dibawah.

![alt text][i-firebase-version]

### Firebase Login

Kita perlu _login_ ke [Google][] lewat perintah `firebase Login`. Ia menggunakan _login_ kita yang ada di-_browser chrome_, jadi sebaiknya _login_ juga disana. Ini dilakukan sekali saja, karena _token auth_ biasanya disimpan.

![alt text][i-firebase-login]

### Firebase Init

Untuk memulainya kita buat dan masuk ke _folder_ tempat kita akan menaruh _file_ [website][]-nya. Dari situ kita jalankan perintah `firebase init`.

![alt text][i-firebase-init]

Setelah pilihan untuk melanjutkan, kita akan memilih `Hosting: Configure and deploy Firebase Hosting sites`. Karena kita memang menggunakan ini untuk _hosting_.

![alt text][i-firebase-init-hosting]

Karena kita memulai tanpa membuat projek dahulu di-[Firebase Console][Firebase] maka kita pilih `Create a new project`. Kalau kita sudah membuat project di-[Firebase Console][Firebase] maka projek itu akan muncul disini.

![alt text][i-firebase-init-project]

Pilihan ini kita cukup melewatkan saja dengan menekan tombol _enter_. Yang terjadi [Firebase][] akan membuatkan kita file `database.rules.json`, ini bisa dikonfigurasi kemudian hari.

![alt text][i-firebase-init-db]

Selanjutnya kita akan ditanyakan _folder_ mana yang akan digunakan untuk _file_ kita. Secara _default_ nama _folder_-nya `public`.

![alt text][i-firebase-init-setup-folder]

Karena di tulisan ini kita tidak membuat _web_ dengan [javascript framework][JS] maka kita pilih `N`. Konfigurasi ini bisa di atur secara manual, seperti halnya konfigurasi untuk _web-server rewrite_.

![alt text][i-firebase-init-setup-spa]

Selesai sudah proses ini. Langkah selanjutnya kita perlu ke [Firebase Console][Firebase]-nya.

![alt text][i-firebase-init-setup-done]

### Console Firebase

Tampaknya `firebase-tools` belum bisa membuatkan project di-[Firebase Console][Firebase]. Jadi kita perlu ke sana. Dan membuat project baru.

![alt text][i-console-new-project]

Untuk tulisan ini kita buat projek dengan nama `CodePolitan` dinegara `Indonesia`.

![alt text][i-console-new-project-cp]

Kalau kita pilih menu _hosting_ maka kita akan masuk ke _dashboard_, terlihat seperti dibawah. Dari sini kita tidak perlu melakukan apa-apa lagi disini.

![alt text][i-cp-dashboard]

### Firebase Use

Projeknya sudah siap. Sekarang saatnya kita akan menyambungkan dengan yang kita sudah _init_ tadi. Gunakan perintah `firebase use --add`, maka akan muncul projek yang kita buat tadi di-[Firebase Console][Firebase] dalam hal ini `codepolitan-50731`.

![alt text][i-firebase-use]

Ada pertanyaan soal _alias_, cukup kita masukkan `codepolitan` biar sederhana.

![alt text][i-firebase-use-alias]

Setelah itu projek kita diselaraskan dan kita konfigurasi selesai.

![alt text][i-firebase-use-done]

### Firebase Deploy

Pada saat kita menginisiasi _folder_ tadi. Proses tersebut akan membuat beberapa _file_. Ini termasuk _file_ [HTML][] dalam _folder public_ dan beberapa [JSON][] _file_ (ini tempat konfigurasinya).

![alt text][i-firebase-init-explorer]

Sekarang bukan jaman pakai [FTP][] lagi, jadi kita akan gunakan perintah `firebase deploy` untuk me-copy _file_ di komputer kita ke _server_. Selesai itu kita akan melihat nama _sub-domain_ dari [website][] kita itu.

![alt text][i-firebase-deploy]

Dan bila kita kembali ke-[Firebase Console][Firebase], kita akan melihat _Deployment history_ yang berisi catatan pen-_deploy_-an kita.

![alt text][i-cp-dashboard-deploy]

Kalau kita ke alamat `codepolitan-50731.firebaseapp.com` kita melihat seperti pada gambar. Dan tandanya kita sudah berhasil.

![alt text][i-cp-web]

Lalu bagaimana kita me-_update_-nya. Pastinya kita lakukan itu dahulu di komputer kita. Seperti contoh kita sekarang masukkan _file_ tambahan seperti _file_ [javascript][JS], [CSS][], _image_ dan lainnya kedalam _folder public_.

![alt text][i-firebase-init-explorer-new]

Dari situ kita cukup gunakan perintah `firebase deploy` lagi. Maka maka kita ia akan mengsinkronisasikan dengan yang ada di-_server_. Mudah bukan?

![alt text][i-firebase-deploy-again]

Kembali ke alamat `codepolitan-50731.firebaseapp.com` kita lagi untuk mengecek apakah _deploy_-nya sudah berhasil atau tidak.

![alt text][i-cp-web-new]

### Penutup

[Firebase Hosting][Firebase] menyediakan fasilitas ini sebagai bagian dari ekosistim platform _cloud_ mereka. _Service_ ini akan memudahkan _developer_ untuk menggunakan _service_ lainnya, walaupun harus mengikuti tata cara yang sudah ditentukan. Membuat [website] amatiran saja bisalah gunakan ini sebagai alternatif.

### Referensi

* [Firebase][]
* [Node.js][]
* [NPM][]

> **Perhatian!** Code yang ditampilkan dalam tulisan ini merupakan ilustrasi dari yang ingin dipaparkan dan bukan _**production ready code**_. Sudah banyak kejadian karena asal meng-_**copy-and-paste**_ tanpa mengerti code yang diambil itu ke dalam _**production**_. Selain itu perlu ada tambahan code dan test sebelum siap untuk digunakan secara utuh.

[Node.js]: https://nodejs.org/ "Node.js Website"
[NPM]: https://en.wikipedia.org/wiki/Npm_(software) "Wikipedia: NPM"
[Geocities]: https://en.wikipedia.org/wiki/Yahoo!_GeoCities "Wikipedia: Yahoo! GeoCities"
[Website]: https://en.wikipedia.org/wiki/Website "Wikipedia: Website"
[Static Web Page]: https://en.wikipedia.org/wiki/Static_web_page "Wikipedia: Static web page"
[Web hosting service]: https://en.wikipedia.org/wiki/Web_hosting_service "Wikipedia: Web hosting service"
[Firebase]: https://firebase.google.com/ "Google Firebase"
[Google]: https://www.google.com "Google"
[JS]: https://en.wikipedia.org/wiki/JavaScript "Wikipedia: JavaScript"
[HTML]: https://en.wikipedia.org/wiki/HTML "Wikipedia: HyperText Markup Language (HTML)"
[JSON]: https://en.wikipedia.org/wiki/JSON "Wikipedia: JSON"
[FTP]: https://en.wikipedia.org/wiki/File_Transfer_Protocol "Wikipedia: File Transfer Protocol (FTP)"
[CSS]: https://en.wikipedia.org/wiki/Cascading_Style_Sheets "Wikipedia: Cascading Style Sheets (CSS)"

[i-website]: https://dede.gitlab.io/a/i/p/firebase-hosting/website.png "Firebase Website"
[i-npm-firebase-tools]: https://dede.gitlab.io/a/i/p/firebase-hosting/npm-firebase-tools.png "NPM Firebase-Tools"
[i-firebase-version]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-version.png "Firebase Version"
[i-firebase-login]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-login.png "Firebase Login"
[i-firebase-init]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-init.png "Firebase Init"
[i-firebase-init-hosting]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-init-hosting.png "Firebase Hosting"
[i-firebase-init-project]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-init-project.png "Firebase Project"
[i-firebase-init-db]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-init-db.png "Firebase Database"
[i-firebase-init-setup-folder]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-init-setup-folder.png "Firebase Folder"
[i-firebase-init-setup-spa]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-init-setup-spa.png "Firebase SPA"
[i-firebase-init-setup-done]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-init-setup-done.png "Firebase Init Done"
[i-console-new-project]: https://dede.gitlab.io/a/i/p/firebase-hosting/console-new-project.png "Firebase Console New Project"
[i-console-new-project-cp]: https://dede.gitlab.io/a/i/p/firebase-hosting/console-new-project-cp.png "Firebase Console Project Name"
[i-cp-dashboard]: https://dede.gitlab.io/a/i/p/firebase-hosting/cp-dashboard.png "Firebase Dashboard"
[i-firebase-use]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-use.png "Firebase Use --Add"
[i-firebase-use-alias]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-use-alias.png "Firebase Use Alias"
[i-firebase-use-done]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-use-done.png "Firebase Use Done"
[i-firebase-init-explorer]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-init-explorer.png "Firebase Explore"
[i-firebase-deploy]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-deploy.png "Firebase Deploy"
[i-cp-dashboard-deploy]: https://dede.gitlab.io/a/i/p/firebase-hosting/cp-dashboard-deploy.png "Firebase Dashboard Deploy"
[i-cp-web]: https://dede.gitlab.io/a/i/p/firebase-hosting/cp-web.png "Deploy Web"
[i-firebase-init-explorer-new]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-init-explorer-new.png "Firebase Explore Again"
[i-firebase-deploy-again]: https://dede.gitlab.io/a/i/p/firebase-hosting/firebase-deploy-again.png "Firebase Deploy Again"
[i-cp-web-new]: https://dede.gitlab.io/a/i/p/firebase-hosting/cp-web-new.png "New Deploy Web"


Web Static dengan Firebase Hosting

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Web Static dengan Firebase Hosting

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

IBM Swift Sandbox, Belajar dan Tes Kode Program Swift Online

T-SQL : Greatest Function di SQL Server

WinForm: Cross-Thread

Implementasi Math Summation

PeachPie, PHP compiler untuk .NET

UrhoSharp Game-Engine dari Xamarin