Astro + Cloudflare Site Template

Blog ve landing page siteleri icin hazir sablon. Dahili admin paneli, GitHub tabanli CMS, Cloudflare Pages uzerinde calisir.

Tech Stack

Katman	Teknoloji
Framework	Astro 6 (output: 'static' + per-page SSR)
Hosting	Cloudflare Pages (ucretsiz)
CMS Backend	GitHub Contents API + Personal Access Token
Auth	HMAC-SHA256 signed cookie (username/password)
Icerik Formati	MDX (Markdown + JSX)
Markdown Editor	EasyMDE
Gorsel Depolama	GitHub repo (public/uploads/)
Sitemap	@astrojs/sitemap (otomatik)
RSS	@astrojs/rss
SEO	JSON-LD structured data, OG tags, canonical URL
GEO	llms.txt, AI crawler erisimi
Guvenlik	Cloudflare security headers, KVKK cerez uyarisi

Mimari

Ziyaretci --> site.com (Cloudflare CDN, statik)
Musteri   --> site.com/admin --> Username/password
              --> Admin paneli (Cloudflare Workers, SSR)
              --> Kaydet --> GitHub API (PAT) --> Commit
              --> Cloudflare Pages rebuild --> Site guncellenir (1-2dk)

• Public sayfalar: Build sirasinda statik HTML olusturulur (SSG), Cloudflare CDN'den sunulur
• Admin paneli: Her istekte Cloudflare Workers uzerinde calisir (SSR)
• Icerik akisi: Admin'den kaydet --> GitHub'a commit --> Otomatik rebuild --> Site guncel

Gereksinimler

• Node.js 22.12+ (Astro 6 minimum)
• GitHub hesabi + repo
• Cloudflare hesabi
• GitHub Classic PAT (no expiration, repo scope)
• Wrangler CLI (prod secret'lari icin, npx wrangler ile de olur)

Kurulum

1. Template'i kopyala

cp -r astro-cloudflare-template/ yeni-proje/
cd yeni-proje/
git init

2. Bagimliliklari kur

npm install

3. Lokal dev secrets

Cloudflare Workers convention'i: .dev.vars dosyasi.

cp .dev.vars.example .dev.vars

.dev.vars dosyasini doldur:

ADMIN_USERNAME=admin
ADMIN_PASSWORD=guclu-sifre
AUTH_SECRET=rastgele-32-karakter  # openssl rand -hex 32
GITHUB_PAT=ghp_xxxxx
GITHUB_REPO=owner/repo-name
CLOUDFLARE_DEPLOY_HOOK=           # opsiyonel

Tum secret'lar astro.config.mjs > env.schema icinde tanimli — schema disi bir secret eklersen schema'ya da ekle, aksi halde EnvInvalidVariables hatasi alirsin.

GitHub PAT olusturma:

1. GitHub > Settings > Developer Settings > Personal Access Tokens > Tokens (classic)
2. "Generate new token" tikla
3. Expiration: No expiration
4. Scope: repo (full control)
5. Token'i kopyala, .dev.vars dosyasina yapistir

4. Placeholder'lari degistir

Asagidaki dosyalarda DOMAIN.com, SITE_ADI, FIRMA_ADI gibi placeholder'lari gercek degerlerle degistir:

Placeholder	Aciklama	Dosyalar
DOMAIN.com	Site URL'i	astro.config.mjs, robots.txt, llms.txt
SITE_ADI	Site adi	BaseHead.astro, Schema.astro, Header.astro, rss.xml.ts
FIRMA_ADI	Firma adi	Schema.astro, Footer.astro
SITE_ACIKLAMASI	Site aciklamasi	index.astro, rss.xml.ts, llms.txt
SITE_BASLIGI	Ana sayfa basligi	index.astro
SITE_ALT_BASLIGI	Ana sayfa alt basligi	index.astro

5. Gelistirmeye basla

npm run dev

• Site: http://localhost:4321
• Admin: http://localhost:4321/admin

6. GitHub repo olustur ve bagla

git add .
git commit -m "feat: proje baslangici"
git remote add origin https://github.com/OWNER/REPO.git
git push -u origin main

7. Cloudflare Pages'e deploy

1. Cloudflare Dashboard > Pages > Create a project
2. "Connect to Git" > GitHub repo'yu sec
3. Build ayarlari:
   • Build command: npm run build
   • Build output: dist/
   • Node version: 22
4. Secret'lari Wrangler ile inject et (Pages dashboard'daki env var UI yerine):

   npx wrangler secret put ADMIN_USERNAME
   npx wrangler secret put ADMIN_PASSWORD
   npx wrangler secret put AUTH_SECRET
   npx wrangler secret put GITHUB_PAT
   npx wrangler secret put GITHUB_REPO
   npx wrangler secret put CLOUDFLARE_DEPLOY_HOOK

