GitHub Pages ile Ücretsiz Bir React Uygulaması Nasıl Dağıtılır

Bir projeniz varsa ve onu alan adı satın almadan ücretsiz olarak barındırmak istiyorsanız GitHub Pages kullanmak harika bir seçimdir. GitHub Pages, depolarınızı web sitelerine dönüştürür ve sınırsız proje sitesi barındırmanıza olanak tanır.

Gezinme ile bir React sitesi dağıtmak, statik bir site dağıtmaya kıyasla ekstra yapılandırma gerektirir. Bu eğitici, bir GitHub deposu oluşturmaktan barındırılan bir siteye sahip olmaya kadar tüm süreç boyunca size yol gösterir.

Bir React Uygulaması Oluşturun

Gösteri amacıyla, yapmanız gereken bir React projesi oluşturun daha sonra dağıtacağınız yönlendirme ile. Ancak, mevcut bir tepki projesi, bu adımı atlamaktan çekinmeyin.

Terminalde, çalıştırın oluştur-tepki-uygulaması bir React projesini hızlı bir şekilde iskele için komut:

npx oluştur-tepki-uygulama tepki-gh

Oluşturulan klasöre gidin ve uygulamanızı başlatın.

npm çalıştırma başlangıcı

Ardından, tercih ettiğiniz proje klasörünü açın. kod düzenleyici. İçinde kaynak klasör, hariç her şeyi sil App.js ve index.js. App.js'deki içeriği aşağıdakilerle değiştirin:

işlev Uygulama() {
 dönüş (


Github Sayfaları

React'i Github'a Dağıtma




 );
}
varsayılan Uygulamayı dışa aktar;

Yönlendirme Ekle

Uygulamanıza yönlendirme eklemek için önce tepki-yönlendirici-dom:

npm install tepki-yönlendirici-dom

App.js'de, bağlantıyı yaklaşık sayfasına ekleyin:

"react-router-dom"dan { Link } içe aktar;
işlev Uygulama() {
 dönüş (


Hakkında
Github Sayfaları

React'i Github'a Dağıtma




 );
}
varsayılan Uygulamayı dışa aktar;

App.js ana sayfanız gibi davranacağından, yalnızca Hakkında bileşen:

const Hakkında = () => {
 dönüş ( 


Ev
Sayfa Hakkında




 );
}
varsayılanı dışa aktar Hakkında;

Şimdi, rotaları oluşturmanız ve bir React yönlendirici yapılandırmanız gerekiyor.

URL'yi ilgili bileşenlerle eşleştirmek için index.js'yi değiştirin:

React'i "tepki" den içe aktar;
ReactDOM'u "react-dom"dan içe aktar;
Uygulamayı "./App" içinden içe aktarın;
"tepki-yönlendirici-dom" dan { HashRouter, Routes, Route } içe aktarın;
Hakkında'yı "./Hakkında"dan içe aktar;
ReactDOM.render(



} />
}/>


,
 Document.getElementById("kök")
);

nasıl kullandığına dikkat et HashRouter yerine TarayıcıYönlendirici. kullanma TarayıcıYönlendirici 404 hatası verir. Bunun nedeni, GitHub sayfalarında yönlendirmenin farklı çalışmasıdır. hashrouter kullanıcı arabirimini URL ile eşitlemek için URL'nin karma bölümünü kullandığından bir hata oluşturmaz.

Son adım, Git'teki tüm yeni değişiklikleri taahhüt etmektir:

git ekle.
git commit -m "React uygulaması oluştur"

GitHub Deposu Oluştur

Dan beri GitHub Sayfaları depoyu bir web sitesine dönüştürerek uygulamanızı barındıracaksa, bir GitHub deposu oluşturmanız gerekir. GitHub hesabınıza gidin ve projenizle aynı ada sahip yeni bir havuz oluşturun.

Ardından GitHub deposunu yerel deponuza uzaktan kumanda olarak ekleyin:

git uzaktan kaynak ekle /.git

Son olarak, yerel depoyu GitHub'a aktarın:

git şubesi -M ana
git push --set-upstream Origin main

React Uygulamasını GitHub Sayfalarına Dağıtın

GitHub Pages'i kullanmak için önce onu yüklemeniz gerekir:

npm gh sayfalarını yükle

gh sayfaları oluşturmanıza izin verecektir. gh sayfaları kodunuzu dağıtacağınız şube.

Ardından, kendinize gidin paket.json dosya ve uygulamanın ana URL'si olacak ana sayfayı ekleyin:

"ana sayfa": "https://.github.io//",
"Kodlar": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "start": "tepki komut dosyaları başlat",
 "build": "react-scripts build",
 "test": "tepki komut dosyaları testi",
 "eject": "tepki komut dosyaları çıkar"
 }

Dağıtım işlemini tamamlamak için aşağıdaki komutu çalıştırın:

npm çalıştırma dağıtma

Uygulamanız artık GitHub'a dağıtıldı ve şu adresten ziyaret edebilirsiniz: https://.github.io/.

GitHub Sayfalarıyla Daha Fazlasını Yapın

GitHub Pages, web sitelerini internete ücretsiz olarak dağıtmanın basit bir yolunu sunar. Yalnızca basit bir React projesini nasıl dağıtabileceğinizi görmüş olsanız da GitHub Pages çok daha fazlasını yapmanızı sağlar. Örneğin, Jekyll kullanarak eksiksiz bir blog oluşturabilir ve hatta özel bir etki alanı kullanarak onu barındırabilirsiniz.

GitHub Sayfalarını Kullanarak Bir Web Sitesini Ücretsiz Olarak Barındırma

Sonrakini Oku

Yazar hakkında