Vite React Uygulamanızı GitHub Pages’e 4 Adımda Yayınlayın
Merhaba! Ben Fatih Soysal ve bu yazıda, Vite ile geliştirdiğiniz React uygulamasını GitHub Pages’e nasıl kolayca yayınlayacağınızı adım adım göstereceğim. Bu rehber, hem yeni başlayanlar hem de deneyimli geliştiriciler için faydalı olacaktır. Hazırsanız başlayalım!
1. Adım: GitHub Deposu Oluşturma
Öncelikle, GitHub hesabınızda yeni bir depo oluşturmanız gerekiyor. Depo adınız, genellikle username.github.io şeklinde olmalıdır. Bu, GitHub Pages’in sitenizi doğru konumda bulmasını sağlar. Depoyu oluştururken, “README dosyası ekle” ve “.gitignore” dosyası oluşturma seçeneklerini işaretleyebilirsiniz. Bu, projenizi daha düzenli tutmanıza yardımcı olur. Daha sonra, yerel projenizi bu yeni GitHub deposuyla eşleştireceğiz.
2. Adım: Proje Yapılandırması
Şimdi, Vite projenizin yapılandırmasını GitHub Pages ile uyumlu hale getirmemiz gerekiyor. Bunun için, projenizin kök dizininde bulunan vite.config.js dosyasını açın. Bu dosyaya aşağıdaki kodu ekleyin:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
base: '/your-repo-name/' // your-repo-name kısmını GitHub repo adınızla değiştirin.
});
Bu kod parçası, base özelliğini kullanarak GitHub Pages’in doğru dizini hedeflemesini sağlar. your-repo-name kısmını kendi GitHub depo adınız ile değiştirmeyi unutmayın. Örneğin, depo adınız “fatihsoysal-react-app” ise, base: '/fatihsoysal-react-app/' şeklinde olmalıdır. Bu adım çok önemlidir, aksi takdirde siteniz düzgün çalışmayabilir.
3. Adım: GitHub’a Yayınlama
Projenizi GitHub’a yayınlamak için öncelikle projenizin kök dizininde bir terminal açın. Ardından, aşağıdaki komutları sırasıyla çalıştırın:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/your-repo-name.git // yourusername ve your-repo-name kısmını kendi bilgilerinizle değiştirin.
git push -u origin main
Bu komutlar, projenizi yerel olarak başlatır, tüm dosyaları ekler, bir ilk commit oluşturur, ana dalı “main” olarak ayarlar ve GitHub deponuzla bağlantı kurarak dosyalarınızı uzak depoya gönderir. Başarılı bir şekilde yayınlandıktan sonra GitHub Pages, sitenizi otomatik olarak oluşturacaktır. Bu işlem birkaç dakika sürebilir.
4. Adım: GitHub Pages’i Kontrol Etme
Son adımda, GitHub Pages’in sitenizi başarılı bir şekilde yayınlayıp yayınlamadığını kontrol etmeniz gerekir. GitHub deponuzun ayarlarına gidin ve “Pages” sekmesini bulun. Burada, sitenizin yayınıyla ilgili bilgileri ve yayının URL’sini göreceksiniz. Sitenizin düzgün çalıştığını doğrulayın. Herhangi bir sorunla karşılaşırsanız, yapılandırma dosyanızı ve GitHub’a yaptığınız işlemleri tekrar kontrol edin.
İşte bu kadar! Vite React uygulamanızı GitHub Pages’e başarıyla yayınladınız. Umarım bu rehber faydalı olmuştur. Başka sorularınız varsa veya daha fazla bilgi edinmek isterseniz, web sitemi ziyaret edebilirsiniz veya bana ulaşabilirsiniz. Ayrıca, daha fazla bilgi için bu makaleye de göz atabilirsiniz.
#Etiketler: Vite, React, GitHub Pages, Deployment, Yayınlama, Web Uygulaması, JavaScript, Frontend, GitHub, git, vite.config.js