5. Deploy — Astro 6 schema validation prod'da da calisir, eksik secret varsa build/runtime patlar

8. Custom domain (opsiyonel)

1. Cloudflare Pages > Settings > Custom domains
2. Domain ekle
3. DNS kayitlari otomatik yapilandirilir

Proje Yapisi

src/
  content.config.ts        # Astro 6: Content Collections (glob loader, Zod 4)
  lib/                     # Utility kutuphaneleri
    auth.ts                  Cookie session yonetimi
    github.ts                GitHub Contents API wrapper
    slugify.ts               Turkce slug donusturucu
  middleware.ts            # /admin ve /api koruması
  components/              # Yeniden kullanilabilir bilesenler
    BaseHead.astro           SEO meta, OG, Twitter, ClientRouter, preload
    Schema.astro             JSON-LD structured data
    Breadcrumb.astro         Breadcrumb + schema
    CookieBanner.astro       KVKK cerez uyarisi
    Header.astro             Site header
    Footer.astro             Site footer
  content/                 # Icerik (MDX dosyalari — sema src/content.config.ts'de)
    blog/                    Blog yazilari
    pages/                   Landing page'ler
  layouts/                 # Sayfa sablonlari
    AdminLayout.astro        Admin panel layout (sidebar)
    BaseLayout.astro         Public site layout
    BlogPost.astro           Blog yazisi layout
  pages/                   # Rotalar
    index.astro              Ana sayfa
    404.astro                404 sayfasi
    rss.xml.ts               RSS feed
    blog/                    Blog (public)
    admin/                   Admin paneli (SSR)
      login.astro              Giris sayfasi
      index.astro              Dashboard
      media.astro              Medya yonetimi
      blog/                    Blog CRUD
      pages/                   Sayfa CRUD
    api/                     API route'lari (SSR)
      auth/                    Login/logout
      content/                 Icerik CRUD + rebuild
      upload/                  Gorsel yukleme
  styles/
    admin.css              # Admin panel stilleri
public/
  robots.txt               AI crawler'lar dahil
  llms.txt                 GEO: AI arama icin site ozeti
  manifest.webmanifest     PWA manifest (icon-192, icon-512 eklemeyi unutma)
  _headers                 Cloudflare security headers + CSP
  _redirects               301 redirect kurallari
  favicon.svg              Placeholder favicon
  uploads/                 Yuklenen gorseller
wrangler.jsonc             Cloudflare Worker config (bindings, compatibility)
.dev.vars.example          Lokal dev secrets sablonu

Admin Paneli

Erisim

site.com/admin adresine git, username/password ile giris yap.

Ozellikler

• Dashboard: Icerik istatistikleri, hizli islemler, manuel rebuild butonu
• Blog Yazilari: Listele, olustur, duzenle, sil. Markdown editor, gorsel yukleme, etiketler, taslak modu
• Sayfalar: Landing page yonetimi. Ayni editor altyapisi
• Medya: Drag & drop gorsel yukleme, galeri gorunumu, URL kopyalama

Icerik Akisi

1. Admin panelinde icerik olustur/duzenle
2. "Kaydet" butonuna tikla
3. Icerik GitHub repo'ya commit edilir
4. Cloudflare Pages otomatik rebuild tetikler
5. 1-2 dakika icinde site guncellenir

Komutlar

Komut	Aciklama
npm run dev	Gelistirme sunucusu (localhost:4321)
npm run build	Production build
npm run preview	Build onizleme
npm run check	TypeScript + Astro tip kontrolu
npm run sync	.astro/types.d.ts yeniden olustur (env schema / content değişiminden sonra)

Cloudflare Ayarlari

Deploy sonrasi Cloudflare Dashboard'dan:

• SSL/TLS: Full (Strict)
• HTTP/3: Aktif
• Brotli: Aktif
• Early Hints: Aktif
• Auto Minify: HTML, CSS, JS aktif
• Bot Fight Mode: Aktif

Lisans

MIT