Firebase İle Static Web Sayfası Host Etme

Öncelikle Firebase üzerinden bir Proje oluşturmalıyız. Bunun ardından tarayıcı üzerindeki işimiz bitmiş olacak.

Ardından Firebase’in Komut Satırı aracını yüklememiz gerekmekte. Bu şekilde klasik bir bash komutu gibi firebase komutunu kullanabileceğiz.

sudo npm install -g firebase-tools

Bu komutun ardından indirme işlemi başlayacak. Önceden bir npm update çalıştırmanızda fayda var. Benim kurulum aşamamın uzun sürmesinde bu önemli bir etken olarak karşımıza çıktı.

Ardından firebase’e login olmamız gerekmekte. bunun için çok da şaşırtıcı olmayan bir biçimde firebase login komutu ile login olacağız. Login olma aşamasında bizi tarayıcıya yönlendiriyor ve istediğimiz google hesabına giriş yapıyoruz.

Ardından bir klasör oluşturup burada firebase init komutu ile oluşturma işlemine başlıyoruz:

anil-mbp:webdeneme anilkaynar$ firebase init

🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥

🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥

🔥🔥🔥🔥🔥🔥 🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥

🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥

🔥🔥 🔥🔥🔥🔥 🔥🔥 🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥 🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥

You’re about to initialize a Firebase project in this directory:

/Users/anilkaynar/websitesi

Before we get started, keep in mind:

* You are initializing in an existing Firebase project directory

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.

◯ Database: Deploy Firebase Realtime Database Rules

◯ Firestore: Deploy rules and create indexes for Firestore

◯ Functions: Configure and deploy Cloud Functions

❯◯ Hosting: Configure and deploy Firebase Hosting sites

◯ Storage: Deploy Cloud Storage security rules

Burada hosting tercihine gelip enterladıktan sonra hangi projemizi bağlamamız gerektiğini soruyor. Burada istediğimiz projeyi seçip devam ediyoruz. Burada klasörümüzde bize bir adet firebase.json dosyası verecek. Burada sunmak istediğiniz dosyaların olacağı klasörü json klasöründe bildirmemiz gerekmekte. Benim dosyalarım public klasöründe olduğundan şu şekilde bir json hazırladım.

{
    "hosting": {
    "public": "public"
}
}

artık public klasörümüze eklediğimiz html,css,javascriptler ile websitemizi hazırlayıp sunabiliriz. public klasörümüze bir adet index.html dosyası ekleyelim. Son olarak firebase deploy ile sitemizi yayınlamaya başlayalım

i  deploying hosting
i  hosting: preparing public directory for upload...
✔  hosting: 1 files uploaded successfully

✔  Deploy complete!

    Project Console: https://console.firebase.google.com/project/staticwebsayfasi/overview
    Hosting URL: https://staticwebsayfasi.firebaseapp.com

Buradaki hosting url linki ile web sitemize girebiliriz artık.

https://staticwebsayfasi.firebaseapp.com