Instatic CMS: Claude Code ile Token Harcamadan Site Yönetimi

Yapay zekaya bir web sitesi yaptırdınız. Peki sonrasında ne oluyor? Başlıktaki tek kelimeyi değiştirmek için bile Claude Code'u açıyor, prompt yazıyor ve token harcıyorsunuz. W3Techs verilerine göre internetteki sitelerin yüzde 41'i hala WordPress ile çalışıyor, çünkü insanlar sitelerini panelden yönetmeyi seviyor. İşte Instatic tam bu boşluğu dolduruyor: Claude Code ile ürettiğiniz siteyi, kod bilmeden yönetebileceğiniz açık kaynak bir panele kavuşturuyor. Bu yazıda Instatic kurulumunu yapacak, Claude Code'u MCP ile bağlayacak ve bir kahve dükkanı sitesini sıfırdan yayına alacağız.

Tüm süreci ekran kaydıyla izlemek isterseniz detaylı kurulum videomuz YouTube'da hazır.

Kısaca öğrenecekleriniz:

Instatic nedir: Webflow, Framer ve WordPress'e açık kaynak alternatif visual CMS
VPS kurulumu: Docker Compose ile tek tıkla dağıtım ve Coolify alternatifi
MCP bağlantısı: Claude Code'un siteyi panel araçlarıyla düzenlemesi
Canlı demo: Kahve dükkanı sitesi, iletişim formu, blog ve template sistemi

İçindekiler

Instatic Nedir? Token Sorununu Nasıl Çözüyor?
VPS'e Kurulum: Docker Compose ile Instatic
Instatic Panel Turu: Neler Var?
Claude Code'u MCP ile Instatic'e Bağlama
Canlı Demo: Kahve Dükkanı Sitesi Sıfırdan
İletişim Formu, Blog Yazısı ve Template Sistemi
Güvenlik ve Dikkat Edilmesi Gerekenler
Sonuç
Sıkça Sorulan Sorular (SSS)

Instatic Nedir? Token Sorununu Nasıl Çözüyor?

Instatic, kendi sunucunuzda barındırdığınız açık kaynak bir visual CMS. Kendi tanımıyla Webflow, Framer ve WordPress'e açık kaynak alternatif. MIT lisanslı, yani tamamen ücretsiz ve ticari projelerde de kullanılabiliyor. Proje çok yeni olmasına rağmen GitHub'da 7 binin üzerinde yıldız topladı ve Trending listesinde 1 numaraya kadar çıktı. Videoyu çektiğimiz sırada sürüm henüz 0.0.14 idi; bu yüzden zaman zaman pürüz görmeniz normal.

Teknik taraf da sağlam: proje Bun ve TypeScript ile yazılmış, admin paneli React 19 kullanıyor, veri tarafında SQLite veya PostgreSQL seçilebiliyor. En önemlisi, Instatic temiz statik sayfalar üretiyor. Yayınlanan sitede framework yükü yok; çalışma zamanı yaklaşık 1,1 kilobayt. Ziyaretçileriniz hızlı bir site görüyor, siz de arka planda gerçek bir kanvas editörüyle çalışıyorsunuz.

Peki token sorunu nerede devreye giriyor? İş akışı şöyle: siteyi bir kez Claude Code'a yazdırıyorsunuz. Codex veya AntiGravity kullananlar için de aynı mantık geçerli. Sonrasında başlık değiştirmek, resim güncellemek ya da yeni bir bölüm eklemek gibi küçük işler için yapay zekaya dönmüyorsunuz. Panele girip düzenliyor, Publish deyip çıkıyorsunuz. Videodaki örnekte "test" yazıp yayınladım; değişiklik saniyeler içinde canlı sitedeydi. Her küçük rica için prompt yazmak yerine token'larınızı yalnızca büyük işlere harcıyorsunuz.

Instatic tanıtımını ve örnek siteyi YouTube videomuzun 00:24 anından izleyebilirsiniz.

