G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve kolayca y\u00f6netilebilir bir web sitesine sahip olmak kritik \u00f6nem ta\u015f\u0131yor. Ancak geleneksel i\u00e7erik y\u00f6netim sistemleri (CMS) veya eski moda temalar genellikle \u015fi\u015fkin kodlar, performans sorunlar\u0131 ve k\u0131s\u0131tl\u0131 \u00f6zelle\u015ftirme se\u00e7enekleriyle birlikte gelir. Peki ya hem bu sorunlar\u0131n \u00fcstesinden gelebilecek hem de size modern web geli\u015ftirmenin t\u00fcm esnekliklerini sunabilecek bir \u00e7\u00f6z\u00fcm olsayd\u0131? \u0130\u015fte tam da bu noktada, Jekyll ve Tailwind CSS ikilisi devreye giriyor. Bu makalede, size ad\u0131m ad\u0131m kendi modern Jekyll teman\u0131z\u0131 Tailwind CSS ile nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, mevcut \u00fccretsiz \u015fablonlardan nas\u0131l ilham alaca\u011f\u0131n\u0131z\u0131 ve web sitenizi yeni nesil standartlara nas\u0131l ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 anlataca\u011f\u0131m. E\u011fer statik sitelerin h\u0131z\u0131na, g\u00fcvenli\u011fine ve performans\u0131na hayransan\u0131z, ayn\u0131 zamanda tasar\u0131mda s\u0131f\u0131rdan her \u015feyi kontrol etmek istiyorsan\u0131z, do\u011fru yerdesiniz demektir. Bu makale sayesinde, kodlama bilginiz olmasa bile konuya hakim olmaya ba\u015flayacak, modern web siteleri in\u015fa etmenin kap\u0131lar\u0131n\u0131 aralayacaks\u0131n\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? \u00d6yleyse ba\u015flayal\u0131m!<\/p>\n
\n Uzman \u0130pucu: Statik siteler, sunucu tarafl\u0131 i\u015fleme ihtiya\u00e7 duymad\u0131klar\u0131 i\u00e7in g\u00fcvenlik a\u00e7\u0131klar\u0131 a\u00e7\u0131s\u0131ndan \u00e7ok daha diren\u00e7lidir ve daha az bak\u0131ma ihtiya\u00e7 duyarlar. Bu da onlar\u0131 k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projeler, bloglar veya portf\u00f6yler i\u00e7in ideal k\u0131lar.\n <\/div>\n
Modern bir web deneyimi sunmak, sadece estetikten ibaret de\u011fildir; ayn\u0131 zamanda eri\u015filebilirlik, h\u0131z ve s\u00fcrd\u00fcr\u00fclebilirlik gibi \u00f6nemli fakt\u00f6rleri de kapsar. Geleneksel yakla\u015f\u0131mlar, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli ve dinamik web uygulamalar\u0131 i\u00e7in tasarlanm\u0131\u015f olsalar da, daha basit ve bilgilendirici web siteleri i\u00e7in gereksiz karma\u015f\u0131kl\u0131k getirebilir. Bu durum, geli\u015ftiricilerin ve i\u00e7erik olu\u015fturucular\u0131n daha hafif, daha h\u0131zl\u0131 ve y\u00f6netimi daha kolay alternatifler aray\u0131\u015f\u0131na itmi\u015ftir. Jekyll gibi statik site olu\u015fturucular\u0131, bu ihtiyaca m\u00fckemmel bir yan\u0131t sunarken, Tailwind CSS gibi utility-first (yard\u0131mc\u0131 \u00f6ncelikli) CSS frameworkleri de geli\u015ftiricilere e\u015fi benzeri g\u00f6r\u00fclmemi\u015f bir h\u0131z ve esneklik sa\u011flar. Birlikte kullan\u0131ld\u0131klar\u0131nda, bu iki g\u00fc\u00e7l\u00fc ara\u00e7, sizi \u015fi\u015fkin CSS dosyalar\u0131ndan, karma\u015f\u0131k JavaScript k\u00fct\u00fcphanelerinden ve sunucu taraf\u0131 ba\u011f\u0131ml\u0131l\u0131klar\u0131ndan kurtararak, sadece ihtiyac\u0131n\u0131z olan\u0131, m\u00fcmk\u00fcn olan en verimli \u015fekilde olu\u015fturman\u0131za olanak tan\u0131r. B\u00f6ylece, kullan\u0131c\u0131lar\u0131n\u0131z i\u00e7in daha h\u0131zl\u0131 y\u00fcklenen sayfalar, daha ak\u0131c\u0131 bir deneyim ve sizin i\u00e7in daha kolay bak\u0131m anlam\u0131na gelir. Bu modern geli\u015ftirme yakla\u015f\u0131m\u0131, \u00f6zellikle bloglar, ki\u015fisel web siteleri, proje dok\u00fcmantasyonlar\u0131 veya k\u00fc\u00e7\u00fck i\u015fletme sayfalar\u0131 i\u00e7in idealdir. Ayr\u0131ca, bu teknolojilerin a\u00e7\u0131k kaynak do\u011fas\u0131, s\u00fcrekli geli\u015fen bir topluluk deste\u011fi ve geni\u015f kaynaklara eri\u015fim sa\u011flar. Bu makalenin ilerleyen b\u00f6l\u00fcmlerinde, bu g\u00fc\u00e7l\u00fc ikiliyi nas\u0131l bir araya getirece\u011finizi ve kendi modern web sitenizi nas\u0131l hayata ge\u00e7irece\u011finizi detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Geli\u015ftirme s\u00fcrecini basitle\u015ftirirken, ayn\u0131 zamanda ortaya \u00e7\u0131kan \u00fcr\u00fcn\u00fcn kalitesinden ve performans\u0131ndan \u00f6d\u00fcn vermeyen bir yakla\u015f\u0131ma tan\u0131k olacaks\u0131n\u0131z.<\/p>\n
Temel Kavramlar: Jekyll ve Tailwind CSS Nedir ve Neden Birlikte Harikalar?<\/h2>\n Herhangi bir teknoloji y\u0131\u011f\u0131n\u0131yla derinlemesine dalmadan \u00f6nce, temel bile\u015fenlerini anlamak \u00e7ok \u00f6nemlidir. Bu b\u00f6l\u00fcmde, Jekyll ve Tailwind CSS’in ne oldu\u011funu, neden bu kadar pop\u00fcler olduklar\u0131n\u0131 ve neden bir araya geldiklerinde harikalar yaratt\u0131klar\u0131n\u0131 a\u00e7\u0131klayaca\u011f\u0131z. Bu bilgileri edinmek, modern web geli\u015ftirme yolculu\u011funuzda sa\u011flam bir temel olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r. Bu g\u00fc\u00e7l\u00fc kombinasyonun, geli\u015ftirme s\u00fcrecinizi nas\u0131l basitle\u015ftirdi\u011fini ve sonu\u00e7 \u00fcr\u00fcn\u00fcn\u00fcz\u00fcn kalitesini nas\u0131l art\u0131rd\u0131\u011f\u0131n\u0131 g\u00f6rmek, sizi \u015fa\u015f\u0131rtabilir. Statik web sitelerinin y\u00fckseli\u015fiyle birlikte, Jekyll gibi ara\u00e7lar geli\u015ftiriciler i\u00e7in vazge\u00e7ilmez hale gelmi\u015ftir. Ayn\u0131 \u015fekilde, CSS geli\u015ftirme pratiklerini k\u00f6kten de\u011fi\u015ftiren Tailwind CSS, tasar\u0131m s\u00fcrecine yeni bir soluk getirmi\u015ftir. Bu iki teknoloji, modern web standartlar\u0131n\u0131 yakalamak ve \u00fcst d\u00fczey kullan\u0131c\u0131 deneyimleri sunmak isteyen herkes i\u00e7in ideal bir ikilidir. Peki, bu sihirli kombinasyonun perde arkas\u0131nda yatan g\u00fc\u00e7ler nelerdir?<\/p>\n
Jekyll Nedir? Neden Statik Site Olu\u015fturucu Kullanmal\u0131y\u0131z?<\/h3>\n Jekyll, Ruby ile yaz\u0131lm\u0131\u015f basit, blog odakl\u0131 bir statik site olu\u015fturucudur. Dinamik veritabanlar\u0131na veya sunucu taraf\u0131 i\u015flemlere ihtiya\u00e7 duymadan, Markdown veya Textile format\u0131ndaki d\u00fcz metin dosyalar\u0131n\u0131z\u0131 statik HTML sayfalar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Basit\u00e7e ifade etmek gerekirse, Jekyll i\u00e7eri\u011finizi al\u0131r, belirlenen \u015fablonlara g\u00f6re i\u015fler ve sunucunuza y\u00fcklemeye haz\u0131r, tamamen statik bir web sitesi \u00e7\u0131kt\u0131s\u0131 verir. Bu, web sitenizin sunucu taraf\u0131nda i\u015flenecek herhangi bir kod i\u00e7ermedi\u011fi anlam\u0131na gelir; yani daha h\u0131zl\u0131, daha g\u00fcvenli ve daha ekonomiktir. Bir\u00e7ok geli\u015ftirici ve \u015firket, WordPress veya di\u011fer geleneksel CMS’ler yerine Jekyll’i tercih etmektedir \u00e7\u00fcnk\u00fc statik siteler, performans, g\u00fcvenlik ve bak\u0131m kolayl\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan \u00f6nemli avantajlar sunar. \u00d6rne\u011fin, bir veri taban\u0131 olmamas\u0131, SQL enjeksiyonu gibi bir\u00e7ok yayg\u0131n g\u00fcvenlik tehdidini ortadan kald\u0131r\u0131r. Ayr\u0131ca, tamamen statik HTML, CSS ve JavaScript dosyalar\u0131ndan olu\u015ftu\u011fu i\u00e7in, web siteleri \u0131\u015f\u0131k h\u0131z\u0131nda y\u00fcklenir ve bu da hem kullan\u0131c\u0131 deneyimini hem de arama motoru s\u0131ralamalar\u0131n\u0131 olumlu etkiler. GitHub Pages gibi platformlarda \u00fccretsiz olarak bar\u0131nd\u0131r\u0131labilmesi de Jekyll’i \u00f6zellikle b\u00fct\u00e7e dostu projeler i\u00e7in cazip bir se\u00e7enek haline getirir. Jekyll, ayn\u0131 zamanda, i\u00e7erik y\u00f6netimi i\u00e7in Git gibi versiyon kontrol sistemlerini kullanma olana\u011f\u0131 sunar, bu da i\u015fbirli\u011fi ve i\u00e7erik revizyonlar\u0131 i\u00e7in inan\u0131lmaz bir esneklik sa\u011flar. Ayr\u0131ca, Liquid \u015fablonlama dilini kullanarak i\u00e7eriklerinizi dinamik olarak d\u00fczenleyebilir ve yeniden kullan\u0131labilir bile\u015fenler olu\u015fturabilirsiniz, bu da geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve tekrarlayan g\u00f6revleri azalt\u0131r.<\/p>\n
Tailwind CSS Nedir? Utility-First Yakla\u015f\u0131m\u0131n G\u00fcc\u00fc<\/h3>\n Tailwind CSS, bir CSS framework’\u00fcnden \u00e7ok daha fazlas\u0131d\u0131r; modern web tasar\u0131m\u0131na utility-first ad\u0131nda yepyeni bir yakla\u015f\u0131m getirir. Geleneksel CSS frameworkleri genellikle \u00f6nceden tan\u0131mlanm\u0131\u015f bile\u015fenler (kartlar, butonlar vb.) sunarken, Tailwind size do\u011frudan HTML dosyan\u0131zda uygulayabilece\u011finiz d\u00fc\u015f\u00fck seviyeli “utility” s\u0131n\u0131flar\u0131 (\u00f6rne\u011fin, <\/p>\np-4<\/pre>\n<\/code><\/code>, <\/p>\nflex<\/pre>\n<\/code><\/code>, <\/p>\ntext-lg<\/pre>\n<\/code><\/code>) sa\u011flar. Bu yakla\u015f\u0131m, \u00f6zel CSS yazmak zorunda kalmadan, do\u011frudan HTML yap\u0131n\u0131zda tasar\u0131m yapman\u0131za olanak tan\u0131r. Bir bile\u015fen tasarlarken, geleneksel y\u00f6ntemlerle bir CSS s\u0131n\u0131f\u0131 tan\u0131mlar, bu s\u0131n\u0131fa stil \u00f6zelliklerini atar ve ard\u0131ndan HTML'nizde bu s\u0131n\u0131f\u0131 kullan\u0131rs\u0131n\u0131z. Tailwind ile ise, do\u011frudan HTML elementine birden \u00e7ok yard\u0131mc\u0131 s\u0131n\u0131f ekleyerek istedi\u011finiz g\u00f6r\u00fcn\u00fcm\u00fc elde edersiniz. \u00d6rne\u011fin, bir d\u00fc\u011fme olu\u015fturmak istedi\u011finizde, \u015f\u00f6yle bir \u015fey yazabilirsiniz:<\/p>\n
\n T\u0131kla Bana\n<\/button>\n<\/pre>\n<\/code><\/p>\n
Bu, CSS dosyan\u0131zda \u00f6zel bir stil tan\u0131mlamak yerine, HTML i\u00e7inde stil olu\u015fturman\u0131n avantajlar\u0131n\u0131 sunar. En b\u00fcy\u00fck faydalar\u0131ndan biri, geli\u015ftirme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rmas\u0131d\u0131r. Ayr\u0131ca, her bir stil i\u00e7in ayr\u0131 bir s\u0131n\u0131f ad\u0131 d\u00fc\u015f\u00fcnme zorunlulu\u011funu ortadan kald\u0131r\u0131r, bu da CSS dosyan\u0131z\u0131n \u015fi\u015fmesini engeller ve \"yaln\u0131zca ihtiyac\u0131n\u0131z olan CSS'i g\u00f6nder\" felsefesini destekler. Tailwind, PurgeCSS ile birle\u015fti\u011finde, \u00fcretimde kullan\u0131lmayan t\u00fcm CSS s\u0131n\u0131flar\u0131n\u0131 otomatik olarak kald\u0131r\u0131r, bu da son derece k\u00fc\u00e7\u00fck ve optimize edilmi\u015f bir CSS dosyas\u0131yla sonu\u00e7lan\u0131r. Bu da web sitenizin y\u00fcklenme h\u0131z\u0131n\u0131 do\u011frudan etkileyen \u00f6nemli bir performans optimizasyonudur. \u00d6zellikle b\u00fcy\u00fck projelerde, tutarl\u0131 bir tasar\u0131m dili olu\u015fturmay\u0131 ve s\u00fcrd\u00fcrmeyi kolayla\u015ft\u0131r\u0131r. Ek olarak, responsive tasar\u0131m i\u00e7in sezgisel ve kullan\u0131m\u0131 kolay yard\u0131mc\u0131 s\u0131n\u0131flar sunar, b\u00f6ylece farkl\u0131 ekran boyutlar\u0131na uyum sa\u011flayan tasar\u0131mlar\u0131 h\u0131zl\u0131ca uygulayabilirsiniz.<\/p>\n
Jekyll ve Tailwind CSS Sinerjisi: Modern Web Geli\u015ftirme<\/h3>\n Jekyll ve Tailwind CSS, modern web geli\u015ftirme d\u00fcnyas\u0131nda birbirlerini m\u00fckemmel \u015fekilde tamamlayan iki g\u00fc\u00e7l\u00fc ara\u00e7t\u0131r. Jekyll'in statik site olu\u015fturma yetene\u011fi, web sitenizin inan\u0131lmaz derecede h\u0131zl\u0131, g\u00fcvenli ve bar\u0131nd\u0131rmas\u0131 uygun olmas\u0131n\u0131 sa\u011flar. \u0130\u00e7eri\u011finizi Markdown gibi basit metin formatlar\u0131nda y\u00f6netirken, Liquid \u015fablonlama dili sayesinde dinamik g\u00f6r\u00fcnen ancak asl\u0131nda statik olan sayfalar olu\u015fturabilirsiniz. Tailwind CSS ise, bu statik yap\u0131n\u0131n \u00fczerine giydirilecek k\u0131yafet gibidir. Geleneksel CSS yazma zorunlulu\u011funu ortadan kald\u0131rarak, do\u011frudan HTML i\u00e7inde stil tan\u0131mlama \u00f6zg\u00fcrl\u00fc\u011f\u00fc sunar. Bu ikilinin birle\u015fimiyle, bir yandan Jekyll'in performans ve g\u00fcvenlik avantajlar\u0131ndan faydalan\u0131rken, di\u011fer yandan Tailwind'in sundu\u011fu s\u0131n\u0131rs\u0131z tasar\u0131m esnekli\u011fi ve h\u0131zl\u0131 geli\u015ftirme kapasitesinden yararlan\u0131rs\u0131n\u0131z. \u00d6rne\u011fin, Jekyll'in _includes<\/code> yap\u0131s\u0131yla yeniden kullan\u0131labilir HTML bile\u015fenleri olu\u015fturup, bu bile\u015fenlere do\u011frudan Tailwind s\u0131n\u0131flar\u0131n\u0131 uygulayarak h\u0131zl\u0131ca tasar\u0131mlar\u0131n\u0131z\u0131 prototiple\u015ftirebilirsiniz. Bu sinerji, \u00f6zellikle bloglar, ki\u015fisel portf\u00f6yler, proje dok\u00fcmantasyonlar\u0131 ve k\u00fc\u00e7\u00fck i\u015fletme web siteleri i\u00e7in ideal bir \u00e7\u00f6z\u00fcmd\u00fcr. Geli\u015ftiriciler, sunucu taraf\u0131 sorunlarla u\u011fra\u015fmak yerine, i\u00e7eri\u011fe ve kullan\u0131c\u0131 deneyimine odaklanabilirler. Tailwind'in \"utility-first\" yakla\u015f\u0131m\u0131 sayesinde, \u00f6zel CSS s\u0131n\u0131f adlar\u0131 d\u00fc\u015f\u00fcnmeye gerek kalmaz, bu da geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve potansiyel stil \u00e7ak\u0131\u015fmalar\u0131n\u0131 en aza indirir. Ayr\u0131ca, PurgeCSS ile birle\u015fti\u011finde, \u00fcretim ortam\u0131nda gereksiz CSS'i temizleyerek, web sitenizin daha da h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar. Sonu\u00e7 olarak, Jekyll ve Tailwind CSS, geli\u015ftiricilere g\u00fc\u00e7l\u00fc, esnek ve performans\u0131 y\u00fcksek modern web siteleri olu\u015fturmalar\u0131 i\u00e7in eksiksiz bir ara\u00e7 tak\u0131m\u0131 sunar. Bu kombinasyon, gelece\u011fin web geli\u015ftirme pratiklerini bug\u00fcnden uygulaman\u0131za olanak tan\u0131r.<\/p>\nAd\u0131m Ad\u0131m Kendi Modern Jekyll Teman\u0131z\u0131 Olu\u015fturma: Kurulumdan Yay\u0131na<\/h2>\n Art\u0131k Jekyll ve Tailwind CSS'in neden bu kadar g\u00fc\u00e7l\u00fc bir ikili oldu\u011funu biliyorsunuz. \u015eimdi s\u0131ra, bu bilgiyi prati\u011fe d\u00f6kmeye ve kendi modern Jekyll teman\u0131z\u0131 ad\u0131m ad\u0131m olu\u015fturmaya geldi. Bu b\u00f6l\u00fcm, sizi kurulumdan temel layout olu\u015fturmaya kadar t\u00fcm s\u00fcre\u00e7te y\u00f6nlendirecek, b\u00f6ylece s\u0131f\u0131rdan \u00e7al\u0131\u015fan bir yap\u0131ya sahip olacaks\u0131n\u0131z. Bu yolculuk, hem Jekyll'in hem de Tailwind'in temel \u00f6zelliklerini uygulamal\u0131 olarak ke\u015ffetmenizi sa\u011flayacak. Kod bloklar\u0131 ve a\u00e7\u0131klamalarla, her ad\u0131m\u0131 net bir \u015fekilde anlayacak ve kendi web sitenizin temellerini atma konusunda kendinize g\u00fcven duyacaks\u0131n\u0131z. Modern bir web sitesi olu\u015fturmak, d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fczden daha kolay olabilir, \u00f6zellikle bu iki g\u00fc\u00e7l\u00fc arac\u0131 bir araya getirdi\u011fimizde. Ba\u015flang\u0131\u00e7ta biraz teknik gibi g\u00f6r\u00fcnse de, ad\u0131m ad\u0131m ilerledi\u011finizde, bu s\u00fcrecin ne kadar mant\u0131kl\u0131 ve keyifli oldu\u011funu g\u00f6receksiniz. \u00d6zellikle tasar\u0131m konusunda s\u0131n\u0131rs\u0131z \u00f6zg\u00fcrl\u00fck arayanlar i\u00e7in Tailwind CSS'in esnekli\u011fi, Jekyll'in i\u00e7eri\u011fe odakl\u0131 yap\u0131s\u0131yla birle\u015fince ortaya \u00e7\u0131kan sonu\u00e7lar olduk\u00e7a etkileyici olacakt\u0131r. Haydi, ilk sat\u0131r kodumuzu yazmaya ba\u015flayal\u0131m ve modern web teman\u0131z\u0131n temelini atal\u0131m.<\/p>\n
Jekyll Projesini Ba\u015flatma ve Temel Yap\u0131land\u0131rma<\/h3>\n Jekyll ile ba\u015flamak i\u00e7in Ruby ve RubyGems'in sisteminizde kurulu olmas\u0131 gerekir. Kurulum sonras\u0131, Jekyll'i a\u015fa\u011f\u0131daki komutla y\u00fckleyebilirsiniz:<\/p>\n
gem install jekyll bundler<\/pre>\n<\/code><\/p>\n
Yeni bir Jekyll projesi olu\u015fturmak i\u00e7in \u015fu komutu kullan\u0131n:<\/p>\n
jekyll new benim-modern-tema\ncd benim-modern-tema<\/pre>\n<\/code><\/p>\n
Bu komut, temel bir Jekyll yap\u0131s\u0131 olu\u015fturacakt\u0131r. Proje klas\u00f6r\u00fcn\u00fczde a\u015fa\u011f\u0131daki ana dizinleri g\u00f6rmelisiniz:<\/p>\n
\n_layouts\/<\/code>: Temalar\u0131n\u0131z\u0131n temel iskeletleri burada yer al\u0131r (\u00f6rn. default.html<\/code>, post.html<\/code>).<\/li>\n_includes\/<\/code>: Yeniden kullan\u0131labilir par\u00e7ac\u0131klar (header, footer, navigasyon) i\u00e7in.<\/li>\n_posts\/<\/code>: Blog yaz\u0131lar\u0131n\u0131z Markdown format\u0131nda burada saklan\u0131r.<\/li>\n_sass\/<\/code>: SCSS dosyalar\u0131n\u0131z i\u00e7in. Biz Tailwind kullanaca\u011f\u0131m\u0131z i\u00e7in bu k\u0131s\u0131m minimal kalacak.<\/li>\nassets\/<\/code>: CSS, JavaScript ve resimler gibi statik dosyalar.<\/li>\n_config.yml<\/code>: Jekyll projenizin ana yap\u0131land\u0131rma dosyas\u0131.<\/li>\n<\/ul>\n_config.yml<\/code> dosyas\u0131nda sitenizin ba\u015fl\u0131\u011f\u0131, a\u00e7\u0131klama, yazar gibi temel bilgileri ayarlayabilirsiniz. \u00d6rne\u011fin:<\/p>\ntitle: Benim Modern Jekyll Temam\ndescription: Tailwind CSS ile olu\u015fturulmu\u015f h\u0131zl\u0131 ve modern bir blog temas\u0131.\nauthor: Ad\u0131n\u0131z Soyad\u0131n\u0131z\ntimezone: Europe\/Istanbul # Zaman diliminizi ayarlay\u0131n\n<\/pre>\n<\/code><\/p>\n
\u015eimdi projenizi yerel sunucuda \u00e7al\u0131\u015ft\u0131rmak i\u00e7in:<\/p>\n
bundle exec jekyll serve<\/pre>\n<\/code><\/p>\n
Taray\u0131c\u0131n\u0131zda http:\/\/localhost:4000<\/code> adresine giderek varsay\u0131lan Jekyll temas\u0131n\u0131 g\u00f6rebilirsiniz. Bu, Tailwind CSS entegrasyonuna haz\u0131r oldu\u011funuz anlam\u0131na gelir.<\/p>\nTailwind CSS Entegrasyonu: PostCSS ve Build S\u00fcreci<\/h3>\n Tailwind CSS'i Jekyll projenize entegre etmek i\u00e7in Node.js ve npm'e (veya yarn'a) ihtiyac\u0131m\u0131z var. Proje klas\u00f6r\u00fcn\u00fczde bir package.json<\/code> dosyas\u0131 olu\u015fturarak ba\u015flayal\u0131m:<\/p>\nnpm init -y<\/pre>\n<\/code><\/p>\n
Ard\u0131ndan Tailwind CSS ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kural\u0131m:<\/p>\n
npm install -D tailwindcss postcss autoprefixer<\/pre>\n<\/code><\/p>\n
Bu paketler, Tailwind CSS'in \u00e7al\u0131\u015fmas\u0131 ve taray\u0131c\u0131 uyumlulu\u011fu i\u00e7in gereklidir. \u015eimdi, Tailwind yap\u0131land\u0131rma dosyas\u0131n\u0131 olu\u015ftural\u0131m:<\/p>\n
npx tailwindcss init -p<\/pre>\n<\/code><\/p>\n
Bu komut, tailwind.config.js<\/code> ve postcss.config.js<\/code> dosyalar\u0131n\u0131 olu\u015fturacakt\u0131r. tailwind.config.js<\/code> dosyas\u0131n\u0131 Tailwind'in hangi dosyalar\u0131 tarayaca\u011f\u0131n\u0131 belirterek g\u00fcncelleyelim:<\/p>\n\/\/ tailwind.config.js\nmodule.exports = {\n content: [\n '.\/_includes\/**\/*.html',\n '.\/_layouts\/**\/*.html',\n '.\/_posts\/*.md',\n '.\/*.html', \/\/ K\u00f6k dizindeki HTML dosyalar\u0131\n '.\/assets\/js\/**\/*.js', \/\/ E\u011fer JavaScript kullan\u0131yorsan\u0131z\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n<\/pre>\n<\/code><\/p>\n
Bu yap\u0131land\u0131rma, Tailwind'e projenizdeki hangi dosyalar\u0131n stil i\u00e7erebilece\u011fini s\u00f6yler, b\u00f6ylece kullan\u0131lmayan stiller \u00fcretimde temizlenebilir (PurgeCSS \u00f6zelli\u011fi). \u015eimdi, ana CSS dosyam\u0131z\u0131 olu\u015ftural\u0131m. assets\/css\/main.css<\/code> (veya assets\/main.css<\/code>) ad\u0131nda bir dosya olu\u015fturun ve i\u00e7ine Tailwind'in ana direktiflerini ekleyin:<\/p>\n\/* assets\/css\/main.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/pre>\n<\/code><\/p>\n
Bu dosya, Tailwind'in t\u00fcm temel stillerini, bile\u015fenlerini ve yard\u0131mc\u0131 s\u0131n\u0131flar\u0131n\u0131 i\u00e7erecektir. Son olarak, package.json<\/code> dosyan\u0131za, Tailwind CSS'i derleyecek script'ler eklememiz gerekiyor:<\/p>\n\/\/ package.json\n{\n \"name\": \"benim-modern-tema\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"build:tailwind\": \"tailwindcss -i .\/assets\/css\/main.css -o .\/assets\/css\/style.css --minify\",\n \"watch:tailwind\": \"tailwindcss -i .\/assets\/css\/main.css -o .\/assets\/css\/style.css --watch\",\n \"start\": \"npm run watch:tailwind & bundle exec jekyll serve\",\n \"build\": \"npm run build:tailwind & bundle exec jekyll build\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.19\",\n \"postcss\": \"^8.4.38\",\n \"tailwindcss\": \"^3.4.3\"\n }\n}\n<\/pre>\n<\/code><\/p>\n
Bu script'ler sayesinde:<\/p>\n
\nnpm run build:tailwind<\/code>: Tailwind CSS'i derler ve s\u0131k\u0131\u015ft\u0131r\u0131r (minify).<\/li>\nnpm run watch:tailwind<\/code>: Dosyalar de\u011fi\u015fti\u011finde Tailwind CSS'i otomatik olarak yeniden derler.<\/li>\nnpm start<\/code>: Hem Jekyll sunucusunu hem de Tailwind izleyicisini paralel olarak ba\u015flat\u0131r (geli\u015ftirme i\u00e7in ideal).<\/li>\nnpm run build<\/code>: Hem Tailwind CSS'i hem de Jekyll'i \u00fcretim i\u00e7in derler.<\/li>\n<\/ul>\nSon olarak, Jekyll layout'lar\u0131n\u0131zdan (\u00f6rn. _layouts\/default.html<\/code>) Tailwind taraf\u0131ndan derlenmi\u015f CSS dosyas\u0131n\u0131 ba\u011flaman\u0131z gerekiyor:<\/p>\n\n\n\n\n {{ page.title | default: site.title }}<\/title>\n <!-- Tailwind CSS dosyam\u0131z\u0131 ba\u011fl\u0131yoruz -->\n <link rel=\"stylesheet\" href=\"{{ '\/assets\/css\/style.css' | relative_url }}\">\n<\/head>\n<body class=\"bg-gray-100 text-gray-900 font-sans\">\n <header>\n {% include header.html %}\n <\/header>\n <main class=\"container mx-auto p-4\">\n {{ content }}\n <\/main>\n <footer>\n {% include footer.html %}\n <\/footer>\n<\/body>\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<p>Art\u0131k <code>npm start<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak, hem Jekyll sitenizi geli\u015ftirme modunda \u00e7al\u0131\u015ft\u0131rabilir hem de Tailwind CSS de\u011fi\u015fikliklerinizi otomatik olarak derletebilirsiniz.<\/p>\n<h3>Temel Layout ve Bile\u015fenler Olu\u015fturma<\/h3>\n<p>Jekyll ve Tailwind entegrasyonunu tamamlad\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi sitenizin temel yap\u0131s\u0131n\u0131 ve bile\u015fenlerini olu\u015fturmaya ba\u015flayabiliriz. Modern bir web temas\u0131 genellikle bir ba\u015fl\u0131k (header), i\u00e7erik alan\u0131 (main) ve bir altbilgi (footer) gibi ana b\u00f6l\u00fcmlerden olu\u015fur. Jekyll'de bu yap\u0131y\u0131 <code>_layouts<\/code> ve <code>_includes<\/code> dizinlerini kullanarak olu\u015ftururuz.<\/p>\n<h4>Default Layout (<\/p>\n<pre><code class=\"language-html\">_layouts\/default.html<\/pre>\n<p><\/code>)<\/h4>\n<p>Bu dosya, t\u00fcm sayfalar\u0131n\u0131z\u0131n temel iskeletini tan\u0131mlar. Daha \u00f6nceki ad\u0131mda ekledi\u011fimiz CSS ba\u011flant\u0131s\u0131n\u0131n yan\u0131 s\u0131ra, sitenizin genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc Tailwind s\u0131n\u0131flar\u0131yla burada belirleyebiliriz. \u00d6rne\u011fin, sayfan\u0131n arka plan rengini, varsay\u0131lan metin rengini ve yaz\u0131 tipini ayarlayabiliriz:<\/p>\n<pre><code class=\"language-html\"><!-- _layouts\/default.html -->\n<!DOCTYPE html>\n<html lang=\"{{ site.lang | default: \"en-US\" }}\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>{{ page.title | default: site.title }}<\/title>\n <link rel=\"stylesheet\" href=\"{{ '\/assets\/css\/style.css' | relative_url }}\">\n <!-- favicon, SEO meta etiketleri vb. buraya eklenebilir -->\n<\/head>\n<body class=\"flex flex-col min-h-screen bg-gray-50 text-gray-800 font-inter\">\n <!-- Header bile\u015fenini dahil et -->\n {% include header.html %}\n\n <!-- Ana i\u00e7erik alan\u0131 -->\n <main class=\"flex-grow container mx-auto px-4 py-8\">\n {{ content }}\n <\/main>\n\n <!-- Footer bile\u015fenini dahil et -->\n {% include footer.html %}\n<\/body>\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte <code>flex flex-col min-h-screen<\/code> s\u0131n\u0131flar\u0131, sayfan\u0131n y\u00fcksekli\u011finin en az ekran y\u00fcksekli\u011fi kadar olmas\u0131n\u0131 sa\u011flar ve footer'\u0131n her zaman en alta yap\u0131\u015fmas\u0131na yard\u0131mc\u0131 olur. <code>container mx-auto px-4 py-8<\/code> ise i\u00e7eri\u011fin ortalanmas\u0131n\u0131, belirli bir geni\u015flikte kalmas\u0131n\u0131 ve yatayda bo\u015fluk b\u0131rakmas\u0131n\u0131 sa\u011flar.<\/p>\n<h4>Header Bile\u015feni (<\/p>\n<pre><code class=\"language-html\">_includes\/header.html<\/pre>\n<p><\/code>)<\/h4>\n<p><code>_includes\/header.html<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m. Bu, sitenizin ba\u015fl\u0131k \u00e7ubu\u011funu ve navigasyonunu i\u00e7erecektir. Tailwind s\u0131n\u0131flar\u0131n\u0131 kullanarak kolayca stil verebiliriz:<\/p>\n<pre><code class=\"language-html\"><!-- _includes\/header.html -->\n<nav class=\"bg-white shadow-sm py-4\">\n <div class=\"container mx-auto flex justify-between items-center\">\n <a href=\"{{ site.baseurl | default: '\/' }}\" class=\"text-2xl font-bold text-gray-900 hover:text-blue-600 transition duration-300\">\n {{ site.title }}\n <\/a>\n <ul class=\"flex space-x-6\">\n <li><a href=\"{{ '\/blog' | relative_url }}\" class=\"text-gray-700 hover:text-blue-600 transition duration-300\">Blog<\/a><\/li>\n <li><a href=\"{{ '\/about' | relative_url }}\" class=\"text-gray-700 hover:text-blue-600 transition duration-300\">Hakk\u0131mda<\/a><\/li>\n <li><a href=\"{{ '\/contact' | relative_url }}\" class=\"text-gray-700 hover:text-blue-600 transition duration-300\">\u0130leti\u015fim<\/a><\/li>\n <\/ul>\n <\/div>\n<\/nav>\n<\/pre>\n<p><\/code><\/p>\n<p>Burada <code>justify-between<\/code> ve <code>items-center<\/code> gibi flexbox yard\u0131mc\u0131 s\u0131n\u0131flar\u0131, \u00f6\u011felerin yatayda ve dikeyde hizalanmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. <code>hover:<\/code> \u00f6neki ile fare \u00fczerine gelindi\u011finde renk de\u011fi\u015fimi gibi etkile\u015fimli stilleri do\u011frudan HTML i\u00e7inde tan\u0131mlayabiliriz.<\/p>\n<h4>Footer Bile\u015feni (<\/p>\n<pre><code class=\"language-html\">_includes\/footer.html<\/pre>\n<p><\/code>)<\/h4>\n<p>Benzer \u015fekilde, <code>_includes\/footer.html<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m:<\/p>\n<pre><code class=\"language-html\"><!-- _includes\/footer.html -->\n<footer class=\"bg-gray-800 text-white py-6 mt-12\">\n <div class=\"container mx-auto text-center text-sm\">\n <p>© {{ site.time | date: '%Y' }} {{ site.title }}. T\u00fcm Haklar\u0131 Sakl\u0131d\u0131r.<\/p>\n <p class=\"mt-2\">\n <a href=\"#\" class=\"text-gray-400 hover:text-blue-400 mx-2\">Gizlilik Politikas\u0131<\/a> |\n <a href=\"#\" class=\"text-gray-400 hover:text-blue-400 mx-2\">\u015eartlar ve Ko\u015fullar<\/a>\n <\/p>\n <\/div>\n<\/footer>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu basit ad\u0131mlarla, sitenizin ana iskeletini olu\u015fturdunuz ve Tailwind CSS'in g\u00fcc\u00fcyle h\u0131zl\u0131ca stil verdiniz. Art\u0131k yeni sayfalar veya blog yaz\u0131lar\u0131 olu\u015fturdu\u011funuzda, bu temel layout ve bile\u015fenler otomatik olarak kullan\u0131lacak ve sitenizin tutarl\u0131 bir g\u00f6r\u00fcn\u00fcme sahip olmas\u0131n\u0131 sa\u011flayacakt\u0131r. \u0130\u00e7eri\u011fe odaklan\u0131rken, tasar\u0131m\u0131n Tailwind taraf\u0131ndan h\u0131zl\u0131ca \u015fekillendi\u011fini g\u00f6rmek, geli\u015ftirme s\u00fcrecinizi \u00e7ok daha verimli hale getirecektir.<\/p>\n<h2>\u0130leri D\u00fczey Optimizasyonlar ve Geli\u015ftirme Teknikleri: Performans ve UX<\/h2>\n<p>Temel Jekyll ve Tailwind CSS teman\u0131z\u0131 kurduktan sonra, s\u0131ra sitenizin performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini (UX) daha da art\u0131racak ileri d\u00fczey optimizasyonlara geliyor. Modern web siteleri sadece iyi g\u00f6r\u00fcnmekle kalmamal\u0131, ayn\u0131 zamanda h\u0131zl\u0131 y\u00fcklenmeli ve her cihazda kusursuz bir deneyim sunmal\u0131d\u0131r. Bu b\u00f6l\u00fcmde, sitenizi daha da h\u0131zland\u0131rmak, duyarl\u0131 tasar\u0131m yeteneklerini geli\u015ftirmek ve tema \u00f6zelle\u015ftirme s\u00fcre\u00e7lerini optimize etmek i\u00e7in kullanabilece\u011finiz stratejileri ve teknikleri inceleyece\u011fiz. Amac\u0131m\u0131z, hem geli\u015ftirme verimlili\u011fini art\u0131rmak hem de nihai kullan\u0131c\u0131n\u0131za \u00fcst d\u00fczey bir deneyim sunmakt\u0131r. Bu optimizasyonlar, web sitenizin arama motoru s\u0131ralamalar\u0131n\u0131 iyile\u015ftirmesine de yard\u0131mc\u0131 olacak ve genel eri\u015filebilirli\u011fini art\u0131racakt\u0131r. \u00d6zellikle statik site olman\u0131n getirdi\u011fi avantajlar\u0131 sonuna kadar kullanarak, dinamik sitelerin genellikle kar\u015f\u0131la\u015ft\u0131\u011f\u0131 performans darbo\u011fazlar\u0131n\u0131 a\u015fmay\u0131 hedefliyoruz. Bu b\u00f6l\u00fcmde ele alaca\u011f\u0131m\u0131z teknikler, sitenizin yaln\u0131zca h\u0131zl\u0131 de\u011fil, ayn\u0131 zamanda gelece\u011fe haz\u0131r olmas\u0131n\u0131 da sa\u011flayacakt\u0131r. Geli\u015fmi\u015f Tailwind \u00f6zellikleri ve Jekyll eklentileriyle, potansiyeli en \u00fcst d\u00fczeye \u00e7\u0131karaca\u011f\u0131z. Haydi, sitenizi bir sonraki seviyeye ta\u015f\u0131yal\u0131m!<\/p>\n<h3>Tailwind JIT Modu ve Purge CSS ile Performans Patlamas\u0131<\/h3>\n<p>Web sitenizin y\u00fcklenme h\u0131z\u0131n\u0131 art\u0131rmak i\u00e7in Tailwind CSS'in sundu\u011fu en g\u00fc\u00e7l\u00fc \u00f6zelliklerden ikisi JIT (Just-In-Time) modu ve Purge CSS'tir. Geleneksel olarak, Tailwind t\u00fcm olas\u0131 stilleri i\u00e7eren b\u00fcy\u00fck bir CSS dosyas\u0131 \u00fcretirdi ve Purge CSS daha sonra kullan\u0131lmayanlar\u0131 kald\u0131r\u0131rd\u0131. Ancak JIT modu ile bu s\u00fcre\u00e7 \u00e7ok daha verimli hale geldi.<\/p>\n<h4>Tailwind JIT (Just-In-Time) Modu<\/h4>\n<p>JIT modu, geli\u015ftirme s\u0131ras\u0131nda sadece kulland\u0131\u011f\u0131n\u0131z stilleri an\u0131nda derleyerek CSS dosyan\u0131z\u0131n boyutunu drastik bir \u015fekilde k\u00fc\u00e7\u00fclt\u00fcr. Bu, daha h\u0131zl\u0131 derleme s\u00fcreleri ve geli\u015ftirme modunda bile \u00e7ok daha k\u00fc\u00e7\u00fck bir CSS dosyas\u0131 anlam\u0131na gelir. JIT modunu etkinle\u015ftirmek i\u00e7in <code>tailwind.config.js<\/code> dosyan\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyebilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ tailwind.config.js\nmodule.exports = {\n mode: 'jit', \/\/ JIT modu etkinle\u015ftirildi (Tailwind CSS v3'te varsay\u0131lan hale geldi)\n content: [\n '.\/_includes\/**\/*.html',\n '.\/_layouts\/**\/*.html',\n '.\/_posts\/*.md',\n '.\/*.html',\n '.\/assets\/js\/**\/*.js',\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Tailwind CSS v3 ve sonras\u0131 s\u00fcr\u00fcmlerde JIT modu varsay\u0131lan olarak gelir ve <code>mode: 'jit'<\/code> ayar\u0131na gerek kalmaz, ancak bu ayar\u0131 bilmek \u00f6nemlidir. JIT, \u00f6zellikle b\u00fcy\u00fck projelerde veya h\u0131zl\u0131 iterasyon gerektiren geli\u015ftirme ortamlar\u0131nda inan\u0131lmaz bir kolayl\u0131k sa\u011flar.<\/p>\n<h4>Purge CSS (Otomatik Olarak Entegre)<\/h4>\n<p>Tailwind CSS'in kendisi, \u00fcretim derlemesi s\u0131ras\u0131nda otomatik olarak Purge CSS i\u015flevini entegre eder. <code>tailwind.config.js<\/code> dosyas\u0131ndaki <code>content<\/code> (eski ad\u0131yla <code>purge<\/code>) ayar\u0131, Tailwind'in hangi dosyalarda stil kullan\u0131ld\u0131\u011f\u0131n\u0131 taramas\u0131n\u0131 ve nihai CSS dosyas\u0131ndan kullan\u0131lmayan t\u00fcm stilleri \u00e7\u0131karmas\u0131n\u0131 sa\u011flar. Bu, genellikle birka\u00e7 kilobayt (KB) boyutunda ultra-optimize edilmi\u015f bir CSS dosyas\u0131yla sonu\u00e7lan\u0131r. K\u00fc\u00e7\u00fck CSS boyutlar\u0131, sayfa y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r ve web sitenizin genel performans\u0131n\u0131 art\u0131r\u0131r. \u00d6rne\u011fin, y\u00fczlerce farkl\u0131 yard\u0131mc\u0131 s\u0131n\u0131f\u0131 olan bir Tailwind projesinde, Purge CSS'siz bir CSS dosyas\u0131 megabaytlarca boyuta ula\u015fabilirken, Purge CSS ile bu boyut onlarca KB'a kadar d\u00fc\u015febilir. Bu, \u00f6zellikle mobil kullan\u0131c\u0131lar i\u00e7in hayati \u00f6neme sahiptir. <code>package.json<\/code> dosyam\u0131zdaki <code>build:tailwind<\/code> script'i (<code>tailwindcss -i .\/assets\/css\/main.css -o .\/assets\/css\/style.css --minify<\/code>), bu optimizasyonu otomatik olarak uygular. <code>--minify<\/code> bayra\u011f\u0131 ile CSS dosyan\u0131z\u0131n s\u0131k\u0131\u015ft\u0131r\u0131lmas\u0131 da sa\u011flan\u0131r.<\/p>\n<h3>Duyarl\u0131 Tasar\u0131m (Responsive Design) Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n<p>Tailwind CSS, duyarl\u0131 tasar\u0131m i\u00e7in g\u00fc\u00e7l\u00fc ve sezgisel bir yakla\u015f\u0131m sunar. \u00c7o\u011fu tasar\u0131m\u0131n mobil \u00f6ncelikli olmas\u0131 gerekti\u011fi ilkesine dayanarak, t\u00fcm yard\u0131mc\u0131 s\u0131n\u0131flar varsay\u0131lan olarak en k\u00fc\u00e7\u00fck ekran boyutuna (mobil) uygulan\u0131r. Daha b\u00fcy\u00fck ekranlar i\u00e7in stiller tan\u0131mlamak istedi\u011finizde, \u00f6zel duyarl\u0131 \u00f6nekleri kullan\u0131rs\u0131n\u0131z.<\/p>\n<p>Tailwind'in varsay\u0131lan kesme noktalar\u0131 \u015funlard\u0131r:<\/p>\n<ul>\n<li><code>sm<\/code> (Small): 640px ve \u00fczeri<\/li>\n<li><code>md<\/code> (Medium): 768px ve \u00fczeri<\/li>\n<li><code>lg<\/code> (Large): 1024px ve \u00fczeri<\/li>\n<li><code>xl<\/code> (Extra Large): 1280px ve \u00fczeri<\/li>\n<li><code>2xl<\/code> (2 Extra Large): 1536px ve \u00fczeri<\/li>\n<\/ul>\n<p>Bir \u00f6\u011fenin farkl\u0131 ekran boyutlar\u0131nda nas\u0131l g\u00f6r\u00fcnece\u011fini kontrol etmek i\u00e7in bu \u00f6nekleri kullan\u0131n. \u00d6rne\u011fin, bir metnin mobil cihazlarda k\u00fc\u00e7\u00fck, tabletlerde orta, masa\u00fcst\u00fcnde ise b\u00fcy\u00fck olmas\u0131n\u0131 istiyorsan\u0131z:<\/p>\n<pre><code class=\"language-html\"><p class=\"text-sm md:text-base lg:text-lg\">\n Bu metin farkl\u0131 ekran boyutlar\u0131nda farkl\u0131 boyutlara sahip olacakt\u0131r.\n<\/p>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu, geleneksel CSS'teki media query'lerin karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 ortadan kald\u0131rarak, stilleri do\u011frudan HTML i\u00e7inde y\u00f6netmenizi sa\u011flar. Men\u00fclerin veya d\u00fczenlerin farkl\u0131 ekran boyutlar\u0131nda de\u011fi\u015fmesi i\u00e7in de ayn\u0131 mant\u0131\u011f\u0131 uygulayabilirsiniz. \u00d6rne\u011fin, mobil bir men\u00fcy\u00fc gizleyip masa\u00fcst\u00fcnde g\u00f6stermek i\u00e7in:<\/p>\n<pre><code class=\"language-html\"><!-- Mobil men\u00fc butonu, sadece md (tablet) boyutundan k\u00fc\u00e7\u00fck ekranlarda g\u00f6ster -->\n<button class=\"md:hidden\">Men\u00fc<\/button>\n\n<!-- Navigasyon men\u00fcs\u00fc, mobil boyutlarda gizli, md boyutunda flex olarak g\u00f6ster -->\n<nav class=\"hidden md:flex\">\n <ul>\n <li>...<\/li>\n <\/ul>\n<\/nav>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu sayede, siteniz her cihazda ve ekran boyutunda optimize edilmi\u015f bir g\u00f6r\u00fcn\u00fcm ve deneyim sunar. Geleneksel CSS yazmadan, do\u011frudan HTML i\u00e7inde responsive davran\u0131\u015flar\u0131 kontrol edebilmek, geli\u015ftirme s\u00fcrecini son derece h\u0131zland\u0131r\u0131r ve hatalar\u0131 azalt\u0131r.<\/p>\n<h3>Tema \u00d6zelle\u015ftirme ve Eklenti Entegrasyonu<\/h3>\n<p>Modern Jekyll teman\u0131z\u0131n tamamen size \u00f6zg\u00fc olmas\u0131n\u0131 sa\u011flamak i\u00e7in Tailwind CSS'i ve Jekyll'i \u00f6zelle\u015ftirebilirsiniz. Bu, markan\u0131za uygun renkleri, yaz\u0131 tiplerini ve hatta \u00f6zel bile\u015fenleri eklemenizi sa\u011flar.<\/p>\n<h4>Tailwind CSS \u00d6zelle\u015ftirmeleri (<\/p>\n<pre><code class=\"language-javascript\">tailwind.config.js<\/pre>\n<p><\/code>)<\/h4>\n<p><code>tailwind.config.js<\/code> dosyas\u0131, Tailwind'in varsay\u0131lan ayarlar\u0131n\u0131 (renkler, fontlar, bo\u015fluklar, breakpoints vb.) ge\u00e7ersiz k\u0131lman\u0131za veya geni\u015fletmenize olanak tan\u0131r. \u00d6rne\u011fin, kendi renk paletinizi veya \u00f6zel bir font ailenizi ekleyebilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ tailwind.config.js\nmodule.exports = {\n \/\/ ...\n theme: {\n extend: {\n colors: {\n 'primary': '#FF5733', \/\/ Kendi ana renginizi ekleyin\n 'secondary': '#33FF57',\n 'my-gray': { \/\/ Kendi \u00f6zel gri tonlar\u0131n\u0131z\u0131 tan\u0131mlay\u0131n\n 100: '#f7fafc',\n 900: '#1a202c',\n }\n },\n fontFamily: {\n 'sans': ['Inter', 'sans-serif'], \/\/ Varsay\u0131lan sans-serif fontunu de\u011fi\u015ftirin\n 'serif': ['Merriweather', 'serif'],\n },\n spacing: {\n '128': '32rem', \/\/ \u00d6zel bo\u015fluk de\u011ferleri ekleyin\n '144': '36rem',\n },\n },\n },\n plugins: [],\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6zelle\u015ftirmeler sayesinde, teman\u0131z\u0131n markan\u0131za tam uyum sa\u011flamas\u0131n\u0131 ve benzersiz bir g\u00f6rsel kimli\u011fe sahip olmas\u0131n\u0131 sa\u011flayabilirsiniz. Yeni tan\u0131mlad\u0131\u011f\u0131n\u0131z renkleri veya fontlar\u0131 HTML'nizde <code>text-primary<\/code> veya <code>font-serif<\/code> gibi s\u0131n\u0131flarla kullanabilirsiniz.<\/p>\n<div class=\"interactive-tip\">\n Uzman \u0130pucu: Yeni bir font eklerken, Google Fonts gibi servislerden fontu projenize dahil etmeyi unutmay\u0131n. <code>_includes\/head.html<\/code> dosyan\u0131za veya do\u011frudan <code>_layouts\/default.html<\/code> i\u00e7ine <code><link><\/code> etiketi ile ekleyebilirsiniz.\n <\/div>\n<h4>Jekyll Eklentileri Entegrasyonu<\/h4>\n<p>Jekyll, sitenize ek i\u015flevsellik katmak i\u00e7in bir dizi eklentiye sahiptir. Baz\u0131 pop\u00fcler ve faydal\u0131 eklentiler \u015funlard\u0131r:<\/p>\n<ul>\n<li><code>jekyll-feed<\/code>: RSS beslemesi olu\u015fturur.<\/li>\n<li><code>jekyll-sitemap<\/code>: XML site haritas\u0131 olu\u015fturur (SEO i\u00e7in kritik).<\/li>\n<li><code>jekyll-seo-tag<\/code>: SEO i\u00e7in gerekli meta etiketlerini otomatik olarak ekler.<\/li>\n<\/ul>\n<p>Bu eklentileri kullanmak i\u00e7in, <code>Gemfile<\/code> dosyan\u0131za ekleyin:<\/p>\n<pre><code class=\"language-ruby\"># Gemfile\ngem \"jekyll-feed\"\ngem \"jekyll-sitemap\"\ngem \"jekyll-seo-tag\"\n<\/pre>\n<p><\/code><\/p>\n<p>Ard\u0131ndan <code>bundle install<\/code> komutunu \u00e7al\u0131\u015ft\u0131r\u0131n ve <code>_config.yml<\/code> dosyan\u0131za ekleyin:<\/p>\n<pre><code class=\"language-yaml\"># _config.yml\nplugins:\n - jekyll-feed\n - jekyll-sitemap\n - jekyll-seo-tag\n<\/pre>\n<p><\/code><\/p>\n<p>Bu eklentiler, sitenizin SEO'sunu otomatik olarak iyile\u015ftirecek ve okunabilirli\u011fini art\u0131racakt\u0131r. \u00d6zellikle <code>jekyll-seo-tag<\/code>, sosyal medya payla\u015f\u0131mlar\u0131 i\u00e7in Open Graph etiketlerini ve Google i\u00e7in Schema.org verilerini otomatik olarak olu\u015fturarak sitenizin g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc art\u0131r\u0131r.<\/p>\n<div class=\"interactive-tip\">\n Vaka Analizi: Bir m\u00fc\u015fteri, eski WordPress tabanl\u0131 blogunun yava\u015fl\u0131\u011f\u0131 ve g\u00fcvenlik a\u00e7\u0131klar\u0131 y\u00fcz\u00fcnden \u015fikayet\u00e7iydi. Blog, haftada yaln\u0131zca birka\u00e7 makale yay\u0131nl\u0131yordu ve dinamik bir CMS'ye ihtiyac\u0131 yoktu. Jekyll ve Tailwind CSS kullanarak, m\u00fc\u015fterinin blogunu tamamen yeniden in\u015fa ettik. Sonu\u00e7 olarak, sayfa y\u00fckleme s\u00fcreleri %70 azald\u0131, g\u00fcvenlik endi\u015feleri ortadan kalkt\u0131 ve bak\u0131m maliyetleri d\u00fc\u015ft\u00fc. Ayr\u0131ca, Tailwind'in esnekli\u011fi sayesinde, sitenin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc m\u00fc\u015fterinin marka kimli\u011fine tam olarak uygun hale getirebildik. Bu, modern Jekyll temalar\u0131n\u0131n k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projeler i\u00e7in ne kadar etkili oldu\u011funun g\u00fczel bir \u00f6rne\u011fidir.\n <\/div>\n<h2>Modern Jekyll Teman\u0131z\u0131n Potansiyelini Ke\u015ffetme ve Yay\u0131na Alma<\/h2>\n<p>Jekyll ve Tailwind CSS ile g\u00fc\u00e7l\u00fc, h\u0131zl\u0131 ve estetik bir tema olu\u015fturman\u0131n temellerini att\u0131n\u0131z. \u015eimdi bu modern teman\u0131n t\u00fcm potansiyelini ke\u015ffetme ve onu d\u00fcnyaya sunma zaman\u0131. Web sitenizi sadece g\u00f6rsel olarak \u00e7ekici k\u0131lmakla kalmay\u0131p, ayn\u0131 zamanda arama motorlar\u0131 i\u00e7in optimize etmek ve d\u00fcnya \u00e7ap\u0131nda eri\u015filebilir k\u0131lmak, projenizin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. Bu b\u00f6l\u00fcmde, SEO dostu bir yap\u0131 olu\u015fturmaktan, sitenizi \u00e7e\u015fitli platformlarda nas\u0131l yay\u0131nlayaca\u011f\u0131n\u0131za ve uzun vadede nas\u0131l s\u00fcrd\u00fcr\u00fclebilir k\u0131laca\u011f\u0131n\u0131za kadar \u00f6nemli konular\u0131 ele alaca\u011f\u0131z. Amac\u0131m\u0131z, sitenizin yaln\u0131zca iyi g\u00f6r\u00fcnmesini de\u011fil, ayn\u0131 zamanda organik trafik \u00e7ekmesini ve sorunsuz bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamakt\u0131r. Jekyll'in statik do\u011fas\u0131, SEO i\u00e7in do\u011fal avantajlar sunarken, do\u011fru yap\u0131land\u0131rma ve i\u00e7erik stratejileriyle bu avantajlar\u0131 daha da g\u00fc\u00e7lendirebiliriz. Ayr\u0131ca, modern da\u011f\u0131t\u0131m y\u00f6ntemleri sayesinde, sitenizi birka\u00e7 dakika i\u00e7inde yay\u0131na alabilir ve otomatik g\u00fcncellemelerle s\u00fcrekli eri\u015filebilir tutabiliriz. Haz\u0131rlad\u0131\u011f\u0131n\u0131z t\u00fcm emeklerin kar\u015f\u0131l\u0131\u011f\u0131n\u0131 almak i\u00e7in bu son ad\u0131mlar\u0131 dikkatle uygulamak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r.<\/p>\n<h3>SEO Dostu Yap\u0131 ve \u0130\u00e7erik Y\u00f6netimi<\/h3>\n<p>Jekyll, statik yap\u0131s\u0131 sayesinde SEO i\u00e7in do\u011fal avantajlar sunar. H\u0131zl\u0131 y\u00fckleme s\u00fcreleri, Google'\u0131n s\u0131ralama fakt\u00f6rleri aras\u0131nda \u00f6nemli bir yer tutar. Ancak bu avantajlar\u0131 maksimize etmek i\u00e7in ek ad\u0131mlar atmak gerekir.<\/p>\n<ul>\n<li><strong>Temiz ve Anlaml\u0131 URL'ler:<\/strong> Jekyll, varsay\u0131lan olarak okunabilir URL'ler (permalinks) olu\u015fturur. <code>_config.yml<\/code> dosyan\u0131zda \u015fu ayar\u0131 yaparak blog yaz\u0131lar\u0131n\u0131z i\u00e7in temiz URL'ler sa\u011flayabilirsiniz:\n<pre><code class=\"language-yaml\"># _config.yml\npermalink: \/blog\/:title\/\n<\/pre>\n<p><\/code><br \/>\n Bu, URL'lerinizin <code>site.com\/blog\/yazi-basligi\/<\/code> \u015feklinde olmas\u0131n\u0131 sa\u011flar, bu da hem kullan\u0131c\u0131lar hem de arama motorlar\u0131 i\u00e7in daha anla\u015f\u0131l\u0131rd\u0131r.\n <\/li>\n<li><strong>Markdown ile \u0130\u00e7erik Kolayl\u0131\u011f\u0131:<\/strong> Jekyll'de i\u00e7eriklerinizi Markdown ile yazmak, ba\u015fl\u0131k hiyerar\u015fisi (H1, H2, H3) ve di\u011fer bi\u00e7imlendirmeleri kolayca uygulaman\u0131z\u0131 sa\u011flar. Do\u011fru ba\u015fl\u0131k etiketlerinin kullan\u0131m\u0131, i\u00e7eri\u011finizin yap\u0131land\u0131r\u0131lmas\u0131 ve SEO i\u00e7in hayati \u00f6nem ta\u015f\u0131r. Tailwind CSS ile bu ba\u015fl\u0131klar\u0131 stilize etmek, sadece g\u00f6r\u00fcn\u00fcm\u00fc g\u00fczelle\u015ftirmekle kalmaz, ayn\u0131 zamanda eri\u015filebilirli\u011fi de art\u0131r\u0131r.<\/li>\n<li><strong>Meta Etiketleri ve Open Graph:<\/strong> Daha \u00f6nce bahsetti\u011fimiz <code>jekyll-seo-tag<\/code> eklentisi, sayfa ba\u015fl\u0131\u011f\u0131, meta a\u00e7\u0131klamas\u0131, kanonik URL'ler, Open Graph (Facebook, Twitter gibi sosyal medya payla\u015f\u0131mlar\u0131 i\u00e7in) ve Schema.org (zengin snippet'ler i\u00e7in) verilerini otomatik olarak olu\u015fturur. Bu, arama motorlar\u0131n\u0131n ve sosyal medya platformlar\u0131n\u0131n sitenizi do\u011fru bir \u015fekilde anlamas\u0131na ve g\u00f6stermesine yard\u0131mc\u0131 olur. Bu eklentiyi kurup <code>_layouts\/default.html<\/code> dosyan\u0131zda <code>{% seo %}<\/code> etiketini kullanarak kolayca entegre edebilirsiniz.<\/li>\n<li><strong>Site Haritas\u0131 (Sitemap) ve RSS Beslemesi:<\/strong> <code>jekyll-sitemap<\/code> eklentisi otomatik olarak bir XML site haritas\u0131 olu\u015fturur (<code>\/sitemap.xml<\/code>). Bu dosya, arama motorlar\u0131na sitenizdeki t\u00fcm \u00f6nemli sayfalar\u0131 bildirir ve dizine eklemelerine yard\u0131mc\u0131 olur. <code>jekyll-feed<\/code> eklentisi ise blogunuz i\u00e7in bir RSS beslemesi (<code>\/feed.xml<\/code>) olu\u015fturarak okuyucular\u0131n\u0131z\u0131n yeni i\u00e7eriklerden haberdar olmas\u0131n\u0131 sa\u011flar. Bu hem SEO hem de kullan\u0131c\u0131 ba\u011fl\u0131l\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan \u00f6nemlidir.<\/li>\n<\/ul>\n<p>T\u00fcm bu unsurlar, sitenizin arama motorlar\u0131nda daha g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 ve daha geni\u015f bir kitleye ula\u015fmas\u0131n\u0131 sa\u011flar. \u0130\u00e7eri\u011finizin kalitesi ve anahtar kelime stratejinizle birle\u015fti\u011finde, organik trafik potansiyelinizi \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilirsiniz.<\/p>\n<h3>Deployment (Yay\u0131na Alma): GitHub Pages ve Di\u011fer Se\u00e7enekler<\/h3>\n<p>Jekyll sitenizi internette yay\u0131nlamak, statik do\u011fas\u0131 gere\u011fi son derece kolayd\u0131r. En pop\u00fcler ve genellikle \u00fccretsiz olan se\u00e7enek GitHub Pages'tir.<\/p>\n<ul>\n<li><strong>GitHub Pages:<\/strong> GitHub Pages, Jekyll siteleri i\u00e7in do\u011fal bir bar\u0131nd\u0131rma \u00e7\u00f6z\u00fcm\u00fcd\u00fcr. GitHub deponuzdaki kodlar\u0131 do\u011frudan yay\u0131nlaman\u0131za olanak tan\u0131r. Yapman\u0131z gereken tek \u015fey, projenizin kodunu GitHub'a y\u00fcklemek ve deponuzun ad\u0131n\u0131 <code>kullaniciadi.github.io<\/code> (ki\u015fisel site i\u00e7in) veya <code>kurulusadi\/projeadi<\/code> (proje sitesi i\u00e7in) \u015feklinde ayarlamakt\u0131r. GitHub Pages, otomatik olarak Jekyll sitenizi derler ve yay\u0131nlar. Bu, \u00fccretsiz, h\u0131zl\u0131 ve s\u00fcrekli entegrasyon (CI) \/ s\u00fcrekli da\u011f\u0131t\u0131m (CD) benzeri bir i\u015f ak\u0131\u015f\u0131 sunar.<\/li>\n<li><strong>Netlify:<\/strong> Netlify, modern web siteleri i\u00e7in pop\u00fcler bir da\u011f\u0131t\u0131m platformudur. GitHub, GitLab veya Bitbucket depolar\u0131n\u0131zla entegre olarak, her kod g\u00f6nderiminizde sitenizi otomatik olarak derleyip yay\u0131nlar. \u00d6zel alan ad\u0131 deste\u011fi, \u00fccretsiz SSL sertifikalar\u0131, CDN da\u011f\u0131t\u0131m\u0131 ve form i\u015fleme gibi bir\u00e7ok ek \u00f6zellik sunar. Jekyll i\u00e7in Netlify, inan\u0131lmaz derecede sorunsuz bir da\u011f\u0131t\u0131m deneyimi sa\u011flar.<\/li>\n<li><strong>Vercel:<\/strong> Netlify'a benzer \u015fekilde Vercel de statik siteler ve sunucusuz fonksiyonlar i\u00e7in optimize edilmi\u015f bir da\u011f\u0131t\u0131m platformudur. Git entegrasyonu, otomatik da\u011f\u0131t\u0131m, k\u00fcresel CDN ve \u00fccretsiz SSL gibi \u00f6zellikleriyle h\u0131zl\u0131 ve g\u00fcvenilir bir bar\u0131nd\u0131rma sunar. Jekyll siteleri Vercel \u00fczerinde de sorunsuz bir \u015fekilde bar\u0131nd\u0131r\u0131labilir.<\/li>\n<li><strong>Di\u011fer Bulut Sa\u011flay\u0131c\u0131lar\u0131:<\/strong> AWS S3, Google Cloud Storage veya Azure Blob Storage gibi bulut depolama hizmetleri de Jekyll sitelerini bar\u0131nd\u0131rmak i\u00e7in kullan\u0131labilir. Bu se\u00e7enekler daha fazla kontrol ve \u00f6l\u00e7eklenebilirlik sunar, ancak kurulum ve y\u00f6netimleri biraz daha karma\u015f\u0131k olabilir.<\/li>\n<\/ul>\n<p>Se\u00e7ti\u011finiz platform ne olursa olsun, modern Jekyll teman\u0131z\u0131n GitHub'da versiyon kontrol alt\u0131nda olmas\u0131, i\u015fbirli\u011fi ve geri d\u00f6n\u00fc\u015fler i\u00e7in b\u00fcy\u00fck kolayl\u0131k sa\u011flar. Basit bir <code>git push<\/code> ile sitenizdeki de\u011fi\u015fiklikleri canl\u0131ya alabilirsiniz, bu da geleneksel CMS'lere g\u00f6re \u00e7ok daha h\u0131zl\u0131 ve g\u00fcvenlidir.<\/p>\n<h3>Bak\u0131m ve S\u00fcrekli Geli\u015ftirme \u0130pu\u00e7lar\u0131<\/h3>\n<p>Jekyll ve Tailwind CSS ile in\u015fa edilen statik web siteleri, geleneksel dinamik sitelere g\u00f6re \u00e7ok daha az bak\u0131m gerektirir. Ancak yine de baz\u0131 iyi pratikleri uygulamak, sitenizin uzun \u00f6m\u00fcrl\u00fc ve g\u00fcncel kalmas\u0131n\u0131 sa\u011flar.<\/p>\n<ul>\n<li><strong>Ba\u011f\u0131ml\u0131l\u0131k G\u00fcncellemeleri:<\/strong> D\u00fczenli olarak <code>npm update<\/code> ve <code>bundle update<\/code> komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rarak Tailwind CSS, PostCSS, Jekyll ve di\u011fer Ruby Gem'lerini g\u00fcncelleyin. Bu, g\u00fcvenlik yamalar\u0131n\u0131 alman\u0131z\u0131 ve en yeni \u00f6zelliklerden faydalanman\u0131z\u0131 sa\u011flar.<\/li>\n<li><strong>\u0130\u00e7erik Y\u00f6netimi:<\/strong> Yeni blog yaz\u0131lar\u0131 veya sayfalar eklemek, Markdown dosyalar\u0131 olu\u015fturmak kadar basittir. \u0130\u00e7eri\u011fi do\u011frudan Git deponuzda y\u00f6netmek, versiyon kontrol\u00fcn\u00fc ve i\u015fbirli\u011fini kolayla\u015ft\u0131r\u0131r.<\/li>\n<li><strong>Performans \u0130zleme:<\/strong> Google Lighthouse veya GTmetrix gibi ara\u00e7lar\u0131 kullanarak sitenizin performans\u0131n\u0131 d\u00fczenli olarak kontrol edin. Bu ara\u00e7lar, geli\u015ftirilebilecek alanlar\u0131 belirlemenize yard\u0131mc\u0131 olur. Tailwind'in Purge CSS \u00f6zelli\u011fi sayesinde, CSS boyutunuz zaten optimize edilmi\u015f olacakt\u0131r, ancak resim optimizasyonu veya tembel y\u00fckleme (lazy loading) gibi ek iyile\u015ftirmeler yapabilirsiniz.<\/li>\n<li><strong>Yedekleme:<\/strong> GitHub gibi bir versiyon kontrol sistemi kullanmak, otomatik olarak bir yedekleme i\u015flevi g\u00f6r\u00fcr. Kodunuz ve i\u00e7eri\u011finiz her zaman g\u00fcvendedir.<\/li>\n<li><strong>Eklenti ve Tema Geli\u015ftirme:<\/strong> \u0130htiya\u00e7 duydu\u011funuzda, Jekyll eklentileri veya \u00f6zel Liquid \u015fablonlar\u0131 geli\u015ftirerek teman\u0131z\u0131n yeteneklerini geni\u015fletebilirsiniz. Tailwind'in esnekli\u011fi sayesinde, yeni bile\u015fenleri veya sayfalar\u0131 mevcut tasar\u0131mla uyumlu bir \u015fekilde h\u0131zla olu\u015fturabilirsiniz.<\/li>\n<\/ul>\n<p>Bu ipu\u00e7lar\u0131 sayesinde, modern Jekyll teman\u0131z\u0131n sadece ba\u015flang\u0131\u00e7ta de\u011fil, uzun vadede de verimli, g\u00fcvenli ve g\u00fcncel kalmas\u0131n\u0131 sa\u011flayabilirsiniz. Statik sitelerin d\u00fc\u015f\u00fck bak\u0131m gereksinimi, bu platformu \u00f6zellikle ki\u015fisel bloglar, portf\u00f6yler ve k\u00fc\u00e7\u00fck i\u015fletme siteleri i\u00e7in cazip bir se\u00e7enek haline getirir.<\/p>\n<h2>Sonu\u00e7: Gelece\u011fin Web Geli\u015ftirme Pratikleri ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>Bu makale boyunca, Jekyll ve Tailwind CSS'in nas\u0131l bir araya gelerek h\u0131zl\u0131, g\u00fcvenli ve estetik modern web siteleri olu\u015fturdu\u011funu detayl\u0131 bir \u015fekilde inceledik. Statik sitelerin performans ve g\u00fcvenlik avantajlar\u0131ndan, Tailwind'in \"utility-first\" yakla\u015f\u0131m\u0131n\u0131n getirdi\u011fi tasar\u0131m esnekli\u011fine ve geli\u015ftirme h\u0131z\u0131na kadar bir\u00e7ok konuya de\u011findik. Kendi modern teman\u0131z\u0131 kurmaktan, ileri d\u00fczey optimizasyonlara ve da\u011f\u0131t\u0131m y\u00f6ntemlerine kadar ad\u0131m ad\u0131m bir rehber sunduk. Art\u0131k geleneksel CMS'lerin \u015fi\u015fkinli\u011finden ve karma\u015f\u0131kl\u0131\u011f\u0131ndan kurtulup, minimalist, verimli ve gelece\u011fe haz\u0131r bir web sitesi in\u015fa etmek i\u00e7in gerekli bilgi ve ara\u00e7lara sahipsiniz. Bu g\u00fc\u00e7l\u00fc kombinasyon, hem geli\u015ftirici deneyimini iyile\u015ftiriyor hem de son kullan\u0131c\u0131lara \u00fcst\u00fcn bir web performans\u0131 sunuyor. Unutmay\u0131n, modern web geli\u015ftirme sadece karma\u015f\u0131k ara\u00e7lar kullanmaktan ibaret de\u011fil, ayn\u0131 zamanda do\u011fru ara\u00e7lar\u0131 do\u011fru ama\u00e7lar i\u00e7in se\u00e7erek verimlili\u011fi ve kaliteyi art\u0131rmaktan ge\u00e7iyor. Jekyll ve Tailwind CSS bu felsefenin m\u00fckemmel birer temsilcisidir.<\/p>\n<div class=\"interactive-tip\">\n Uzman \u0130pucu: Bu modern yakla\u015f\u0131m\u0131 kullanarak olu\u015fturdu\u011funuz bir web sitesi, \u00f6zellikle d\u00fc\u015f\u00fck bant geni\u015fli\u011fine sahip b\u00f6lgelerde veya eski cihazlarda bile y\u00fcksek performans g\u00f6sterecektir. Bu, k\u00fcresel bir kitleye ula\u015fmak i\u00e7in \u00f6nemli bir avantajd\u0131r.\n <\/div>\n<p>Bu bilgiler \u0131\u015f\u0131\u011f\u0131nda, kendi \"Modern Jekyll Temas\u0131\" projenize ba\u015flamaktan \u00e7ekinmeyin. GitHub'da bir\u00e7ok \u00fccretsiz Jekyll Tailwind CSS \u015fablonu bulunmaktad\u0131r. Bunlardan ilham alarak veya do\u011frudan kullanarak kendi benzersiz projenizi hayata ge\u00e7irebilirsiniz. Unutmay\u0131n, pratik yapmak \u00f6\u011frenmenin en iyi yoludur. Tailwind CSS'in ve Jekyll'in esnek yap\u0131s\u0131, size sonsuz \u00f6zelle\u015ftirme imkanlar\u0131 sunar. Performans\u0131, esteti\u011fi ve y\u00f6netilebilirli\u011fi bir araya getiren bu modern yakla\u015f\u0131m, \u015f\u00fcphesiz ki web geli\u015ftirme d\u00fcnyas\u0131n\u0131n gelece\u011fini \u015fekillendirmeye devam edecektir. \u015eimdi s\u0131ra sizde; klavyenin ba\u015f\u0131na ge\u00e7in ve kendi harika web sitenizi olu\u015fturmaya ba\u015flay\u0131n!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<h4>Jekyll ve Tailwind \u00f6\u011frenmek ne kadar s\u00fcrer?<\/h4>\n<p>Jekyll'in temel prensipleri (Markdown, Liquid, dosya yap\u0131s\u0131) ve Tailwind CSS'in utility s\u0131n\u0131flar\u0131, temel HTML ve CSS bilginiz varsa birka\u00e7 g\u00fcn i\u00e7inde kavranabilir. Daha ileri d\u00fczey \u00f6zelle\u015ftirmeler ve eklentiler i\u00e7in biraz daha zaman ay\u0131rman\u0131z gerekebilir, ancak temel bir siteyi \u00e7al\u0131\u015ft\u0131rmak h\u0131zl\u0131d\u0131r. Pratik yaparak bu s\u00fcre\u00e7 k\u0131salacakt\u0131r.<\/p>\n<h4>Bu tema profesyonel projeler i\u00e7in uygun mu?<\/h4>\n<p>Kesinlikle evet! Jekyll ve Tailwind CSS kombinasyonu, bir\u00e7ok profesyonel blog, dok\u00fcmantasyon sitesi, pazarlama sitesi ve hatta baz\u0131 e-ticaret siteleri (\u00f6rne\u011fin Shopify'\u0131n Storefront API'si ile) i\u00e7in idealdir. H\u0131z, g\u00fcvenlik ve bak\u0131m kolayl\u0131\u011f\u0131, profesyonel projelerde aranan temel \u00f6zelliklerdir. \u00d6zellikle i\u00e7erik s\u0131k de\u011fi\u015fmiyorsa veya dinamik etkile\u015fimler minimal ise m\u00fckemmel bir se\u00e7enektir.<\/p>\n<h4>Tailwind CSS \u00f6\u011frenmek i\u00e7in \u00f6nceden CSS bilgisi \u015fart m\u0131?<\/h4>\n<p>Temel CSS bilgisi (\u00f6zellikle kutu modeli, display \u00f6zellikleri, flexbox kavramlar\u0131) Tailwind'i daha h\u0131zl\u0131 ve verimli bir \u015fekilde anlaman\u0131za yard\u0131mc\u0131 olacakt\u0131r. Ancak Tailwind, \"utility-first\" yakla\u015f\u0131m\u0131yla CSS'i yazma \u015feklinizi de\u011fi\u015ftirdi\u011fi i\u00e7in, geleneksel CSS'e \u00e7ok fazla tak\u0131lmadan da \u00f6\u011frenmeye ba\u015flayabilirsiniz. Asl\u0131nda, Tailwind \u00f6\u011frenmek, CSS'in temel kavramlar\u0131n\u0131 daha iyi anlaman\u0131za da yard\u0131mc\u0131 olabilir.<\/p>\n<h4>Jekyll siteler g\u00fcvenlik a\u00e7\u0131s\u0131ndan nas\u0131l?<\/h4>\n<p>Jekyll taraf\u0131ndan olu\u015fturulan siteler tamamen statik HTML, CSS ve JavaScript dosyalar\u0131ndan ibarettir. Bu, sunucu taraf\u0131nda i\u015flenecek herhangi bir kod, veritaban\u0131 veya kullan\u0131c\u0131 giri\u015fi i\u015fleme mekanizmas\u0131 olmad\u0131\u011f\u0131 anlam\u0131na gelir. Bu nedenle, SQL enjeksiyonu, XSS (Cross-Site Scripting) veya di\u011fer sunucu tabanl\u0131 g\u00fcvenlik a\u00e7\u0131klar\u0131na kar\u015f\u0131 do\u011fal olarak \u00e7ok daha diren\u00e7lidirler. G\u00fcvenlik, statik sitelerin en b\u00fcy\u00fck avantajlar\u0131ndan biridir.<\/p>\n<h4>Bu temay\u0131 \u00f6zelle\u015ftirmek zor mu?<\/h4>\n<p>Tailwind CSS'in \"utility-first\" yap\u0131s\u0131 sayesinde, teman\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u00f6zelle\u015ftirmek olduk\u00e7a kolayd\u0131r. Do\u011frudan HTML'nizde veya Tailwind'in yap\u0131land\u0131rma dosyas\u0131nda renkleri, fontlar\u0131, bo\u015fluklar\u0131 ve di\u011fer stil \u00f6zelliklerini de\u011fi\u015ftirebilirsiniz. Jekyll'in Liquid \u015fablonlama dili ile i\u00e7erik ve yap\u0131sal de\u011fi\u015fiklikler yapmak da basittir. Geni\u015f bir Tailwind toplulu\u011fu ve d\u00f6k\u00fcmantasyonu sayesinde, ihtiyac\u0131n\u0131z olan her t\u00fcrl\u00fc kayna\u011fa kolayca ula\u015fabilirsiniz.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve kolayca y\u00f6netilebilir bir web sitesine sahip olmak kritik \u00f6nem ta\u015f\u0131yor. Ancak…","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":[126],"tags":[],"class_list":{"0":"post-33777","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Modern Jekyll Temas\u0131: Tailwind CSS ile H\u0131zl\u0131 ve Estetik Web Siteleri Geli\u015ftirin (\u00dccretsiz \u015eablon)<\/title>\n<meta name=\"description\" content=\"G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve kolayca y\u00f6netilebilir bir web sitesine sahip olmak kritik \u00f6nem ta\u015f\u0131yor. Ancak geleneksel i\u00e7erik y\u00f6netim sistemleri (CMS) veya eski moda temalar genellikle \u015fi\u015fkin kodlar, performans sorunlar\u0131 ve k\u0131s\u0131tl\u0131 \u00f6zelle\u015ftirme se\u00e7enekleriyle birlikte gelir. Peki ya hem bu sorunlar\u0131n \u00fcstesinden gelebilecek hem de size modern web geli\u015ftirmenin t\u00fcm esnekliklerini sunabilecek bir \u00e7\u00f6z\u00fcm olsayd\u0131? \u0130\u015fte tam da bu noktada, Jekyll ve Tailwind CSS ikilisi devreye giriyor. Bu makalede, size ad\u0131m ad\u0131m kendi modern Jekyll teman\u0131z\u0131 Tailwind CSS ile nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, mevcut \u00fccretsiz \u015fablonlardan nas\u0131l ilham alaca\u011f\u0131n\u0131z\u0131 ve web sitenizi yeni nesil standartlara nas\u0131l ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 anlataca\u011f\u0131m. E\u011fer statik sitelerin h\u0131z\u0131na, g\u00fcvenli\u011fine ve performans\u0131na hayransan\u0131z, ayn\u0131 zamanda tasar\u0131mda s\u0131f\u0131rdan her \u015feyi kontrol etmek istiyorsan\u0131z, do\u011fru yerdesiniz demektir. Bu makale sayesinde, kodlama bilginiz olmasa bile konuya hakim olmaya ba\u015flayacak, modern web siteleri in\u015fa etmenin kap\u0131lar\u0131n\u0131 aralayacaks\u0131n\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? \u00d6yleyse ba\u015flayal\u0131m!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modern Jekyll Temas\u0131: Tailwind CSS ile H\u0131zl\u0131 ve Estetik Web Siteleri Geli\u015ftirin (\u00dccretsiz \u015eablon)\" \/>\n<meta property=\"og:description\" content=\"G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve kolayca y\u00f6netilebilir bir web sitesine sahip olmak kritik \u00f6nem ta\u015f\u0131yor. Ancak geleneksel i\u00e7erik y\u00f6netim sistemleri (CMS) veya eski moda temalar genellikle \u015fi\u015fkin kodlar, performans sorunlar\u0131 ve k\u0131s\u0131tl\u0131 \u00f6zelle\u015ftirme se\u00e7enekleriyle birlikte gelir. Peki ya hem bu sorunlar\u0131n \u00fcstesinden gelebilecek hem de size modern web geli\u015ftirmenin t\u00fcm esnekliklerini sunabilecek bir \u00e7\u00f6z\u00fcm olsayd\u0131? \u0130\u015fte tam da bu noktada, Jekyll ve Tailwind CSS ikilisi devreye giriyor. Bu makalede, size ad\u0131m ad\u0131m kendi modern Jekyll teman\u0131z\u0131 Tailwind CSS ile nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, mevcut \u00fccretsiz \u015fablonlardan nas\u0131l ilham alaca\u011f\u0131n\u0131z\u0131 ve web sitenizi yeni nesil standartlara nas\u0131l ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 anlataca\u011f\u0131m. E\u011fer statik sitelerin h\u0131z\u0131na, g\u00fcvenli\u011fine ve performans\u0131na hayransan\u0131z, ayn\u0131 zamanda tasar\u0131mda s\u0131f\u0131rdan her \u015feyi kontrol etmek istiyorsan\u0131z, do\u011fru yerdesiniz demektir. Bu makale sayesinde, kodlama bilginiz olmasa bile konuya hakim olmaya ba\u015flayacak, modern web siteleri in\u015fa etmenin kap\u0131lar\u0131n\u0131 aralayacaks\u0131n\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? \u00d6yleyse ba\u015flayal\u0131m!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-06T20:31:23+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"32 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Modern Jekyll Temas\u0131: Tailwind CSS ile H\u0131zl\u0131 ve Estetik Web Siteleri Geli\u015ftirin (\u00dccretsiz \u015eablon)\",\"datePublished\":\"2025-11-06T20:31:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/\"},\"wordCount\":5981,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/\",\"name\":\"Modern Jekyll Temas\u0131: Tailwind CSS ile H\u0131zl\u0131 ve Estetik Web Siteleri Geli\u015ftirin (\u00dccretsiz \u015eablon)\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-06T20:31:23+00:00\",\"description\":\"G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve kolayca y\u00f6netilebilir bir web sitesine sahip olmak kritik \u00f6nem ta\u015f\u0131yor. Ancak geleneksel i\u00e7erik y\u00f6netim sistemleri (CMS) veya eski moda temalar genellikle \u015fi\u015fkin kodlar, performans sorunlar\u0131 ve k\u0131s\u0131tl\u0131 \u00f6zelle\u015ftirme se\u00e7enekleriyle birlikte gelir. Peki ya hem bu sorunlar\u0131n \u00fcstesinden gelebilecek hem de size modern web geli\u015ftirmenin t\u00fcm esnekliklerini sunabilecek bir \u00e7\u00f6z\u00fcm olsayd\u0131? \u0130\u015fte tam da bu noktada, Jekyll ve Tailwind CSS ikilisi devreye giriyor. Bu makalede, size ad\u0131m ad\u0131m kendi modern Jekyll teman\u0131z\u0131 Tailwind CSS ile nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, mevcut \u00fccretsiz \u015fablonlardan nas\u0131l ilham alaca\u011f\u0131n\u0131z\u0131 ve web sitenizi yeni nesil standartlara nas\u0131l ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 anlataca\u011f\u0131m. E\u011fer statik sitelerin h\u0131z\u0131na, g\u00fcvenli\u011fine ve performans\u0131na hayransan\u0131z, ayn\u0131 zamanda tasar\u0131mda s\u0131f\u0131rdan her \u015feyi kontrol etmek istiyorsan\u0131z, do\u011fru yerdesiniz demektir. Bu makale sayesinde, kodlama bilginiz olmasa bile konuya hakim olmaya ba\u015flayacak, modern web siteleri in\u015fa etmenin kap\u0131lar\u0131n\u0131 aralayacaks\u0131n\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? \u00d6yleyse ba\u015flayal\u0131m!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Modern Jekyll Temas\u0131: Tailwind CSS ile H\u0131zl\u0131 ve Estetik Web Siteleri Geli\u015ftirin (\u00dccretsiz \u015eablon)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Modern Jekyll Temas\u0131: Tailwind CSS ile H\u0131zl\u0131 ve Estetik Web Siteleri Geli\u015ftirin (\u00dccretsiz \u015eablon)","description":"G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve kolayca y\u00f6netilebilir bir web sitesine sahip olmak kritik \u00f6nem ta\u015f\u0131yor. Ancak geleneksel i\u00e7erik y\u00f6netim sistemleri (CMS) veya eski moda temalar genellikle \u015fi\u015fkin kodlar, performans sorunlar\u0131 ve k\u0131s\u0131tl\u0131 \u00f6zelle\u015ftirme se\u00e7enekleriyle birlikte gelir. Peki ya hem bu sorunlar\u0131n \u00fcstesinden gelebilecek hem de size modern web geli\u015ftirmenin t\u00fcm esnekliklerini sunabilecek bir \u00e7\u00f6z\u00fcm olsayd\u0131? \u0130\u015fte tam da bu noktada, Jekyll ve Tailwind CSS ikilisi devreye giriyor. Bu makalede, size ad\u0131m ad\u0131m kendi modern Jekyll teman\u0131z\u0131 Tailwind CSS ile nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, mevcut \u00fccretsiz \u015fablonlardan nas\u0131l ilham alaca\u011f\u0131n\u0131z\u0131 ve web sitenizi yeni nesil standartlara nas\u0131l ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 anlataca\u011f\u0131m. E\u011fer statik sitelerin h\u0131z\u0131na, g\u00fcvenli\u011fine ve performans\u0131na hayransan\u0131z, ayn\u0131 zamanda tasar\u0131mda s\u0131f\u0131rdan her \u015feyi kontrol etmek istiyorsan\u0131z, do\u011fru yerdesiniz demektir. Bu makale sayesinde, kodlama bilginiz olmasa bile konuya hakim olmaya ba\u015flayacak, modern web siteleri in\u015fa etmenin kap\u0131lar\u0131n\u0131 aralayacaks\u0131n\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? \u00d6yleyse ba\u015flayal\u0131m!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/","og_locale":"tr_TR","og_type":"article","og_title":"Modern Jekyll Temas\u0131: Tailwind CSS ile H\u0131zl\u0131 ve Estetik Web Siteleri Geli\u015ftirin (\u00dccretsiz \u015eablon)","og_description":"G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve kolayca y\u00f6netilebilir bir web sitesine sahip olmak kritik \u00f6nem ta\u015f\u0131yor. Ancak geleneksel i\u00e7erik y\u00f6netim sistemleri (CMS) veya eski moda temalar genellikle \u015fi\u015fkin kodlar, performans sorunlar\u0131 ve k\u0131s\u0131tl\u0131 \u00f6zelle\u015ftirme se\u00e7enekleriyle birlikte gelir. Peki ya hem bu sorunlar\u0131n \u00fcstesinden gelebilecek hem de size modern web geli\u015ftirmenin t\u00fcm esnekliklerini sunabilecek bir \u00e7\u00f6z\u00fcm olsayd\u0131? \u0130\u015fte tam da bu noktada, Jekyll ve Tailwind CSS ikilisi devreye giriyor. Bu makalede, size ad\u0131m ad\u0131m kendi modern Jekyll teman\u0131z\u0131 Tailwind CSS ile nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, mevcut \u00fccretsiz \u015fablonlardan nas\u0131l ilham alaca\u011f\u0131n\u0131z\u0131 ve web sitenizi yeni nesil standartlara nas\u0131l ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 anlataca\u011f\u0131m. E\u011fer statik sitelerin h\u0131z\u0131na, g\u00fcvenli\u011fine ve performans\u0131na hayransan\u0131z, ayn\u0131 zamanda tasar\u0131mda s\u0131f\u0131rdan her \u015feyi kontrol etmek istiyorsan\u0131z, do\u011fru yerdesiniz demektir. Bu makale sayesinde, kodlama bilginiz olmasa bile konuya hakim olmaya ba\u015flayacak, modern web siteleri in\u015fa etmenin kap\u0131lar\u0131n\u0131 aralayacaks\u0131n\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? \u00d6yleyse ba\u015flayal\u0131m!","og_url":"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-06T20:31:23+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"32 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Modern Jekyll Temas\u0131: Tailwind CSS ile H\u0131zl\u0131 ve Estetik Web Siteleri Geli\u015ftirin (\u00dccretsiz \u015eablon)","datePublished":"2025-11-06T20:31:23+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/"},"wordCount":5981,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/","url":"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/","name":"Modern Jekyll Temas\u0131: Tailwind CSS ile H\u0131zl\u0131 ve Estetik Web Siteleri Geli\u015ftirin (\u00dccretsiz \u015eablon)","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-06T20:31:23+00:00","description":"G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve kolayca y\u00f6netilebilir bir web sitesine sahip olmak kritik \u00f6nem ta\u015f\u0131yor. Ancak geleneksel i\u00e7erik y\u00f6netim sistemleri (CMS) veya eski moda temalar genellikle \u015fi\u015fkin kodlar, performans sorunlar\u0131 ve k\u0131s\u0131tl\u0131 \u00f6zelle\u015ftirme se\u00e7enekleriyle birlikte gelir. Peki ya hem bu sorunlar\u0131n \u00fcstesinden gelebilecek hem de size modern web geli\u015ftirmenin t\u00fcm esnekliklerini sunabilecek bir \u00e7\u00f6z\u00fcm olsayd\u0131? \u0130\u015fte tam da bu noktada, Jekyll ve Tailwind CSS ikilisi devreye giriyor. Bu makalede, size ad\u0131m ad\u0131m kendi modern Jekyll teman\u0131z\u0131 Tailwind CSS ile nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, mevcut \u00fccretsiz \u015fablonlardan nas\u0131l ilham alaca\u011f\u0131n\u0131z\u0131 ve web sitenizi yeni nesil standartlara nas\u0131l ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 anlataca\u011f\u0131m. E\u011fer statik sitelerin h\u0131z\u0131na, g\u00fcvenli\u011fine ve performans\u0131na hayransan\u0131z, ayn\u0131 zamanda tasar\u0131mda s\u0131f\u0131rdan her \u015feyi kontrol etmek istiyorsan\u0131z, do\u011fru yerdesiniz demektir. Bu makale sayesinde, kodlama bilginiz olmasa bile konuya hakim olmaya ba\u015flayacak, modern web siteleri in\u015fa etmenin kap\u0131lar\u0131n\u0131 aralayacaks\u0131n\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? \u00d6yleyse ba\u015flayal\u0131m!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/modern-jekyll-temasi-tailwind-css-ile-hizli-ve-estetik-web-siteleri-gelistirin-ucretsiz-sablon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Modern Jekyll Temas\u0131: Tailwind CSS ile H\u0131zl\u0131 ve Estetik Web Siteleri Geli\u015ftirin (\u00dccretsiz \u015eablon)"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33777"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33777\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}