Github Pages’ta statik dosyalari yayina kolayca alabiliyoruz. Fakat TypeScript kullanip HTML’de DOM elementleriyle birseyler göstermek istedik mi, yayina aldigimizda bilgilerin gelmedigini görürüz.

Gelmesini istedigim Proje:

Fakat Gelen Proje:

Yani hicbir bilgi döndüremiyoruz. Bunun icin bir kac dosya olusturup, yapilandirmalar yapip, yayina almamiz gerekiyor.

Ilk olarak ana dizinde yani src’nin oldugu ayni dizinde .github diye bir folder olustuyoruz. Bunun icinde workflows diye bir folder olusturuyoruz. Bunun icinde de deploy.yml diye bir dosya olusturuyoruz.

# Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "npm"
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload dist folder
          path: "./dist"
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Bu kod parçası, GitHub Actions workflow'unu tanımlayan bir YML dosyasıdır. Bu workflow, projenizi GitHub Pages'a otomatik olarak dağıtmak (deploy etmek) için kullanılır. İşte bu kodun ana bileşenleri:

• Checkout: Projenin kaynak kodunu alır.
• Set up Node: Node.js ortamını kurar ve npm cache'ini yapılandırır.
• Install dependencies: Proje bağımlılıklarını yükler.
• Build: Projeyi derler (build eder).
• Setup Pages: GitHub Pages'ı yapılandırır.
• Upload artifact: Derlenen projeyi (dist klasörünü) GitHub'a yükler.
• Deploy to GitHub Pages: Projeyi GitHub Pages'a dağıtır.

Bu workflow, projenizi otomatik olarak derleyip GitHub Pages'a yükleyerek, TypeScript projelerinizi kolayca yayınlamanıza olanak sağlar.

Github Actions Ayarlama

bunu yaptiktan sonra vscode sag alt kosede GitHub Actions kurulumu yapalim mi diye soruyor. Oradan ok diyebiliriz, yahut alternatif vscode’da eklentiler sekmesinde GitHub Actions’u aratarak kurulumu gerceklestirebiliriz.

Vite.config.ts

Daha sonrasinda ben vite kullaniyorum, vite.config.js dosyasi olusturuyorum ana dizinde.

import { defineConfig } from "vite";

export default defineConfig({
  base: "",
});

Bu kod parçası, Vite için bir yapılandırma dosyasıdır.

• import { defineConfig } from "vite"; - Bu satır, Vite'ın yapılandırma fonksiyonunu içe aktarır.
• export default defineConfig({...}); - Bu, Vite'ın yapılandırma nesnesini tanımlar ve dışa aktarır.
• base: "", - Bu ayar, uygulamanın kök yolunu belirler. Boş bir string olarak ayarlanması, uygulamanın herhangi bir alt dizinde çalışabileceği anlamına gelir.

Bu yapılandırma, özellikle GitHub Pages gibi platformlarda projenizi yayınlarken faydalıdır. Boş bir base ayarı, projenizin farklı alt dizinlerde veya kök dizinde sorunsuz çalışmasını sağlar.

Sonrasinda npm run build deyip github’a push ederiz dosyalarimizi.

Github Kismi

Github Repomuzun settings sekmesinden Pages secenegini seciyoruz

Burada Build and Deployment kisminda kaynak olarak Github Actions’u seciyoruz. Ve projemiz birkac dakika icerisinde yayina aliniyor.

Resimde, GitHub Actions'ın bir iş akışını (workflow) başarıyla tamamladığını gösteriyor.

Bu süreç, projenizi otomatik olarak derleyip GitHub Pages'a yükleyerek, TypeScript projelerinizi kolayca yayınlamanıza olanak sağlar. Resimde görülen yeşil işaretler ve "Completed successfully" ifadesi, tüm adımların başarıyla tamamlandığını gösteriyor.

Bu otomatik dağıtım süreci, her kod değişikliğinde veya belirli bir dalda (branch) güncelleme olduğunda tetiklenebilir, böylece projenizin her zaman güncel bir sürümü yayında olur.

Ve projemizin son halinin github’taki canli halinin linkini paylasiyorum.

https://snahmd.github.io/mockshop/

Ve bu projenin adim adim anlatildigi blog yazisina da buradan ulasabilirsiniz:

Bir sonraki yazida görüsmek üzere.