VPS'e Kurulum: Docker Compose ile Instatic

Panelin 7/24 açık kalması için bir sunucuya ihtiyacınız var. Kendi bilgisayarınızda kurarsanız, bilgisayar kapandığı anda siteniz de yönetilemez hale gelir. VPS mantığını daha önce Hostinger VPS ile sınırsız otomasyon yazımızda detaylı anlatmıştık. Mevcut bir VPS'iniz varsa yenisini almanıza gerek yok; aynı adımlarla kurabilirsiniz.

Hostinger Kampanyası: Hostinger VPS'i bu linkten alın ve ödeme sayfasında kupon kodu alanına YPRKEMRULLAH yazarak yüzde 10 indirim kazanın. Instatic için KVM 2 planı fazlasıyla yeterlidir.

Kurulum adımları videodaki sırayla şöyle:

Adım: Hostinger'da KVM 2 planını seçin. Alan adınız yoksa 24 aylık planı tercih edin; hem daha uygun olur hem de bir yıllık alan adı ücretsiz tanımlanır.
Adım: Kontrol paneli seçiminde Docker ve Traefik içeren şablonu seçip onaylayın. Docker, üzerine birçok uygulama kurabildiğimiz katmandır ve Instatic bu katmanda çalışacak.
Adım: Ödeme sonrası VPS detayına girin. Docker Manager içindeki Projects bölümünden Compose ekranına gelin ve manuel oluştur deyin. Instatic henüz hazır şablonlar arasında yok; ileride tek tık kurulum olarak eklenmesi bekleniyor.
Adım: Videonun sabit yorumundaki linkten Docker Compose içeriğini alın ve YAML düzenleyicisine yapıştırın. Proje adını instatic yazın.
Adım: İki alanı kendinize göre düzenleyin. PUBLIC_ORIGIN alanına DNS yönlendirmesi yapılmış alan adınızı yazın. Secret key alanına ise 32 byte base64 formatında yeni bir anahtar üretin; generate araçlarıyla saniyeler içinde oluşturabilirsiniz. Bu anahtarı kimseyle paylaşmayın.
Adım: Tek tıkla dağıt deyin ve kurulumun bitmesini bekleyin.

Coolify kullananlar için de yol aynı: yeni bir uygulama açıp Docker Compose Empty seçeneğine aynı YAML içeriğini yapıştırıyorsunuz, Settings bölümüne alan adınızı yazıp deploy diyorsunuz. Coolify tarafını merak ediyorsanız tek promptla deploy rehberimizde bu paneli detaylı kullanmıştık. Bu arada VPS panelinde Hermes Agent kartını görebilirsiniz; o da ayrı bir dünya ve Hermes Agent rehberimizde anlatmıştık.

Kurulumun tamamını YouTube videomuzun 03:07 anından ekran kaydıyla takip edebilirsiniz.

Instatic Panel Turu: Neler Var?

Kurulum bitince adresi açtığınızda Instatic sizden site adı, e-posta ve şifre istiyor. Create admin dediğinizde panel hazır. Dashboard'da depolama, sayfa ve post sayıları gibi özet bilgiler var. Asıl güç sol menüde gizli:

Bölüm	Ne işe yarıyor?
Site	Sayfalarınızın desktop, tablet ve mobil önizlemesi; kanvas editörü
Layers	Sayfadaki elementlerin katman ağacı
Code	Manuel style ve script ekleme alanı
Media	Site resimlerini yükleme ve yönetme
Framework	Renk, font ve boşluk token'larıyla tasarım sistemi
Content	Blog yazıları ve SEO ayarları
Data	Özel veri tabloları
Plugins	Site içinde çalışan eklentiler
Users	Rol bazlı kullanıcılar (client, member)

Framework paneli özellikle önemli. Manage framework ekranında full framework seçip import ettiğinizde renkler, font boyutları ve boşluklar için hazır değerler geliyor. Amaç tutarlılık: bir başlık bir yerde 15 piksel, başka yerde 18 piksel olmasın diye tüm site aynı ölçek sistemini kullanıyor. Claude Code da bu token'lar üzerinde değişiklik yapabiliyor.

