React Projesini Github Pages ile Yayınlama

3 min readMar 31, 2024

Önceki yazımda NextJS ile rendering tekniklerinden bahsetmiştim. Ancak React’e ilk başlayanların genellikle Vite ile başlamasını öneriyorum. Gerek kolay kurulum ortamı, gerekse modern development yaklaşımlarına müsaade etmesi Vite’i SPA proje oluşturma kapsamında lider konuma getiriyor. Oluşturulan projelerin de düzgün bir biçimde yayınlanması, proje mülakatlarında adayı öne çıkarıyor.

Bu bağlamda Github Pages gibi ücretsiz bir serviste herkesin kendi React projesini atabileceği bir yazı hazırladım. Dilerseniz hemen yazıya geçelim:

1. Proje oluşturma

Projenin adı 5-emoji-app olsun. pnpm’i kurup, Vite ile projeyi oluşturup, ilk git commit’imizi üretelim:

npm install -g pnpm
pnpm create vite 5-emoji-app --template react-swc
cd 5-emoji-app
pnpm install
git init
git add .
git commit -m "Initial commit"

2. Github’a projeyi ekleme

Daha sonra projeyi Github üzerinde oluşturup ilk halini ekleyelim. Repository name kısmına 5-emoji-app yazıp Create repository butonuna tıklayalım:

Repository oluşturulduktan sonra aşağıdaki gibi projeyi gönderme görseli bizi karşılıyor. Halihazırda projeyi oluşturduğumuz için altı çizili komutları kullanacağız. Ok ile gösterilen kopyalama butonuna basıp kodları kopyalayabilirsiniz.

Terminale geri dönelim ve kopyaladığımız komutları çalıştıralım: (kullaniciAdiniz kısmını kendi kullanıcı adınız ile değiştirin)

git remote add origin https://github.com/kullaniciAdiniz/5-emoji-app.git
git branch -M main
git push -u origin main

3. vite.config.js: Projenin base url ayarı

İlk kodları artık gönderdik. Şimdi projenin başladılacağı konumu seçmemiz gerekiyor. genellikle https://ozcanzaferayan.github.io/5-emoji-app/ şeklinde linkimiz oluşur. Bu nedenle repoAdi kısmını projede belirtmemiz gerekiyor.

Şimdi projedeki vite.config.js dosyasında base kısmına proje repo adını verelim (5-emoji-app yapmıştık hatırlarsanız)

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/5-emoji-app/",
});

4. gh-pages paketinin kurulumu ve deploy

Daha sonra github pages’ta yayımlamak için gh-pages npm paketini ekleyelim:

pnpm i -D gh-pages

Devamında package.json içerisinde deploy ve predeploy scriptlerini ekleyelim:

"scripts": {
  "predeploy" : "pnpm run build",
  "deploy" : "gh-pages -d dist",
}

Artık komut çalıştırabiliriz.

pnpm run deploy

Aşağıdaki gibi predeploy alıp Github pages’a atma işlemini başlatacaktır:

5. Github Actions’ta deploy sürecinin takibi

Github’da projenin Actions sekmesinde süreci izleyebilirsiniz.

Workflow tamamlandığında yeşile döner ve tıkladığınızda aşağıdaki gibi akışı görebilirsiniz. Burada deploy kısmında yazan url’e tıklayarak projeye gidebilirsiniz.

Linke gittiğinizde aşağıdaki gibi deploy olduğunu göreceksiniz:

Sonuç olarak

Github pages’ta projenin yayınlanmış halini göstermek iyi bir sunum tekniğinin vazgeçilmez bir parçasını oluşturuyor. Diğer kod kalitesi gibi işlemlerin yanında da öneminin büyük olduğunu düşünüyorum. Bu kapsamda Github üzerinde koyduğunuz her web projesini Github Pages/Vercel gibi sunucularda yayınlamanızı tavsiye ederim.

Eğer bu yazıdan keyif aldıysanız ve bu gibi daha fazla içerik görmek istiyorsanız aşağıdaki alkış bölümünden en içten dileklerinizi gönderebilirsiniz. Bir sonraki yazıda görüşmek üzere…