React Js Projesi nasil github pages ile host edilebilir?

Hellö. Bu yazida basima gelen bir olayi not etmeyi hedefliyorum. Baslik bu konu icin gayet aciklayici.

Github repository'sini nasil github pages uzerinde calistirabilirim. Directory olarak yayinlamak istiyorum tabi, cunku ana sayfam olan http://atakansavas.github.io/ uzerinde farkli bir repository bulunuyor. Benim amacim http://atakansavas.github.io/{repositoryName} formatinda projeyi calistirmak.

Gereklilikler;

• Github hesabi uzerinde bir repository
• React ile olusturulmus bir proje.

Bu kadar.

Projenin hazirlanmasi;

Oncelikle projede github pages entegrasyonu yapabilmek icin, gh-pages paketini dev ortami icin yuklenmesi gerekiyor. Su sekilde;

npm install gh-pages --save-dev

Bu paket, github pages ile olan entegrasyonu bize saglayacak. Paket kurulduktan sonra, package.json dosyasina odaklanmak gerekiyor. Ilk islem top seviyeye homepage satirini eklemek. Aslinda gerekli degil ama build aldiktan sonra link ile yonlendirme kolayligi sagliyor.

“homepage”: “http://atakansavas.github.io/VisaFreeCountries"

Ardindan scripts tagi altina iki satir eklemek gerekiyor. Deploy islemini bize saglamasi icin.

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

package.json boyle bir sekil aliyor

Github ayarlari;

Projenin github ile baglandigini dusunerek devam ediyorum. Bu islem icin internette bolca dokuman bulunuyor. Baglanti icin bir problem olursa baska kaynaklardan yardim alinabilir. Neyse, devam edelim.

Github projesi uzerinde default olarak master branch’i gelir. Bir tane gh-pages adinda bir branch olusturmak gerekiyor. Projenjn yayinlanacagi bu branch deploy icin kullanilacak. Bu branch ustunde calisma yapilmamali yani, master uzerinde calisip deploy almak yeterli.

repository uzerinden yeni branch olusturma islemi

Branch olusturulduktan sonra, repository ayarlarinda GitHub Pages bolumune gidip, source alaninda gh-pages branch secenegi secilmeli.

gh-pages branch ayari

Bu kadar. Artik projeden asagida bulunan kod ile publish edilebilir ve site goruntulunebilir.

npm run deploy

Sonuc;