\n* G\u00fcvenlik:<\/strong> Veritaban\u0131 veya sunucu taraf\u0131 kodlama olmad\u0131\u011f\u0131 i\u00e7in sald\u0131r\u0131 y\u00fczeyi \u00e7ok daha k\u00fc\u00e7\u00fckt\u00fcr. Bu da statik siteleri siber sald\u0131r\u0131lara kar\u015f\u0131 daha diren\u00e7li hale getirir.
\n* \u00d6l\u00e7eklenebilirlik:<\/strong> \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011flar\u0131 (CDN’ler) arac\u0131l\u0131\u011f\u0131yla kolayca da\u011f\u0131t\u0131labilirler. Y\u00fcksek trafik durumlar\u0131nda bile performans d\u00fc\u015f\u00fc\u015f\u00fc ya\u015fanmaz, \u00e7\u00fcnk\u00fc t\u00fcm dosyalar \u00f6nbelle\u011fe al\u0131nabilir ve d\u00fcnya genelindeki sunuculardan h\u0131zl\u0131ca sunulabilir.
\n* Daha D\u00fc\u015f\u00fck Maliyet:<\/strong> Dinamik sunuculara g\u00f6re daha az kaynak gerektirdi\u011finden, bar\u0131nd\u0131rma maliyetleri genellikle daha d\u00fc\u015f\u00fckt\u00fcr.
\n* Geli\u015ftirme H\u0131z\u0131:<\/strong> Geli\u015ftiriciler, modern JavaScript ara\u00e7lar\u0131n\u0131 ve bile\u015fen tabanl\u0131 yakla\u015f\u0131mlar\u0131 kullanarak daha h\u0131zl\u0131 ve verimli bir \u015fekilde site olu\u015fturabilirler.<\/p>\n
Gatsby Nedir?<\/h3>\n
Gatsby, React tabanl\u0131, a\u00e7\u0131k kaynakl\u0131 bir statik site jenerat\u00f6r\u00fcd\u00fcr. Web sitelerini ve uygulamalar\u0131n\u0131 son derece h\u0131zl\u0131, g\u00fcvenli ve \u00f6l\u00e7eklenebilir bir \u015fekilde olu\u015fturmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Gatsby’nin temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n
* React Tabanl\u0131:<\/strong> Modern web geli\u015ftirmede pop\u00fcler olan React k\u00fct\u00fcphanesini kullan\u0131r. Bu sayede geli\u015ftiriciler, bile\u015fen tabanl\u0131 bir mimariyle \u00e7al\u0131\u015fabilir ve mevcut React bilgilerini de\u011ferlendirebilir. Gatsby, teknik olarak i\u00e7erik y\u00f6netimi i\u00e7in olduk\u00e7a esnek bir yap\u0131 sunar. \u0130\u00e7erik, Markdown dosyalar\u0131, JSON dosyalar\u0131 veya \u00e7e\u015fitli Headless CMS’lerden (Contentful, Strapi, Sanity vb.) \u00e7ekilebilir. Ancak, bu esneklik genellikle geli\u015ftiricilerin m\u00fcdahalesini gerektirir:<\/p>\n * Markdown Dosyalar\u0131:<\/strong> Blog yaz\u0131lar\u0131 veya statik sayfalar i\u00e7in Markdown dosyalar\u0131 kullanmak yayg\u0131n bir y\u00f6ntemdir. Ancak, i\u00e7erik edit\u00f6rlerinin Markdown s\u00f6zdizimini bilmesi ve dosyalar\u0131 do\u011frudan Git deposunda d\u00fczenlemesi gerekir. Bu, teknik olmayan kullan\u0131c\u0131lar i\u00e7in zorlay\u0131c\u0131 olabilir. Bu noktada, TinaCMS, Gatsby’nin performans avantajlar\u0131n\u0131 korurken, i\u00e7erik y\u00f6netimini geli\u015ftiriciler ve i\u00e7erik edit\u00f6rleri i\u00e7in \u00e7ok daha eri\u015filebilir hale getiren bir k\u00f6pr\u00fc g\u00f6revi g\u00f6r\u00fcr.<\/p>\n TinaCMS, statik site jenerat\u00f6rleri ile dinamik i\u00e7erik y\u00f6netimi aras\u0131ndaki bo\u015flu\u011fu doldurmak i\u00e7in tasarlanm\u0131\u015f, a\u00e7\u0131k kaynakl\u0131 bir i\u00e7erik y\u00f6netim sistemidir. \u00d6zellikle Gatsby ve Next.js gibi React tabanl\u0131 SSG’lerle m\u00fckemmel bir uyum i\u00e7indedir.<\/p>\n TinaCMS, geli\u015ftiricilerin web sitelerini Git deposu tabanl\u0131 bir CMS ile kolayca y\u00f6netmelerini sa\u011flayan bir ara\u00e7 setidir. Temel olarak, web sitenizin i\u00e7eri\u011fini do\u011frudan Git deponuzda (\u00f6rne\u011fin GitHub, GitLab) Markdown, JSON veya MDX dosyalar\u0131 olarak saklar. Bu yakla\u015f\u0131m, i\u00e7erik y\u00f6netimini geli\u015ftirme i\u015f ak\u0131\u015f\u0131na entegre eder ve hem geli\u015ftiriciler hem de i\u00e7erik edit\u00f6rleri i\u00e7in bir dizi avantaj sunar.<\/p>\n TinaCMS’in en ay\u0131rt edici \u00f6zelliklerinden biri, i\u00e7eri\u011fi do\u011frudan \u00f6nizleme modunda d\u00fczenleme yetene\u011fi olan “Visual Editing”dir. Bu, i\u00e7erik edit\u00f6rlerinin de\u011fi\u015fikliklerini ger\u00e7ek zamanl\u0131 olarak g\u00f6rmelerine ve yay\u0131nlamadan \u00f6nce nas\u0131l g\u00f6r\u00fcnece\u011fini anlamalar\u0131na olanak tan\u0131r.<\/p>\n Geleneksel CMS’ler (WordPress, Drupal vb.) i\u00e7eri\u011fi bir veritaban\u0131nda saklar. Headless CMS’ler ise i\u00e7eri\u011fi bir API arac\u0131l\u0131\u011f\u0131yla sunar. TinaCMS ise farkl\u0131 bir yakla\u015f\u0131m benimser: i\u00e7eri\u011fi do\u011frudan projenizin Git deposunda, yap\u0131land\u0131r\u0131lm\u0131\u015f dosyalar (Markdown, JSON, MDX) olarak depolar.<\/p>\n Bu Git-tabanl\u0131 yakla\u015f\u0131m\u0131n \u00f6nemli avantajlar\u0131 \u015funlard\u0131r:<\/p>\n * Versiyon Kontrol\u00fc:<\/strong> Her i\u00e7erik de\u011fi\u015fikli\u011fi, Git’in versiyon kontrol sistemine kaydedilir. Bu, de\u011fi\u015fiklikleri kolayca takip etmeyi, \u00f6nceki s\u00fcr\u00fcmlere geri d\u00f6nmeyi ve farkl\u0131 i\u00e7erik dallar\u0131 \u00fczerinde \u00e7al\u0131\u015fmay\u0131 m\u00fcmk\u00fcn k\u0131lar. Bu yakla\u015f\u0131m\u0131n bir dezavantaj\u0131, her i\u00e7erik de\u011fi\u015fikli\u011finin bir Git commit’i tetiklemesi ve genellikle sitenin yeniden derlenmesini (build) gerektirmesidir. Bu, b\u00fcy\u00fck sitelerde veya s\u0131k i\u00e7erik g\u00fcncellemelerinde build s\u00fcrelerinin uzamas\u0131na neden olabilir. Ancak, Tina Cloud gibi hizmetler bu s\u00fcreci optimize etmek i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n TinaCMS’i rakiplerinden ay\u0131ran ve onu Gatsby ile g\u00fc\u00e7l\u00fc bir kombinasyon haline getiren temel \u00f6zellikler \u015funlard\u0131r:<\/p>\n * Visual Editing (Canl\u0131 D\u00fczenleme):<\/strong> TinaCMS’in en \u00e7arp\u0131c\u0131 \u00f6zelli\u011fidir. \u0130\u00e7erik edit\u00f6rleri, sitenin \u00f6nizleme modunda gezinirken do\u011frudan sayfadaki metinleri, resimleri veya di\u011fer bile\u015fenleri d\u00fczenleyebilirler. Bu, “ne g\u00f6r\u00fcyorsan onu al\u0131rs\u0131n” (WYSIWYG) deneyimini bir \u00fcst seviyeye ta\u015f\u0131r. Bu \u00f6zellikler, TinaCMS’i hem geli\u015ftiriciler i\u00e7in esnek bir ara\u00e7 hem de i\u00e7erik edit\u00f6rleri i\u00e7in g\u00fc\u00e7l\u00fc ve sezgisel bir platform haline getirir.<\/p>\n TinaCMS’i bir Gatsby projesine entegre etmek, projenizin yap\u0131s\u0131na ve ihtiya\u00e7lar\u0131na g\u00f6re de\u011fi\u015fse de, temel ad\u0131mlar olduk\u00e7a standartt\u0131r. Bu b\u00f6l\u00fcmde, s\u0131f\u0131rdan bir Gatsby projesi olu\u015fturarak TinaCMS’i nas\u0131l entegre edece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n Ba\u015flamadan \u00f6nce a\u015fa\u011f\u0131daki ara\u00e7lar\u0131n sisteminizde kurulu oldu\u011fundan emin olun:<\/p>\n * Node.js ve npm\/yarn:<\/strong> JavaScript \u00e7al\u0131\u015fma zaman\u0131 ve paket y\u00f6neticisi. \u0130lk olarak, yeni bir Gatsby projesi olu\u015ftural\u0131m:<\/p>\n Bu komut, basit bir “Hello World” \u015fablonu kullanarak yeni bir Gatsby projesi olu\u015fturacakt\u0131r.<\/p>\n TinaCMS’i projenize entegre etmek i\u00e7in gerekli paketleri kurman\u0131z gerekmektedir:<\/p>\n Kurulum tamamland\u0131ktan sonra, Gatsby projenizin TinaCMS’i uygulaman\u0131zda kullanabilmek i\u00e7in, uygulaman\u0131z\u0131n k\u00f6k bile\u015fenini (genellikle Bu temel kurulum, TinaCMS’in geli\u015ftirme ortam\u0131nda \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n TinaCMS, i\u00e7eri\u011finizin yap\u0131s\u0131n\u0131 tan\u0131mlayan bir schema dosyas\u0131na ihtiya\u00e7 duyar. Bu schema, i\u00e7erik edit\u00f6rlerinin hangi alanlar\u0131 d\u00fczenleyebilece\u011fini ve bu alanlar\u0131n hangi t\u00fcrde olmas\u0131 gerekti\u011fini belirler. TinaCMS CLI, bu schema’y\u0131 olu\u015fturman\u0131za yard\u0131mc\u0131 olur.<\/p>\n Projenizin k\u00f6k dizininde Bu schema, Schema dosyan\u0131z\u0131 olu\u015fturduktan sonra, TinaCMS CLI’yi kullanarak Tina’n\u0131n yerel GraphQL sunucusunu ve gerekli TypeScript t\u00fcrlerini olu\u015fturman\u0131z gerekir:<\/p>\n Bu komutu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, TinaCMS projenizi tarayacak ve TinaCMS taraf\u0131ndan y\u00f6netilen i\u00e7eri\u011fi Gatsby projenizde kullanmak i\u00e7in GraphQL sorgular\u0131 yazman\u0131z gerekir. \u00d6rne\u011fin, t\u00fcm blog yaz\u0131lar\u0131n\u0131 listelemek i\u00e7in bir GraphQL sorgusu:<\/p>\n Tek bir blog yaz\u0131s\u0131n\u0131n i\u00e7eri\u011fini \u00e7ekmek i\u00e7in ise sayfa sorgular\u0131n\u0131 kullanabilirsiniz:<\/p>\n Bu sorgular, TinaCMS’in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri olan canl\u0131 d\u00fczenlemeyi etkinle\u015ftirmek i\u00e7in, i\u00e7eri\u011fi g\u00f6r\u00fcnt\u00fcleyen Gatsby bile\u015fenlerinizde \u00d6ncelikle, Yazar: {post.frontmatter.author}<\/p>\n Tarih: {post.frontmatter.date}<\/p>\n {post.frontmatter.hero_image && (\n Bu \u00f6rnekte, Geli\u015ftirme sunucusunu ba\u015flatt\u0131\u011f\u0131n\u0131zda ( TinaCMS’in tam potansiyelini kullanmak ve \u00fcretim ortam\u0131nda g\u00fcvenli bir \u015fekilde \u00e7al\u0131\u015ft\u0131rmak i\u00e7in Tina Cloud’u kullanman\u0131z \u00f6nerilir. Tina Cloud, kimlik do\u011frulama, Git entegrasyonu ve i\u00e7erik da\u011f\u0131t\u0131m\u0131n\u0131 y\u00f6netir.<\/p>\n 1. Tina Cloud’a Kaydolma:<\/strong> Tina.io adresinden bir hesap olu\u015fturun ve yeni bir proje ba\u015flat\u0131n. Tina Cloud, i\u00e7erik edit\u00f6rlerinin web aray\u00fcz\u00fc \u00fczerinden de\u011fi\u015fiklik yapmas\u0131n\u0131 ve bu de\u011fi\u015fikliklerin do\u011frudan Git deposuna commit olarak i\u015flenmesini sa\u011flar. Bu commit’ler, sitenizin otomatik olarak yeniden derlenmesini tetikler ve g\u00fcncel i\u00e7eri\u011fin canl\u0131ya al\u0131nmas\u0131n\u0131 sa\u011flar.<\/p>\n TinaCMS, temel i\u00e7erik y\u00f6netiminin \u00f6tesine ge\u00e7erek daha karma\u015f\u0131k ve esnek web siteleri olu\u015fturman\u0131z\u0131 sa\u011flayan geli\u015fmi\u015f \u00f6zellikler sunar.<\/p>\n MDX, Markdown’\u0131n s\u00f6zdizimini React bile\u015fenleriyle birle\u015ftiren g\u00fc\u00e7l\u00fc bir formatt\u0131r. Bu, i\u00e7erik edit\u00f6rlerinin Markdown dosyalar\u0131na \u00f6zel, interaktif React bile\u015fenleri (\u00f6rne\u011fin, bir grafik, bir anket, bir \u00fcr\u00fcn kart\u0131) eklemesine olanak tan\u0131r.<\/p>\n TinaCMS, \u00d6rne\u011fin, \u00f6zel bir Ve Bu yap\u0131land\u0131rma ile TinaCMS edit\u00f6r\u00fcnde bir “\u00d6nemli Bilgi Kutusu” ekleyebilir ve i\u00e7eri\u011fini d\u00fczenleyebilirsiniz. Gatsby taraf\u0131nda ise TinaCMS’in “bloklar” veya “bile\u015fen alanlar\u0131” \u00f6zelli\u011fi, i\u00e7erik edit\u00f6rlerinin sayfalar\u0131n\u0131 \u00f6nceden tan\u0131mlanm\u0131\u015f, mod\u00fcler bile\u015fenlerle dinamik olarak olu\u015fturmas\u0131na olanak tan\u0131r. Bu, \u00f6zellikle ini\u015f sayfalar\u0131, ana sayfalar veya karma\u015f\u0131k d\u00fczenlere sahip sayfalar i\u00e7in idealdir.<\/p>\n Schema’n\u0131zda Bu sayede i\u00e7erik edit\u00f6rleri, TinaCMS aray\u00fcz\u00fcnden “Kahraman B\u00f6l\u00fcm\u00fc” veya “Metin B\u00f6l\u00fcm\u00fc” gibi bloklar\u0131 sayfalar\u0131na ekleyebilir, s\u0131ralamas\u0131n\u0131 de\u011fi\u015ftirebilir ve her blo\u011fun kendi alanlar\u0131n\u0131 d\u00fczenleyebilir. Gatsby taraf\u0131nda, bu bloklar\u0131 bir d\u00f6ng\u00fc i\u00e7inde i\u015fleyerek ilgili React bile\u015fenlerini render edersiniz.<\/p>\n Bir i\u00e7eri\u011fin ba\u015fka bir i\u00e7eri\u011fe referans vermesi, bir\u00e7ok web sitesi i\u00e7in temel bir gereksinimdir (\u00f6rne\u011fin, bir blog yaz\u0131s\u0131n\u0131n bir yazara referans vermesi). TinaCMS, \u00d6rne\u011fin, bir Bu yap\u0131land\u0131rma ile bir blog yaz\u0131s\u0131 olu\u015ftururken, TinaCMS size mevcut yazarlar listesinden birini se\u00e7me imkan\u0131 sunar. Gatsby taraf\u0131nda ise GraphQL sorgular\u0131n\u0131zda bu referanslar\u0131 takip ederek yazar\u0131n bilgilerine eri\u015febilirsiniz.<\/p>\n TinaCMS, varsay\u0131lan kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) geni\u015fletmenize ve kendi \u00f6zel alan bile\u015fenlerinizi olu\u015fturman\u0131za olanak tan\u0131r. Bu, standart alan tiplerinin ihtiya\u00e7lar\u0131n\u0131z\u0131 kar\u015f\u0131lamad\u0131\u011f\u0131 durumlarda veya daha \u00f6zel bir d\u00fczenleme deneyimi sunmak istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n \u00d6rne\u011fin, bir renk se\u00e7ici veya \u00f6zel bir etiket (tag) giri\u015fi olu\u015fturmak isteyebilirsiniz. TinaCMS’in Ve Bu, TinaCMS’in esnekli\u011fini g\u00f6sterir ve geli\u015ftiricilere i\u00e7erik y\u00f6netim deneyimini projelerinin \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re uyarlama g\u00fcc\u00fc verir.<\/p>\n Her teknoloji kombinasyonunda oldu\u011fu gibi, TinaCMS ve Gatsby’nin birlikte kullan\u0131m\u0131 da belirli avantajlar ve dezavantajlar sunar. Bu dengeyi anlamak, projeniz i\u00e7in do\u011fru ara\u00e7lar\u0131 se\u00e7menize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n * Geli\u015ftirici ve \u0130\u00e7erik Edit\u00f6r\u00fc Dostu:<\/strong> Geli\u015ftiriciler, React ve GraphQL gibi tan\u0131d\u0131k ara\u00e7larla \u00e7al\u0131\u015f\u0131rken, i\u00e7erik edit\u00f6rleri sezgisel ve g\u00f6rsel bir d\u00fczenleme deneyiminden faydalan\u0131r. Bu, i\u015fbirli\u011fini art\u0131r\u0131r ve i\u00e7erik yay\u0131nlama s\u00fcrecini h\u0131zland\u0131r\u0131r. * \u00d6\u011frenme E\u011frisi:<\/strong> TinaCMS’in Git tabanl\u0131 yakla\u015f\u0131m\u0131, schema tan\u0131mlama ve TinaCMS ve Gatsby kombinasyonu, modern web geli\u015ftirmenin en iyi y\u00f6nlerini bir araya getiren g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcmd\u00fcr. Gatsby’nin sa\u011flad\u0131\u011f\u0131 benzersiz performans, g\u00fcvenlik ve \u00f6l\u00e7eklenebilirlik avantajlar\u0131, TinaCMS’in Git tabanl\u0131, g\u00f6rsel ve geli\u015ftirici dostu i\u00e7erik y\u00f6netim sistemiyle birle\u015fti\u011finde, hem geli\u015ftiriciler hem de i\u00e7erik edit\u00f6rleri i\u00e7in olduk\u00e7a verimli bir i\u015f ak\u0131\u015f\u0131 sunar.<\/p>\n Bu kombinasyon, \u00f6zellikle bloglar, portf\u00f6y siteleri, pazarlama siteleri, dok\u00fcmantasyon portallar\u0131 ve hatta e-ticaret siteleri gibi dinamik i\u00e7eri\u011fe sahip ancak y\u00fcksek performans gerektiren projeler i\u00e7in idealdir. \u0130\u00e7erik y\u00f6netimi s\u00fcre\u00e7lerini basitle\u015ftirmek, geli\u015ftirme ve i\u00e7erik ekipleri aras\u0131ndaki i\u015fbirli\u011fini art\u0131rmak ve ayn\u0131 zamanda son kullan\u0131c\u0131lara ola\u011fan\u00fcst\u00fc h\u0131zl\u0131 bir deneyim sunmak isteyen kurulu\u015flar i\u00e7in TinaCMS ve Gatsby, g\u00f6z \u00f6n\u00fcnde bulundurulmas\u0131 gereken \u00f6nemli bir teknoloji y\u0131\u011f\u0131n\u0131d\u0131r.<\/p>\n Her ne kadar ilk kurulumda ve \u00f6\u011frenme s\u00fcrecinde baz\u0131 zorluklar olsa da, TinaCMS’in sundu\u011fu esneklik, Git’in g\u00fcvenilirli\u011fi ve Gatsby’nin performans\u0131, bu yat\u0131r\u0131m\u0131n kar\u015f\u0131l\u0131\u011f\u0131n\u0131 fazlas\u0131yla verecektir. Gelecekte, inkremental build gibi \u00f6zelliklerin daha da geli\u015fmesiyle, TinaCMS ve Gatsby’nin statik siteler i\u00e7in i\u00e7erik y\u00f6netimindeki rol\u00fc daha da b\u00fcy\u00fcyecektir. Bu teknoloji y\u0131\u011f\u0131n\u0131n\u0131 ke\u015ffetmek, modern web d\u00fcnyas\u0131nda rekabet avantaj\u0131 elde etmek isteyen herkes i\u00e7in heyecan verici bir yolculuk olacakt\u0131r.
\n* GraphQL Veri Katman\u0131:<\/strong> Gatsby, sitenizdeki t\u00fcm verileri (Markdown dosyalar\u0131, API’ler, veritabanlar\u0131, CMS’ler vb.) tek bir GraphQL katman\u0131 arac\u0131l\u0131\u011f\u0131yla eri\u015filebilir k\u0131lar. Bu, veri \u00e7ekme ve y\u00f6netme s\u00fcrecini son derece esnek ve g\u00fc\u00e7l\u00fc hale getirir.
\n* Geni\u015f Plugin Ekosistemi:<\/strong> Gatsby, y\u00fczlerce eklentiye sahip geni\u015f bir ekosisteme sahiptir. Bu eklentiler, veri kaynaklar\u0131n\u0131 entegre etmekten (\u00f6rne\u011fin gatsby-source-filesystem<\/code>, gatsby-source-shopify<\/code>), g\u00f6r\u00fcnt\u00fcleri optimize etmeye (gatsby-plugin-image<\/code>) veya stilleme \u00e7\u00f6z\u00fcmlerini entegre etmeye kadar bir\u00e7ok farkl\u0131 i\u015flevi yerine getirir.
\n* Performans Optimizasyonlar\u0131:<\/strong> Gatsby, varsay\u0131lan olarak bir\u00e7ok performans optimizasyonu uygular: kod b\u00f6lme (code splitting), lazy loading, g\u00f6r\u00fcnt\u00fc optimizasyonu, \u00f6nbellekleme ve daha fazlas\u0131. Bu, sitelerin kutudan \u00e7\u0131kt\u0131\u011f\u0131 gibi h\u0131zl\u0131 olmas\u0131n\u0131 sa\u011flar.<\/p>\nGatsby’nin \u0130\u00e7erik Y\u00f6netimi \u00c7\u0131kmaz\u0131<\/h3>\n
\n* JSON Dosyalar\u0131:<\/strong> Yap\u0131land\u0131r\u0131lm\u0131\u015f veriler i\u00e7in JSON dosyalar\u0131 kullan\u0131labilir, ancak yine de do\u011frudan dosya d\u00fczenlemesi gerektirir.
\n* Headless CMS Entegrasyonu:<\/strong> Headless CMS’ler, i\u00e7eri\u011fi API arac\u0131l\u0131\u011f\u0131yla sunarak bu sorunu \u00e7\u00f6zebilir. Ancak, bu t\u00fcr bir entegrasyon ek bir \u00f6\u011frenme e\u011frisi, ayr\u0131 bir hizmete ba\u011f\u0131ml\u0131l\u0131k ve genellikle ek maliyet anlam\u0131na gelir. Ayr\u0131ca, \u00e7o\u011fu headless CMS, geli\u015ftiricilerin i\u00e7eri\u011fi “canl\u0131” olarak d\u00fczenlemesine olanak tan\u0131yan g\u00f6rsel bir d\u00fczenleme deneyimi sunmaz.<\/p>\nTinaCMS Nedir ve Neden \u00d6nemlidir?<\/h2>\n
TinaCMS’in Tan\u0131m\u0131<\/h3>\n
Git-Tabanl\u0131 CMS Anlay\u0131\u015f\u0131<\/h3>\n
\n* G\u00fcvenlik ve Yedekleme:<\/strong> \u0130\u00e7erik, Git deposunda oldu\u011fu i\u00e7in otomatik olarak yedeklenir ve Git’in do\u011fal g\u00fcvenlik mekanizmalar\u0131ndan faydalan\u0131r.
\n* Geli\u015ftirme \u0130\u015f Ak\u0131\u015f\u0131 Entegrasyonu:<\/strong> \u0130\u00e7erik, kodla birlikte ayn\u0131 Git deposunda bulundu\u011fundan, geli\u015ftiriciler i\u00e7in tan\u0131d\u0131k bir i\u015f ak\u0131\u015f\u0131 sunar. \u0130\u00e7erik de\u011fi\u015fiklikleri, Pull Request (PR) veya Merge Request (MR) s\u00fcre\u00e7lerine entegre edilebilir.
\n* Geli\u015ftirici Deneyimi:<\/strong> Geli\u015ftiriciler, Git ve dosya sistemleriyle \u00e7al\u0131\u015fmaya al\u0131\u015fk\u0131n olduklar\u0131 i\u00e7in TinaCMS’i kolayca entegre edebilir ve geni\u015fletebilirler.
\n* Ta\u015f\u0131nabilirlik:<\/strong> \u0130\u00e7erik, standart dosya formatlar\u0131nda depoland\u0131\u011f\u0131 i\u00e7in ba\u015fka sistemlere ta\u015f\u0131nmas\u0131 veya yedeklenmesi olduk\u00e7a kolayd\u0131r.<\/p>\nTinaCMS’in Temel \u00d6zellikleri<\/h3>\n
\n* Schema Tan\u0131mlama:<\/strong> TinaCMS, i\u00e7eri\u011finizin yap\u0131s\u0131n\u0131 (hangi alanlara sahip oldu\u011fu, t\u00fcrleri vb.) tan\u0131mlaman\u0131z\u0131 sa\u011flayan bir schema sistemi kullan\u0131r. Bu schema, TypeScript ile yaz\u0131l\u0131r ve i\u00e7erik edit\u00f6rlerinin do\u011fru formatta veri girmesini sa\u011flar. \u00d6rne\u011fin, bir blog yaz\u0131s\u0131 i\u00e7in ba\u015fl\u0131k (string), i\u00e7erik (markdown), yazar (reference), kapak resmi (image) gibi alanlar tan\u0131mlayabilirsiniz.
\n* React Bile\u015fenleri ile Entegrasyon:<\/strong> TinaCMS, React bile\u015fenleriyle sorunsuz bir \u015fekilde entegre olur. useTina<\/code> hook’u gibi ara\u00e7lar sayesinde, sayfa veya bile\u015fen seviyesinde canl\u0131 d\u00fczenleme yeteneklerini kolayca etkinle\u015ftirebilirsiniz.
\n* Tina Cloud:<\/strong> Tina Cloud, TinaCMS’in geli\u015ftirilmi\u015f bir versiyonu olup, Git tabanl\u0131 i\u015f ak\u0131\u015f\u0131n\u0131 y\u00f6neten bir arka u\u00e7 hizmeti sunar. Kimlik do\u011frulama, Git entegrasyonu (commit’ler, branch’ler), i\u00e7erik \u00f6nizleme sunucusu ve da\u011f\u0131t\u0131m s\u00fcre\u00e7lerini basitle\u015ftirir. Tina Cloud, geli\u015ftiricilerin kendi Git sunucular\u0131n\u0131 veya kimlik do\u011frulama sistemlerini kurma y\u00fck\u00fcn\u00fc ortadan kald\u0131r\u0131r. \u00dccretsiz bir katman\u0131 bulunur ve \u00e7o\u011fu proje i\u00e7in yeterli esnekli\u011fi sa\u011flar.
\n* MDX Deste\u011fi:<\/strong> MDX, Markdown’\u0131n g\u00fcc\u00fcn\u00fc React bile\u015fenlerinin esnekli\u011fiyle birle\u015ftiren bir formattt\u0131r. TinaCMS, MDX alanlar\u0131n\u0131 destekleyerek i\u00e7erik edit\u00f6rlerinin Markdown dosyalar\u0131na \u00f6zel React bile\u015fenleri eklemesine olanak tan\u0131r.
\n* Bloklar ve Bile\u015fen Alanlar\u0131:<\/strong> TinaCMS, daha karma\u015f\u0131k ve dinamik sayfa d\u00fczenleri olu\u015fturmak i\u00e7in “bloklar” veya “bile\u015fen alanlar\u0131” tan\u0131mlaman\u0131za izin verir. Bu sayede i\u00e7erik edit\u00f6rleri, bir sayfaya farkl\u0131 t\u00fcrde i\u00e7erik bloklar\u0131 (\u00f6rne\u011fin, metin blo\u011fu, resim blo\u011fu, \u00e7a\u011fr\u0131-eylem blo\u011fu) ekleyebilir ve bunlar\u0131n s\u0131ralamas\u0131n\u0131 de\u011fi\u015ftirebilir.<\/p>\nGatsby ve TinaCMS Entegrasyonu: Ad\u0131m Ad\u0131m Rehber<\/h2>\n
\u00d6n Ko\u015fullar<\/h3>\n
\n* Git:<\/strong> Versiyon kontrol sistemi.
\n* Gatsby CLI:<\/strong> Gatsby projeleri olu\u015fturmak ve y\u00f6netmek i\u00e7in komut sat\u0131r\u0131 arac\u0131. npm install -g gatsby-cli<\/code> komutuyla kurabilirsiniz.<\/p>\nYeni Bir Gatsby Projesi Olu\u015fturma<\/h3>\n
gatsby new my-tina-gatsby-app https:\/\/github.com\/gatsbyjs\/gatsby-starter-hello-world\ncd my-tina-gatsby-app<\/code><\/pre>\nTinaCMS’i Projeye Ekleme<\/h3>\n
npm install --save tinacms @tinacms\/cli @tinacms\/gatsby gatsby-plugin-tinacms\nveya yarn ile:<\/h2>\nyarn add tinacms @tinacms\/cli @tinacms\/gatsby gatsby-plugin-tinacms<\/code><\/pre>\n
gatsby-config.js<\/code> dosyas\u0131na gatsby-plugin-tinacms<\/code> eklentisini eklemeniz gerekir:<\/p>\n\/\/ gatsby-config.js\nmodule.exports = {\n plugins: [\n gatsby-plugin-tinacms<\/code>,\n \/\/ Di\u011fer Gatsby eklentileriniz\n \/\/ Markdown dosyalar\u0131n\u0131 okumak i\u00e7in:\n {\n resolve: gatsby-source-filesystem<\/code>,\n options: {\n path: ${__dirname}\/content<\/code>, \/\/ \u0130\u00e7erik dosyalar\u0131n\u0131z\u0131n oldu\u011fu dizin\n name: content<\/code>,\n },\n },\n gatsby-transformer-remark<\/code>, \/\/ Markdown'\u0131 HTML'e d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in\n ],\n};<\/code><\/pre>\ngatsby-browser.js<\/code> veya gatsby-ssr.js<\/code> dosyalar\u0131nda) TinaProvider<\/code> ile sarmalaman\u0131z gerekir. Bu, TinaCMS’in i\u00e7eri\u011fi d\u00fczenleme modunda etkinle\u015fmesini sa\u011flar.<\/p>\n\/\/ gatsby-browser.js\nimport React from 'react';\nimport { TinaCMS, TinaProvider } from 'tinacms';\n\nexport const wrapRootElement = ({ element }) => {\n const cms = new TinaCMS({\n enabled: process.env.NODE_ENV === 'development', \/\/ Sadece geli\u015ftirme modunda etkinle\u015ftir\n \/\/ Di\u011fer TinaCMS yap\u0131land\u0131rmalar\u0131 buraya gelebilir\n });\n\n return \u0130\u00e7erik Modelleri (Schema) Tan\u0131mlama<\/h3>\n
tina<\/code> ad\u0131nda bir klas\u00f6r olu\u015fturun ve i\u00e7ine config.ts<\/code> (veya config.js<\/code>) ad\u0131nda bir dosya ekleyin:<\/p>\nmkdir tina\ntouch tina\/config.ts<\/code><\/pre>\ntina\/config.ts<\/code> dosyas\u0131na a\u015fa\u011f\u0131daki temel yap\u0131y\u0131 ekleyin:<\/p>\n\/\/ tina\/config.ts\nimport { defineConfig } from 'tinacms';\n\nexport default defineConfig({\n branch: 'main', \/\/ Git deponuzdaki ana branch ad\u0131\n clientId: process.env.TINA_CLIENT_ID, \/\/ Tina Cloud'dan al\u0131nacak\n token: process.env.TINA_TOKEN, \/\/ Tina Cloud'dan al\u0131nacak\n build: {\n outputFolder: 'admin',\n publicFolder: 'static',\n },\n media: {\n tina: {\n mediaRoot: 'uploads', \/\/ Y\u00fcklenen medya dosyalar\u0131n\u0131n saklanaca\u011f\u0131 dizin\n publicFolder: 'static',\n },\n },\n schema: {\n collections: [\n {\n name: 'post',\n label: 'Blog Yaz\u0131lar\u0131',\n path: 'content\/posts', \/\/ Markdown dosyalar\u0131n\u0131n saklanaca\u011f\u0131 dizin\n fields: [\n {\n type: 'string',\n name: 'title',\n label: 'Ba\u015fl\u0131k',\n isTitle: true,\n required: true,\n },\n {\n type: 'string',\n name: 'author',\n label: 'Yazar',\n },\n {\n type: 'datetime',\n name: 'date',\n label: 'Tarih',\n ui: {\n dateFormat: 'MMMM DD, YYYY',\n timeFormat: 'HH:mm',\n },\n },\n {\n type: 'string',\n name: 'description',\n label: 'A\u00e7\u0131klama',\n ui: {\n component: 'textarea',\n },\n },\n {\n type: 'image',\n name: 'hero_image',\n label: 'Kapak Resmi',\n },\n {\n type: 'richText', \/\/ Markdown veya MDX deste\u011fi i\u00e7in\n name: 'body',\n label: '\u0130\u00e7erik',\n isBody: true,\n },\n ],\n },\n \/\/ Di\u011fer i\u00e7erik t\u00fcrleri (sayfalar, \u00fcr\u00fcnler vb.) buraya eklenebilir\n ],\n },\n});<\/code><\/pre>\ncontent\/posts<\/code> dizininde saklanan blog yaz\u0131lar\u0131 i\u00e7in bir model tan\u0131mlar. Her yaz\u0131n\u0131n bir ba\u015fl\u0131\u011f\u0131, yazar\u0131, tarihi, a\u00e7\u0131klamas\u0131, kapak resmi ve i\u00e7eri\u011fi olacakt\u0131r.<\/p>\nnpx tinacms dev<\/code><\/pre>\ntina\/__generated__\/<\/code> dizininde gerekli dosyalar\u0131 olu\u015fturacakt\u0131r. Bu komutu Gatsby geli\u015ftirme sunucusunu \u00e7al\u0131\u015ft\u0131rmadan \u00f6nce veya her schema de\u011fi\u015fikli\u011finden sonra \u00e7al\u0131\u015ft\u0131rman\u0131z \u00f6nemlidir.<\/p>\nGatsby ile \u0130\u00e7eri\u011fi Sorgulama<\/h3>\n
gatsby-source-filesystem<\/code> ve gatsby-transformer-remark<\/code> gibi eklentiler, Markdown dosyalar\u0131n\u0131 GraphQL katman\u0131na dahil etmenizi sa\u011flar.<\/p>\nquery BlogPosts {\n allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {\n nodes {\n id\n frontmatter {\n title\n date(formatString: \"MMMM DD, YYYY\")\n description\n author\n hero_image\n }\n fields {\n slug\n }\n }\n }\n}<\/code><\/pre>\n# src\/templates\/BlogPost.js veya src\/pages\/blog\/{MarkdownRemark.fields__slug}.js\nquery BlogPostBySlug($slug: String!) {\n markdownRemark(fields: { slug: { eq: $slug } }) {\n id\n html\n frontmatter {\n title\n date(formatString: \"MMMM DD, YYYY\")\n description\n author\n hero_image\n }\n }\n}<\/code><\/pre>\ngatsby-node.js<\/code> dosyas\u0131nda dinamik sayfalar olu\u015fturmak veya React bile\u015fenlerinizde useStaticQuery<\/code> hook’u ile veri \u00e7ekmek i\u00e7in kullan\u0131labilir.<\/p>\nCanl\u0131 D\u00fczenleme (Visual Editing) Aktifle\u015ftirme<\/h3>\n
useTina<\/code> hook’unu kullanman\u0131z gerekir.<\/p>\ngatsby-node.js<\/code> dosyan\u0131zda dinamik sayfa olu\u015ftururken TinaCMS i\u00e7in gerekli collection<\/code> ve document<\/code> bilgilerini sa\u011flaman\u0131z gerekebilir. Ancak basit bir \u00f6rnek i\u00e7in, do\u011frudan sayfa bile\u015feninde useTina<\/code>‘y\u0131 nas\u0131l kullanaca\u011f\u0131m\u0131za bakal\u0131m.<\/p>\nsrc\/pages\/index.js<\/code> veya bir blog yaz\u0131s\u0131 \u015fablonunuzda (\u00f6rne\u011fin src\/templates\/BlogPost.js<\/code>):<\/p>\n\/\/ src\/templates\/BlogPost.js\nimport React from 'react';\nimport { graphql } from 'gatsby';\nimport { useTina } from 'tinacms\/dist\/react'; \/\/ TinaCMS React hook'u\n\nconst BlogPost = ({ data }) => {\n \/\/ useTina hook'u, canl\u0131 d\u00fczenleme modunda i\u00e7eri\u011fi g\u00fcncelleyecektir\n const { data: liveData } = useTina({\n query: data.rawQuery, \/\/ Gatsby'den gelen ham GraphQL sorgusu\n variables: data.rawVariables, \/\/ Gatsby'den gelen ham GraphQL de\u011fi\u015fkenleri\n data: data.markdownRemark, \/\/ Gatsby'den gelen orijinal i\u00e7erik verisi\n });\n\n const post = liveData.markdownRemark;\n\n return (\n \n )}\n
\n query BlogPostBySlug($id: String!) {\n markdownRemark(id: { eq: $id }) {\n id\n html\n frontmatter {\n title\n date(formatString: \"MMMM DD, YYYY\")\n description\n author\n hero_image\n }\n # TinaCMS'in canl\u0131 d\u00fczenleme i\u00e7in ihtiya\u00e7 duydu\u011fu raw sorgu ve de\u011fi\u015fkenler\n rawQuery\n rawVariables\n }\n }\n<\/code>;\n\nexport default BlogPost;<\/code><\/pre>\nuseTina<\/code> hook’u, Gatsby’den gelen veriyi TinaCMS’in canl\u0131 d\u00fczenleme katman\u0131na ba\u011flar. rawQuery<\/code> ve rawVariables<\/code> alanlar\u0131, gatsby-plugin-tinacms<\/code> taraf\u0131ndan otomatik olarak eklenir ve TinaCMS’in arka planda do\u011fru i\u00e7eri\u011fi sorgulamas\u0131n\u0131 sa\u011flar.<\/p>\ngatsby develop<\/code>), taray\u0131c\u0131n\u0131zda sitenizi ziyaret edin. URL’ye \/#\/admin<\/code> ekleyerek TinaCMS y\u00f6netim paneline eri\u015febilirsiniz. \u00d6rne\u011fin: http:\/\/localhost:8000\/#\/admin<\/code>. Burada, Blog Yaz\u0131lar\u0131<\/code> koleksiyonunuzu ve i\u00e7eriklerinizi g\u00f6rebilirsiniz. Bir i\u00e7eri\u011fi se\u00e7ti\u011finizde, sayfan\u0131n sa\u011f taraf\u0131nda TinaCMS’in d\u00fczenleme aray\u00fcz\u00fc belirecek ve i\u00e7eri\u011fi g\u00f6rsel olarak d\u00fczenleyebileceksiniz.<\/p>\nTina Cloud ve Da\u011f\u0131t\u0131m<\/h3>\n
\n2. Repository Ba\u011flant\u0131s\u0131:<\/strong> Tina Cloud projenizi Git deponuzla (GitHub, GitLab vb.) ba\u011flay\u0131n. Tina Cloud, deponuza eri\u015fim izinleri isteyecektir.
\n3. Client ID ve Token:<\/strong> Tina Cloud projenizden TINA_CLIENT_ID<\/code> ve TINA_TOKEN<\/code> de\u011ferlerini al\u0131n. Bu de\u011ferleri tina\/config.ts<\/code> dosyan\u0131zda ve da\u011f\u0131t\u0131m ortam\u0131n\u0131z\u0131n (Netlify, Vercel) ortam de\u011fi\u015fkenlerinde ayarlaman\u0131z gerekir.
\n4. Da\u011f\u0131t\u0131m Stratejileri:<\/strong> Gatsby sitenizi Netlify veya Vercel gibi bir platforma da\u011f\u0131tabilirsiniz. Bu platformlar, Git deposundaki de\u011fi\u015fiklikleri alg\u0131layarak sitenizi otomatik olarak yeniden derler ve yay\u0131nlar. Tina Cloud, i\u00e7erik de\u011fi\u015fikliklerini do\u011frudan Git deposuna commitleyece\u011fi i\u00e7in, bu da\u011f\u0131t\u0131m platformlar\u0131 otomatik olarak g\u00fcncellenmi\u015f i\u00e7eri\u011fi yay\u0131nlayacakt\u0131r.<\/p>\nGeli\u015fmi\u015f TinaCMS \u00d6zellikleri ve Kullan\u0131m Senaryolar\u0131<\/h2>\n
MDX Deste\u011fi<\/h3>\n
richText<\/code> alan tipi arac\u0131l\u0131\u011f\u0131yla MDX’i destekler. Schema’n\u0131zda type: 'richText'<\/code> olarak tan\u0131mlad\u0131\u011f\u0131n\u0131z bir alanda, TinaCMS edit\u00f6r\u00fc Markdown s\u00f6zdiziminin yan\u0131 s\u0131ra React bile\u015fenlerini de tan\u0131man\u0131za ve d\u00fczenlemenize olanak tan\u0131r.<\/p>\nCallout<\/code> bile\u015fenini MDX i\u00e7eri\u011finize eklemek isterseniz:<\/p>\n\/\/ src\/components\/Callout.js\nimport React from 'react';\n\nconst Callout = ({ children }) => (\n tina\/config.ts<\/code> dosyan\u0131zda richText<\/code> alan\u0131n\u0131za bu bile\u015feni tan\u0131tabilirsiniz:<\/p>\n\/\/ tina\/config.ts (richText alan\u0131 i\u00e7inde)\n{\n type: 'richText',\n name: 'body',\n label: '\u0130\u00e7erik',\n isBody: true,\n templates: [\n {\n name: 'Callout',\n label: '\u00d6nemli Bilgi Kutusu',\n fields: [\n {\n type: 'string',\n name: 'text',\n label: 'Metin',\n required: true,\n },\n ],\n },\n ],\n},<\/code><\/pre>\ngatsby-plugin-mdx<\/code> kullanarak bu bile\u015fenleri i\u015fleyebilirsiniz.<\/p>\nBloklar ve Bile\u015fen Alanlar\u0131<\/h3>\n
ui: { component: 'blocks' }<\/code> veya ui: { component: 'component' }<\/code> kullanarak bu \u00f6zelli\u011fi etkinle\u015ftirebilirsiniz:<\/p>\n\/\/ tina\/config.ts\n{\n type: 'object',\n name: 'page_blocks',\n label: 'Sayfa Bloklar\u0131',\n list: true, \/\/ Birden fazla blok eklemeye izin ver\n ui: {\n component: 'blocks', \/\/ Blok d\u00fczenleyiciyi etkinle\u015ftir\n },\n templates: [\n {\n name: 'HeroSection',\n label: 'Kahraman B\u00f6l\u00fcm\u00fc',\n fields: [\n { type: 'string', name: 'headline', label: 'Ba\u015fl\u0131k' },\n { type: 'string', name: 'subtitle', label: 'Alt Ba\u015fl\u0131k', ui: { component: 'textarea' } },\n { type: 'image', name: 'background_image', label: 'Arka Plan Resmi' },\n ],\n },\n {\n name: 'TextSection',\n label: 'Metin B\u00f6l\u00fcm\u00fc',\n fields: [\n { type: 'richText', name: 'body', label: 'Metin \u0130\u00e7eri\u011fi' },\n ],\n },\n \/\/ Di\u011fer blok t\u00fcrleri buraya eklenebilir\n ],\n},<\/code><\/pre>\n\u0130li\u015fkisel Veri Modelleri (References)<\/h3>\n
type: 'reference'<\/code> alan tipi ile bu t\u00fcr ili\u015fkileri destekler.<\/p>\nauthor<\/code> koleksiyonunuz ve bir post<\/code> koleksiyonunuz varsa:<\/p>\n\/\/ tina\/config.ts (author koleksiyonu)\n{\n name: 'author',\n label: 'Yazarlar',\n path: 'content\/authors',\n fields: [\n { type: 'string', name: 'name', label: 'Ad Soyad', isTitle: true, required: true },\n { type: 'image', name: 'avatar', label: 'Avatar' },\n { type: 'string', name: 'bio', label: 'Biyografi', ui: { component: 'textarea' } },\n ],\n},\n\/\/ tina\/config.ts (post koleksiyonu i\u00e7inde)\n{\n type: 'reference',\n name: 'author',\n label: 'Yazar',\n collections: ['author'], \/\/ Referans verilecek koleksiyon\n},<\/code><\/pre>\nTinaCMS Bile\u015fenlerini \u00d6zelle\u015ftirme<\/h3>\n
ui: { component: MyCustomComponent }<\/code> \u00f6zelli\u011fini kullanarak kendi React bile\u015fenlerinizi alanlara ba\u011flayabilirsiniz.<\/p>\n\/\/ tina\/config.ts (bir alan tan\u0131m\u0131 i\u00e7inde)\n{\n type: 'string',\n name: 'color',\n label: 'Renk',\n ui: {\n component: 'ColorPicker', \/\/ \u00d6zel React bile\u015feniniz\n },\n},<\/code><\/pre>\nColorPicker<\/code> bile\u015fenini olu\u015fturursunuz:<\/p>\n\/\/ src\/components\/ColorPicker.js (veya uygun bir yer)\nimport React from 'react';\n\nconst ColorPicker = ({ input }) => {\n \/\/ input.value: Mevcut de\u011fer\n \/\/ input.onChange: De\u011fer de\u011fi\u015fti\u011finde \u00e7a\u011fr\u0131lacak fonksiyon\n return (\n TinaCMS ve Gatsby Kullan\u0131m\u0131n\u0131n Avantajlar\u0131 ve Dezavantajlar\u0131<\/h2>\n
Avantajlar<\/h3>\n
\n* Git Tabanl\u0131 Versiyon Kontrol\u00fc:<\/strong> T\u00fcm i\u00e7erik de\u011fi\u015fiklikleri Git deposunda izlenir. Bu, i\u00e7erik i\u00e7in g\u00fc\u00e7l\u00fc bir versiyon kontrol\u00fc, geri alma yetene\u011fi, i\u015f ak\u0131\u015f\u0131 entegrasyonu ve do\u011fal bir yedekleme mekanizmas\u0131 sa\u011flar.
\n* Y\u00fcksek Performansl\u0131 Statik Siteler:<\/strong> Gatsby’nin sa\u011flad\u0131\u011f\u0131 performans optimizasyonlar\u0131 sayesinde, TinaCMS ile y\u00f6netilen siteler son derece h\u0131zl\u0131 y\u00fcklenir, bu da daha iyi kullan\u0131c\u0131 deneyimi ve SEO sonu\u00e7lar\u0131 anlam\u0131na gelir.
\n* Esnek Veri Modelleme:<\/strong> TinaCMS’in TypeScript tabanl\u0131 schema sistemi, i\u00e7eri\u011finizin yap\u0131s\u0131n\u0131 g\u00fc\u00e7l\u00fc ve tip g\u00fcvenli bir \u015fekilde tan\u0131mlaman\u0131za olanak tan\u0131r. Bu, karma\u015f\u0131k i\u00e7erik modellerini bile kolayca y\u00f6netmenizi sa\u011flar.
\n* Canl\u0131 \u00d6nizleme ve D\u00fczenleme (Visual Editing):<\/strong> \u0130\u00e7erik edit\u00f6rleri, de\u011fi\u015fikliklerini ger\u00e7ek zamanl\u0131 olarak sitenin \u00f6nizlemesinde g\u00f6rebilirler. Bu, hatalar\u0131 azalt\u0131r ve i\u00e7erik olu\u015fturma s\u00fcrecini daha verimli hale getirir.
\n* \u00d6l\u00e7eklenebilirlik ve G\u00fcvenlik:<\/strong> Statik siteler do\u011fas\u0131 gere\u011fi daha g\u00fcvenli ve CDN’ler arac\u0131l\u0131\u011f\u0131yla kolayca \u00f6l\u00e7eklenebilir. TinaCMS, bu avantajlar\u0131 korurken i\u00e7erik y\u00f6netimini kolayla\u015ft\u0131r\u0131r.
\n* MDX ve Bile\u015fen Tabanl\u0131 \u0130\u00e7erik:<\/strong> MDX deste\u011fi ve blok\/bile\u015fen alanlar\u0131, i\u00e7erik edit\u00f6rlerinin daha zengin ve interaktif sayfalar olu\u015fturmas\u0131na olanak tan\u0131r, bu da tasar\u0131m esnekli\u011fini art\u0131r\u0131r.
\n* Open-Source ve Topluluk Deste\u011fi:<\/strong> TinaCMS a\u00e7\u0131k kaynakl\u0131d\u0131r ve aktif bir toplulu\u011fa sahiptir, bu da s\u00fcrekli geli\u015fim ve destek anlam\u0131na gelir.<\/p>\nDezavantajlar<\/h3>\n
useTina<\/code> hook’u gibi kavramlar, \u00f6zellikle yeni ba\u015flayanlar i\u00e7in bir \u00f6\u011frenme e\u011frisi gerektirebilir. Tina Cloud’un da kendi kurulum ve yap\u0131land\u0131rma ad\u0131mlar\u0131 vard\u0131r.
\n* \u0130lk Kurulum Karma\u015f\u0131kl\u0131\u011f\u0131:<\/strong> Bir Gatsby projesine TinaCMS’i entegre etmek, birden fazla paketin kurulumunu, gatsby-config.js<\/code> ve tina\/config.ts<\/code> dosyalar\u0131n\u0131n yap\u0131land\u0131r\u0131lmas\u0131n\u0131 gerektirir. \u0130lk kurulum, geleneksel bir CMS’e g\u00f6re daha fazla teknik bilgi gerektirebilir.
\n* Ger\u00e7ek Zamanl\u0131 Olmayan \u0130\u00e7erik G\u00fcncellemeleri:<\/strong> Her i\u00e7erik de\u011fi\u015fikli\u011fi bir Git commit’i tetikler ve genellikle sitenin yeniden derlenmesini (build) gerektirir. Bu, de\u011fi\u015fikliklerin canl\u0131ya yans\u0131mas\u0131 i\u00e7in belirli bir bekleme s\u00fcresi anlam\u0131na gelir. B\u00fcy\u00fck sitelerde build s\u00fcreleri uzayabilir.
\n* Build S\u00fcreleri:<\/strong> \u00c7ok b\u00fcy\u00fck Gatsby sitelerinde, her i\u00e7erik g\u00fcncellemesinde sitenin tamam\u0131n\u0131n yeniden derlenmesi uzun s\u00fcrebilir. Bu, \u00e7ok s\u0131k i\u00e7erik g\u00fcncelleyen projeler i\u00e7in bir darbo\u011faz olu\u015fturabilir. Ancak, inkremental build (par\u00e7al\u0131 derleme) gibi \u00e7\u00f6z\u00fcmler bu sorunu hafifletmeye yard\u0131mc\u0131 olabilir.
\n* Tina Cloud Ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 (\u00dcretim \u0130\u00e7in):<\/strong> \u00dcretim ortam\u0131nda TinaCMS’in tam i\u015flevselli\u011fini (kimlik do\u011frulama, Git entegrasyonu) kullanmak i\u00e7in Tina Cloud’a ba\u011f\u0131ml\u0131l\u0131k vard\u0131r. \u00dccretsiz katman \u00e7o\u011fu proje i\u00e7in yeterli olsa da, daha b\u00fcy\u00fck \u00f6l\u00e7ekli projeler i\u00e7in \u00fccretli planlar gerekebilir.
\n* Geli\u015ftirici M\u00fcdahalesi:<\/strong> TinaCMS, i\u00e7erik edit\u00f6rlerine b\u00fcy\u00fck bir esneklik sunsa da, yeni i\u00e7erik modelleri veya \u00f6zel bile\u015fenler eklemek hala geli\u015ftirici m\u00fcdahalesi gerektirir. Bu, tamamen “no-code” bir \u00e7\u00f6z\u00fcm arayanlar i\u00e7in uygun olmayabilir.<\/p>\nSonu\u00e7<\/h2>\n
\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"TinaCMS ve Gatsby ile Dinamik \u0130\u00e7erik Y\u00f6netimi: Kapsaml\u0131 Bir Rehber\nModern web geli\u015ftirme d\u00fcnyas\u0131, h\u0131z, g\u00fcvenlik ve \u00f6l\u00e7eklenebilirlik gibi","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-31515","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n