Users bölümü ajans çalışanlarına tanıdık gelecek. Müşterinize client rolüyle bir hesap açıp yalnızca içerik bölümlerini göstermeniz mümkün. Böylece müşteri kendi blog yazısını girerken tasarımı bozamıyor.

Panel turunun tamamı YouTube videomuzun 07:14 anında yer alıyor.

Claude Code'u MCP ile Instatic'e Bağlama

MCP, yapay zeka uygulamalarının dış araçlara standart bir protokolle bağlanmasını sağlıyor; kavrama yabancıysanız Apify MCP rehberimizde detaylıca işlemiştik. Instatic'in güzel tarafı şu: aynı zamanda bir MCP server. Yani Claude Code, Cursor veya Codex panele bağlandığında panelin kendi kullandığı araçların aynısına erişiyor: siteyi okuma, yapıyı düzenleme, içerik yönetme.

Bağlantı adımları şöyle:

Adım: Panelde sol alttaki AI assistant alanına tıklayın ve sağ üstten AI settings ekranını açın. Burada isterseniz kendi modelinizi bağlayıp panel içi sohbetle de çalışabilirsiniz.
Adım: MCP connection bölümünde Remote OAuth seçeneğini işaretleyin ve Copy URL ile bağlantı adresini kopyalayın.
Adım: Claude tarafına geçin. Claude Desktop'ta Settings içindeki Connectors ekranından Add custom connector deyin; isim olarak instatic yazın ve kopyaladığınız adresi remote URL alanına yapıştırın.
Adım: Connect dediğinizde yetkilendirme ekranı açılıyor. Burada MCP'nin neler yapabileceğini tek tek seçebilirsiniz; videoda tüm işlemleri yaptıracağımız için select all dedim.
Adım: Authorize deyip admin şifrenizi girin ve confirm ile onaylayın. Sorular tekrar etmesin diye always allow seçeneğini kullanabilirsiniz.

Burada videoda beni epey uğraştıran kritik bir detay var: Claude'un site üzerinde işlem yapabilmesi için paneldeki Site sekmesi tarayıcıda açık olmalı. Blog yazısı gibi içerik işlemlerinde ise Content sekmesi açık kalmalı. Editör, tarayıcı sekmesiyle canlı senkron çalıştığı için alt-tab yaptığınızda bile bağlantı düşebiliyor. Bu kuralı bilirseniz saatlerce hata aramazsınız.

MCP bağlantısının tüm adımlarını YouTube videomuzun 10:34 anından izleyebilirsiniz.

Canlı Demo: Kahve Dükkanı Sitesi Sıfırdan

Bağlantı hazır olduğuna göre sıra asıl işte. Videoda bir kahve kavurucusu için sıfırdan ana sayfa kurduk. Kullandığım prompt önce tasarım sistemini tanımlıyor: marka adı, renk paleti, tipografi. Ardından hero bölümünü ve diğer bölümlerin içeriğini tarif ediyor. Bu promptları videonun açıklamasındaki klasörden ücretsiz alabilirsiniz. Kendi marka renklerinizi çıkarmak isterseniz Open Design ile brand kit üretmeyi anlattığımız videomuz da mevcut.

Model tarafında Opus 5 kullandım ve effort ayarını high yaptım; tasarım işlerinde fark yaratıyor. Gönder dedikten sonra süreç şöyle ilerledi:

Header, hero ve kart bölümlerini tek tek oluşturdu; fontlar ve renkler tasarım sistemine uygun geldi.
Scroll animasyonları için Code bölümüne kendi JavaScript dosyasını yazdı.
Mobil ve tablet görünümlerini ayrı ayrı kontrol etti.
En etkileyicisi: her değişiklikten sonra snapshot alıp kendi işini değerlendirdi. Ekran görüntüsünü inceleyip hizalama sorunlarını kendisi düzeltti; benim "şurayı kaydır, bunu büyüt" dememe gerek kalmadı.

