Github Pages ile Flutter Web Sitenizi Yayınlama Rehberi

Hosting ve masraflardan kaçınarak kendi halinizde bir siteyi yayınlamak ve bunu cross platform olan Flutter ile yapmak istiyorsanız Github Pages tam size göre.

Long time no see diyerek yazıya başlamak isterim. Son yazımı 1 sene evvel yazmıştım. Github hesabımın koyu bir haterım tarafından çalınıp geri almam ile kendini ben gibi geliştirmeye çalışan arkadaşlarıma öğrenirken destek olmak amaçlı böyle küçük yazılar yazıp paylaşmaya karar verdim. Umarım işinizi görürler , iyi okumalar 😊

Github Pages

Github Pages ile domain satın almadan masrafsız kendi web sitenizi canlı olarak kullanıma sunabiliyorsunuz kısaca.

Bunun için ihtiyacınız olan şeyler:

• Bilgisayarınızda kurulu olan bir Git (versiyon kontrol sistemi) : https://git-scm.com/downloads
• Github Hesabınız (2 faktör korumalı mutlaka kontrol ediyoruz⚠️)

1) Github’da yeni bir repository oluşturun.

Repository’i oluştururken username yazan yere kendi kullanıcı adınızı yazın ve yanına .github.io yu ekleyin. Public özelliğini açık bırakın

böyle gözükecek.

Farklı bir repo ismi verebiliyoruz ama o zaman da linkimiz çok daha uzun gözküyor.

2) Flutter Projemizde Bazı Kontroller Yapıyoruz

Proje klasörlerimizde web klasörünün olduğuna emin oluyoruz. Eğer yoksa projemizin açık olduğu terminalimizde bu kodu çalıştırıyoruz.

flutter create . 

3) Flutter Web Dosyasına Girelim

• web klasörümüzde index.html dosyasını açıyoruz.

• <base> kod tag iyle başlayan kodu siliyoruz.

siliyoruz..

4)Flutter Web Buildini Alalım

flutter build web

komutunu projemizin açık olduğu terminalde çalıştıralım ve Github Pages’in yayınlayacağı sitemizin html tag li halini alalım.

5) Flutter Web Build’ini Pushlayalım

Aldığımız bu web buildini oluşturduğumuz repoya commitleyip pushlayalım. (Bu kısım da git kullanımını bildiğinizi varsayıyorum.)

böyle gözükecek

6) Repomuzuda Ayarlardayız

Projemizin Repository ayarlarından Pages kısmına giriyoruz. Bir dakika bekletebiliyor bazen ilk yayınlamalarda.

Ve ta daa Flutter Web Sitemiz yayında 🥳🥳

Ek İlaveler

1) Kullanıcı adım ile değilde farklı bir repo ismi ile açmak istiyorum diyosanız:

Ayarlar > Pages > Source kısmından main seçeneğini seçmeli ve kaydetmelisiniz.

2) Sitenizdeki değişiklikler daha hızlı yansıtmak isterseniz:

Başta açtığımız repository i, Flutter Web sitesini yazmış olduğunuz proje üzerinden açabilirsiniz bunun için projemizin açık olduğu terminalde:

cd build/web

diyerek yayınladığımız web dosyasına giriyoruz. Daha sonrasında username.github.io reposunu nasıl kurduysak adımları burada kuruyoruz.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin (burada siniz repo urlniz)

tabi öncesinde açtıysanız böyle bi repo silip bidaha açıyosunuz benim gibi

Artık Flutter da yazdığımız değişiklikleri terminalde flutter build web diyip commit atar ve pushlarsak değişiklikleri 1 dakika içerisinde görebiliriz.

Benim siteme de göz atabilirsinizz => https://elifbilgep.github.io/

İyi çalışmalar 🤗

Kaynaklar:

https://pages.github.com/

https://www.youtube.com/watch?v=z-yOqoQ2q6s