Sonuç olarak yayınlanan sayfada hover efektleri, kavurma süreci bölümü ve iletişim bilgileri hazırdı. Tek pürüz bir animasyon script'inin çalışmamasıydı; bu tür küçük hataları tek promptla düzelttirebiliyorsunuz.

Panelden Elle Düzenleme: Resim Değiştirme

Instatic'in asıl vaadini burada test ettim. Ana sayfadaki yer tutucu fotoğrafı kaldırıp Add image ile kendi görselimi yükledim. Aspect ratio değerini 4:5 yaptım; daha büyük görünmesini isterseniz 4:6 da seçebilirsiniz. Publish deyip şifreyi onayladım ve değişiklik canlıya geçti. Kod yok, prompt yok, token yok. Yazılar ve diğer resimler de aynı mantıkla değişiyor.

Kahve dükkanı demosunun tamamı YouTube videomuzun 12:55 anında izlenebilir.

İletişim Formu, Blog Yazısı ve Template Sistemi

Ana sayfa bitti; şimdi siteyi gerçek bir işletme sitesine çeviren üç parçaya bakalım.

İletişim Sayfası ve Web3 Forms

İkinci promptla e-posta, ad soyad, konu ve mesaj alanları olan bir iletişim sayfası istedim. Claude form altyapısı için seçenek sundu. Instatic'in kendi form sistemi gönderimleri kendi tablosuna kaydediyor; ben pratik olsun diye Web3 Forms kullandım. Siteye üye olup bir access key aldım ve Claude sorduğunda yapıştırdım. Test gönderimi saniyeler içinde e-posta kutuma düştü. Form yapılandırmasıyla hiç uğraşmadım.

Blog Yazısı Oluşturma

Content sekmesi açıkken Claude'a "Fable 5 hakkında detaylı bir blog yazısı yaz ve sitede yayınla" dedim. Araştırmasını yaptı, yazıyı hazırladı ve Content bölümüne draft olarak ekledi. Panelden başlığı, içeriği ve SEO ayarlarını görebiliyorsunuz; featured image alanı da mevcut. Yazıyı draft'tan published durumuna almak tek tık.

Not Found Hatası ve Template Çözümü

Yazıyı yayınlayıp açtığımda not found hatası aldım. Sebebi basit: blog yazılarının oturacağı bir template henüz yoktu. Claude'a hatayı aynen yazdım ve çözmesini istedim. Bir yazı şablonu oluşturdu: üstte header, altta footer, ortada content outlet. Bir sayfaya sağ tıklayıp use as template dediğinizde o sayfa şablon oluyor ve tüm blog yazıları otomatik olarak içine yerleşiyor. Yeniledikten sonra yazı sorunsuz açıldı. Bu kural aklınızda olsun: Instatic'te blog yayını için önce template gerekiyor.

Form, blog ve template adımları YouTube videomuzun 18:47 anından itibaren ekranda.

Güvenlik ve Dikkat Edilmesi Gerekenler

Siteniz ve içerikleriniz artık tek panelde topladığına göre birkaç önlemi baştan alın:

Secret key'i gizli tutun: Docker Compose içindeki anahtar panelinizin kimliğidir. Videoda gösterdiğim anahtarı çekim sonrası sildim; siz de kendi anahtarınızı asla paylaşmayın.
Güçlü admin şifresi kullanın: MCP yetkilendirmesi de aynı şifreyle yapıldığı için panele giriş şifreniz tüm sistemin kilididir.
MCP izinlerini ihtiyaca göre daraltın: Select all pratik, ancak yalnızca içerik girecek bir kurulumda site yapısını düzenleme iznini kapatabilirsiniz. Bağlantı ekranındaki izin listesi tam bu iş için var.
Erken sürüm olduğunu unutmayın: Instatic henüz 0.0.x aşamasında. Önemli bir siteyi taşımadan önce düzenli yedek alın ve güncellemeleri GitHub üzerinden takip edin. Projenin kaynak koduna Instatic GitHub deposundan ulaşabilirsiniz.
Sekme kuralını ekibinize öğretin: Site veya Content sekmesi kapalıyken yapılan MCP istekleri boşa düşer. Bu bir hata değil, editörün canlı senkron mimarisinin sonucu.

Sonuç

Bu yazıda Instatic ile uçtan uca bir yayın hattı kurduk. Yaptıklarımızı özetleyelim:

Kurulum: Hostinger VPS üzerinde Docker Compose ile Instatic'i dakikalar içinde yayına aldık; Coolify alternatifini de gördük.
Bağlantı: Claude Code'u MCP üzerinden panele bağladık; izinleri seçtik ve sekme kuralını öğrendik.
Üretim: Kahve dükkanı sitesini tek promptla oluşturduk; iletişim formunu, blog yazısını ve template sistemini tamamladık.

Asıl kazanım iş bölümünde: büyük üretim işleri Claude Code'da, küçük düzenlemeler panelde. Böylece token'larınız gerçekten değer üreten promptlara gidiyor. Promptları ve Docker Compose dosyasını videonun açıklamasında ücretsiz paylaştım; videoyu izleyerek kurulumu birebir tekrarlayabilirsiniz. Yapay zeka ve otomasyon tarafında derinleşmek isterseniz kapsamlı Türkçe eğitimlerimize göz atabilir, müfredatı buradan inceleyebilirsiniz. AI'ya site yaptırmak artık kolay; onu yönetilebilir kılmak ise Instatic gibi doğru araçları seçmekle başlıyor.

Sıkça Sorulan Sorular (SSS)

Instatic nedir ve gerçekten ücretsiz mi?

Instatic, MIT lisanslı açık kaynak bir visual CMS'tir; Webflow, Framer ve WordPress'e self-host alternatif olarak konumlanır. Yazılım tamamen ücretsizdir. Tek maliyetiniz, panelin çalışacağı sunucudur; küçük bir VPS yeterlidir.

Instatic için hangi sunucu gerekir?

Panelin 7/24 yayında kalması için bir VPS gerekir; Hostinger KVM 2 planı fazlasıyla yeterlidir. Mevcut VPS'i olanlar Docker Compose ile ekstra satın alma yapmadan kurabilir. Railway ve Render gibi platformlar da resmi dokümantasyonda desteklenir.

Claude Code Instatic'e nasıl bağlanır?

MCP üzerinden bağlanır. Panelin AI ayarlarından MCP URL'ini kopyalayıp Claude tarafına custom connector olarak eklersiniz. Remote OAuth ekranında izinleri seçer, admin şifrenizle yetkilendirmeyi tamamlarsınız. Aynı yöntem Cursor ve Codex için de geçerlidir.

MCP bağlantısı neden kopuyor?

Editör, tarayıcı sekmesiyle canlı senkron çalışır. Site düzenlemesi için Site sekmesi, blog işlemleri için Content sekmesi tarayıcıda açık kalmalıdır. Sekmeyi kapattığınızda veya uzun süre başka pencerede kaldığınızda MCP istekleri işlem yapamaz; sekmeyi açıp isteği tekrarlamak yeterlidir.

İletişim formu için ek servis şart mı?

Şart değil. Instatic'in kendi form sistemi gönderimleri kendi tablosuna kaydeder ve üçüncü taraf servis gerektirmez. Videoda kurulum pratikliği için Web3 Forms'un ücretsiz access key yöntemini kullandım; hangi yolu seçeceğiniz size kalmış.

Blog yazısı yayınlarken not found hatası neden alınır?

Ortada bir yazı template'i olmadığı için. Header ve footer içeren bir şablon sayfası oluşturup içine content outlet eklendiğinde ve sayfa use as template ile işaretlendiğinde hata çözülür. Bu işlemi Claude'a tek promptla da yaptırabilirsiniz.