\n* Headless CMS:<\/strong> \u0130\u00e7erik depolama (backend) ve sunum (frontend) birbirinden tamamen ba\u011f\u0131ms\u0131zd\u0131r. \u0130\u00e7eri\u011fi bir API arac\u0131l\u0131\u011f\u0131yla sunar ve bu i\u00e7eri\u011fi istedi\u011finiz herhangi bir frontend teknolojisiyle (React, Vue, Angular, Svelte, mobil uygulamalar vb.) \u00e7ekerek kendi benzersiz kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcz\u00fc olu\u015fturursunuz.<\/p>\n
Headless Mimarisinin Avantajlar\u0131<\/h4>\n
1. Esneklik ve Teknoloji \u00d6zg\u00fcrl\u00fc\u011f\u00fc:<\/strong> Geli\u015ftiriciler, frontend i\u00e7in en sevdikleri ve projenin ihtiya\u00e7lar\u0131na en uygun teknolojiyi se\u00e7ebilirler. Bu, daha iyi performans, geli\u015ftirme h\u0131z\u0131 ve daha iyi bir geli\u015ftirici deneyimi anlam\u0131na gelir. * Bloglar ve Haber Siteleri:<\/strong> Hashnode gibi platformlar, i\u00e7eri\u011fi y\u00f6netirken, frontend’i tamamen size b\u0131rak\u0131r. Hashnode, \u00f6zellikle geli\u015ftiriciler ve teknoloji merakl\u0131lar\u0131 i\u00e7in tasarlanm\u0131\u015f, g\u00fc\u00e7l\u00fc bir bloglama platformudur. Markdown deste\u011fi, kod bloklar\u0131, entegre yorum sistemi ve aktif bir geli\u015ftirici toplulu\u011fu gibi \u00f6zellikleriyle \u00f6ne \u00e7\u0131kar. Ancak Hashnode’u bu makalenin konusu yapan as\u0131l \u00f6zelli\u011fi, sundu\u011fu g\u00fc\u00e7l\u00fc GraphQL API’si ile i\u00e7eri\u011finizi headless bir \u015fekilde kullanma yetene\u011fidir.<\/p>\n * Geli\u015ftirici Odakl\u0131:<\/strong> Kod bloklar\u0131, Markdown edit\u00f6r\u00fc, entegrasyonlar (GitHub, Notion vb.) Hashnode, blog i\u00e7eri\u011finizi olu\u015fturmak ve y\u00f6netmek i\u00e7in harika bir platformdur. Yaz\u0131 yazmaya odaklanman\u0131z\u0131 sa\u011flar ve teknik detaylarla u\u011fra\u015fman\u0131za gerek kalmaz. Ancak, blogunuzun g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini tamamen kendi kontrol\u00fcn\u00fcz alt\u0131na almak istedi\u011finizde headless yakla\u015f\u0131m\u0131 devreye girer. Hashnode’un GraphQL API’si sayesinde:<\/p>\n 1. Tam Tasar\u0131m Kontrol\u00fc:<\/strong> Blogunuzun her pikselini kendi markan\u0131za ve tercihlerinize g\u00f6re tasarlayabilirsiniz. Hashnode, blog i\u00e7eri\u011finize eri\u015fmek i\u00e7in GraphQL tabanl\u0131 bir API sunar. GraphQL, REST API’lerine g\u00f6re daha esnek ve verimli bir veri sorgulama dilidir. \u0130stedi\u011finiz veriyi tam olarak belirtmenize olanak tan\u0131r, bu da gereksiz veri transferini \u00f6nler.<\/p>\n * API U\u00e7 Noktas\u0131:<\/strong> Genellikle DigitalOcean, geli\u015ftiricilere ve k\u00fc\u00e7\u00fck i\u015fletmelere y\u00f6nelik bulut altyap\u0131s\u0131 hizmetleri sunan pop\u00fcler bir platformdur. Kullan\u0131m kolayl\u0131\u011f\u0131, uygun fiyatland\u0131rmas\u0131 ve geni\u015f hizmet yelpazesi ile dikkat \u00e7eker. Kendi headless Hashnode frontend’inizi bar\u0131nd\u0131rmak i\u00e7in DigitalOcean, hem esneklik hem de maliyet etkinli\u011fi sunar.<\/p>\n 1. Droplets (Sanal Sunucular):<\/strong> Linux tabanl\u0131 sanal makinelerdir. Tam kontrol ve \u00f6zelle\u015ftirme imkan\u0131 sunar. Kendi sunucunuzu kurup y\u00f6netmek istedi\u011finizde idealdir. * Basitlik ve Geli\u015ftirici Dostu:<\/strong> Hem Droplets hem de App Platform, geli\u015ftiricilerin h\u0131zl\u0131ca da\u011f\u0131t\u0131m yapmas\u0131n\u0131 sa\u011flayan sezgisel aray\u00fczlere sahiptir. Bu makalede, headless Hashnode frontend’inizi da\u011f\u0131tmak i\u00e7in DigitalOcean App Platform’u \u00f6neriyoruz. Daha az sunucu y\u00f6netimi gerektirir ve CI\/CD s\u00fcre\u00e7lerini otomatikle\u015ftirir. Ancak, Droplet \u00fczerinde de nas\u0131l da\u011f\u0131t\u0131m yapabilece\u011finize k\u0131saca de\u011finece\u011fiz.<\/p>\n Headless Hashnode blogunuzu kurmaya ba\u015flamadan \u00f6nce, baz\u0131 temel gereksinimleri kar\u015f\u0131laman\u0131z ve haz\u0131rl\u0131klar\u0131 yapman\u0131z gerekmektedir.<\/p>\n 1. Hashnode Hesab\u0131 ve Blogu:<\/strong> Hashnode i\u00e7eri\u011finize eri\u015fmek i\u00e7in GraphQL API’sini kullanaca\u011f\u0131z. \u0130lk ad\u0131m, API token’\u0131n\u0131z\u0131 almak ve basit bir sorgu ile API’nin \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulamakt\u0131r.<\/p>\n 1. Hashnode hesab\u0131n\u0131za giri\u015f yap\u0131n. Hashnode’un GraphQL API’si i\u00e7in ana u\u00e7 nokta: Hashnode API’si ile etkile\u015fim kurmak i\u00e7in bir GraphQL istemcisi kullanaca\u011f\u0131z. Next.js projemizde A\u015fa\u011f\u0131daki sorgu, belirli bir kullan\u0131c\u0131ya ait blog g\u00f6nderilerini (ba\u015fl\u0131k, slug ve yay\u0131n tarihi ile birlikte) listeler:<\/p>\n Bu sorguyu Postman, Insomnia gibi ara\u00e7larla veya do\u011frudan Hashnode’un kendi API Playground’u \u00fczerinden test edebilirsiniz. Unutmay\u0131n, baz\u0131 sorgular i\u00e7in Bu b\u00f6l\u00fcmde, Hashnode’dan veri \u00e7ekecek ve bunlar\u0131 g\u00fczel bir \u015fekilde g\u00f6sterecek bir Next.js uygulamas\u0131 geli\u015ftirece\u011fiz. Next.js, React tabanl\u0131 bir \u00e7er\u00e7evedir ve statik site olu\u015fturma (SSG) veya sunucu taraf\u0131 renderlama (SSR) gibi \u00f6zellikleriyle headless CMS projeleri i\u00e7in m\u00fckemmel bir se\u00e7imdir.<\/p>\n Yeni bir Next.js projesi olu\u015ftural\u0131m:<\/p>\n Gerekli GraphQL k\u00fct\u00fcphanelerini kural\u0131m:<\/p>\n * Hashnode PAT’nizi ve Hashnode blogunuzun kullan\u0131c\u0131 ad\u0131n\u0131 g\u00fcvenli bir \u015fekilde saklamak i\u00e7in ortam de\u011fi\u015fkenlerini kullanaca\u011f\u0131z. Projenizin k\u00f6k dizininde * Not: {new Date(post.publishedAt).toLocaleDateString()}<\/p>\n {post.brief}<\/p>\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/div>\n );\n};\n\nexport default Home;<\/code><\/pre>\n Bu \u00f6rnekte Tailwind CSS s\u0131n\u0131flar\u0131 kullan\u0131lm\u0131\u015ft\u0131r. Projenize Tailwind CSS eklemek i\u00e7in Next.js dok\u00fcmantasyonuna bakabilirsiniz.<\/p>\n G\u00f6nderi detaylar\u0131n\u0131 g\u00f6stermek i\u00e7in dinamik bir rota olu\u015fturaca\u011f\u0131z. \n Yazar: {post.author.name} - Yay\u0131nlanma Tarihi: {new Date(post.publishedAt).toLocaleDateString()}\n <\/p>\n {post.coverImage && (\n Uygulaman\u0131z\u0131 yerel olarak test etmek i\u00e7in:<\/p>\n Taray\u0131c\u0131n\u0131zda Next.js uygulaman\u0131z\u0131 DigitalOcean’da da\u011f\u0131tmak i\u00e7in iki ana se\u00e7ene\u011finiz var: DigitalOcean App Platform (\u00f6nerilen) veya bir Droplet (sanal sunucu).<\/p>\n DigitalOcean App Platform, Git deposundan do\u011frudan uygulama da\u011f\u0131t\u0131m\u0131 sa\u011flayan y\u00f6netilen bir hizmettir. CI\/CD, otomatik SSL, \u00f6l\u00e7ekleme gibi \u00f6zellikleri otomatik olarak y\u00f6netir.<\/p>\n 1. Kodunuzu Git Deposuna Y\u00fckleyin:<\/strong> Next.js projenizi GitHub, GitLab veya Bitbucket gibi bir Git sa\u011flay\u0131c\u0131s\u0131na y\u00fckleyin. Art\u0131k her Git deposuna push yapt\u0131\u011f\u0131n\u0131zda, DigitalOcean App Platform otomatik olarak uygulaman\u0131z\u0131 yeniden derleyip da\u011f\u0131tacakt\u0131r. Bu, geli\u015ftirme s\u00fcrecinizi b\u00fcy\u00fck \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r.<\/p>\n E\u011fer sunucu y\u00f6netimi konusunda daha fazla kontrol istiyorsan\u0131z veya daha karma\u015f\u0131k bir altyap\u0131n\u0131z varsa, bir Droplet \u00fczerinde da\u011f\u0131t\u0131m yapabilirsiniz.<\/p>\n 1. Droplet Olu\u015fturun:<\/strong> 4. Git Kurulumu:<\/strong> 7. Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Kurun ve Uygulamay\u0131 Derleyin:<\/strong> 9. Nginx ile Reverse Proxy ve SSL (\u0130ste\u011fe Ba\u011fl\u0131 ama \u00d6nerilir):<\/strong> * Yap\u0131land\u0131rma dosyas\u0131n\u0131 etkinle\u015ftirin ve Nginx’i yeniden ba\u015flat\u0131n:<\/p>\n * SSL (Let’s Encrypt ile Certbot):<\/strong><\/p>\n Certbot, Nginx yap\u0131land\u0131rman\u0131z\u0131 otomatik olarak g\u00fcncelleyecek ve SSL sertifikalar\u0131n\u0131 y\u00fckleyecektir. Bu ad\u0131mlarla, Next.js uygulaman\u0131z Droplet \u00fczerinde \u00e7al\u0131\u015facak ve Nginx arac\u0131l\u0131\u011f\u0131yla eri\u015filebilir olacakt\u0131r.<\/p>\n DigitalOcean App Platform kullan\u0131yorsan\u0131z, CI\/CD s\u00fcreci zaten otomatiktir. Git deponuza yapt\u0131\u011f\u0131n\u0131z her push, uygulaman\u0131z\u0131n otomatik olarak yeniden da\u011f\u0131t\u0131lmas\u0131n\u0131 tetikler. Bu, geli\u015ftirme s\u00fcrecinizi basitle\u015ftirir ve h\u0131zland\u0131r\u0131r.<\/p>\n E\u011fer bir Droplet \u00fczerinde da\u011f\u0131t\u0131m yap\u0131yorsan\u0131z, CI\/CD’yi manuel olarak yap\u0131land\u0131rman\u0131z gerekir. GitHub Actions, GitLab CI\/CD veya Jenkins gibi ara\u00e7lar\u0131 kullanarak, kodunuzu her push etti\u011finizde Droplet’inize otomatik olarak da\u011f\u0131t\u0131m yapacak i\u015f ak\u0131\u015flar\u0131 (workflows) olu\u015fturabilirsiniz. Bu, genellikle SSH \u00fczerinden sunucuya ba\u011flan\u0131p Headless mimari, SEO ve performans \u00fczerinde tam kontrol sahibi olman\u0131z\u0131 sa\u011flar.<\/p>\n * Statik Site \u00dcretimi (SSG):<\/strong> Next.js’in 1. Ba\u015fka bir frontend \u00e7at\u0131s\u0131 kullanabilir miyim?<\/strong> 2. Hashnode’daki yorumlar\u0131m\u0131 nas\u0131l g\u00f6steririm?<\/strong> 3. Hashnode API’sinde bir de\u011fi\u015fiklik olursa ne olur?<\/strong> 4. Maliyetler ne kadar olur?<\/strong> 5. Blogumdaki i\u00e7eri\u011fi nas\u0131l g\u00fcncellerim?<\/strong> Bu makalede, Hashnode’u headless bir CMS olarak kullanarak, Next.js ile bir blog frontend’i geli\u015ftirmeyi ve bu uygulamay\u0131 DigitalOcean \u00fczerinde da\u011f\u0131tmay\u0131 ad\u0131m ad\u0131m \u00f6\u011frendiniz. Headless mimarinin sundu\u011fu esneklik ve performans avantajlar\u0131 sayesinde, kendi markan\u0131za ve ihtiya\u00e7lar\u0131n\u0131za tamamen uygun, h\u0131zl\u0131 ve \u00f6l\u00e7eklenebilir bir blog deneyimi yaratabilirsiniz.<\/p>\n DigitalOcean’\u0131n geli\u015ftirici dostu platformu, uygulama da\u011f\u0131t\u0131m\u0131n\u0131 ve y\u00f6netimini kolayla\u015ft\u0131r\u0131rken, Hashnode’un g\u00fc\u00e7l\u00fc GraphQL API’si i\u00e7eri\u011finize sorunsuz eri\u015fim sa\u011flar. Bu kombinasyon, modern web geli\u015ftirme prensiplerini benimseyen herkes i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 setidir.<\/p>\n Art\u0131k kendi \u00f6zelle\u015ftirilmi\u015f headless blogunuzu kurmak i\u00e7in gerekli bilgiye sahipsiniz. Deneyler yapmaktan, farkl\u0131 frontend teknolojilerini ke\u015ffetmekten ve blogunuzu kendi benzersiz vizyonunuzla \u015fekillendirmekten \u00e7ekinmeyin. \u0130yi bloglamalar!
\n2. \u00c7ok Kanall\u0131 Da\u011f\u0131t\u0131m:<\/strong> \u0130\u00e7erik, tek bir kaynaktan (headless CMS) birden fazla cihaza ve platforma (web sitesi, mobil uygulama, ak\u0131ll\u0131 saat, IoT cihaz\u0131 vb.) kolayca da\u011f\u0131t\u0131labilir. \u0130\u00e7eri\u011fi bir kez olu\u015fturur, her yerde kullan\u0131rs\u0131n\u0131z.
\n3. Performans:<\/strong> Frontend’in ayr\u0131 olmas\u0131, statik site olu\u015fturucular\u0131 (SSG) veya sunucu taraf\u0131 renderlama (SSR) gibi modern tekniklerin kullan\u0131lmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Bu da daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve daha iyi bir kullan\u0131c\u0131 deneyimi sa\u011flar.
\n4. \u00d6l\u00e7eklenebilirlik:<\/strong> Backend ve frontend’in ayr\u0131 ayr\u0131 \u00f6l\u00e7eklenebilmesi, yo\u011fun trafik durumlar\u0131nda sistemin daha dayan\u0131kl\u0131 olmas\u0131n\u0131 sa\u011flar.
\n5. G\u00fcvenlik:<\/strong> Frontend ve backend’in ayr\u0131lmas\u0131, sald\u0131r\u0131 y\u00fczeyini azaltabilir. Backend genellikle bir API arac\u0131l\u0131\u011f\u0131yla eri\u015fildi\u011fi i\u00e7in daha az do\u011frudan maruz kal\u0131r.
\n6. Gelece\u011fe Haz\u0131rl\u0131k:<\/strong> Yeni teknolojiler ortaya \u00e7\u0131kt\u0131\u011f\u0131nda, sadece frontend katman\u0131n\u0131 g\u00fcncelleyerek i\u00e7eri\u011finizi yeni platformlara ta\u015f\u0131yabilirsiniz, backend’i de\u011fi\u015ftirmeye gerek kalmaz.<\/p>\nHeadless Kullan\u0131m Senaryolar\u0131<\/h4>\n
\n* E-ticaret Siteleri:<\/strong> \u00dcr\u00fcn bilgilerini bir headless CMS’te tutarak, farkl\u0131 frontend’ler \u00fczerinden sat\u0131\u015f yapabilirsiniz.
\n* Kurumsal Web Siteleri:<\/strong> \u0130\u00e7eri\u011fi farkl\u0131 pazarlama kanallar\u0131nda tutarl\u0131 bir \u015fekilde sunmak i\u00e7in idealdir.
\n* Mobil Uygulamalar:<\/strong> Uygulama i\u00e7i i\u00e7eri\u011fi merkezi bir headless CMS’ten y\u00f6netmek.<\/p>\nHashnode’u Tan\u0131mak: Geli\u015ftiriciler \u0130\u00e7in Bir Bloglama Platformu<\/h3>\n
Hashnode’un Ba\u015fl\u0131ca \u00d6zellikleri<\/h4>\n
\n* Topluluk:<\/strong> Geni\u015f ve aktif bir geli\u015ftirici toplulu\u011fu sayesinde i\u00e7eriklerinizin daha fazla ki\u015fiye ula\u015fma potansiyeli.
\n* \u00d6zel Alan Ad\u0131 Deste\u011fi:<\/strong> Blogunuzu kendi \u00f6zel alan ad\u0131n\u0131zda yay\u0131nlayabilirsiniz.
\n* GraphQL API:<\/strong> \u0130\u00e7eri\u011finize programatik olarak eri\u015fmek i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir API.
\n* Otomatik SEO:<\/strong> Temel SEO ayarlar\u0131 otomatik olarak yap\u0131l\u0131rken, headless kullan\u0131mda tam kontrol sizde olur.<\/p>\nNeden Hashnode’u Headless CMS Olarak Kullanmal\u0131?<\/h4>\n
\n2. \u00d6zelle\u015ftirilmi\u015f Performans:<\/strong> Next.js gibi modern frontend \u00e7at\u0131lar\u0131n\u0131n sundu\u011fu optimizasyon \u00f6zelliklerini kullanarak blogunuzu inan\u0131lmaz h\u0131zl\u0131 hale getirebilirsiniz.
\n3. Benzersiz \u00d6zellikler:<\/strong> Hashnode’un kendi aray\u00fcz\u00fcnde bulunmayan \u00f6zel \u00f6zellikler veya entegrasyonlar ekleyebilirsiniz.
\n4. Frontend Teknolojisi Se\u00e7imi:<\/strong> Kendi frontend geli\u015ftirme becerilerinize veya projenizin gereksinimlerine en uygun JavaScript \u00e7at\u0131s\u0131n\u0131 (React, Vue, Svelte vb.) kullanabilirsiniz.<\/p>\nHashnode GraphQL API’si<\/h4>\n
https:\/\/api.hashnode.com\/<\/code> veya https:\/\/gql.hashnode.com\/<\/code> gibi bir adreste bulunur. (Hashnode v2 API i\u00e7in https:\/\/gql.hashnode.com\/<\/code>)
\n* Kimlik Do\u011frulama:<\/strong> Genellikle bir Personal Access Token (PAT) kullan\u0131larak yap\u0131l\u0131r. Bu token, Hashnode hesab\u0131n\u0131zdan olu\u015fturulur ve API isteklerinizle birlikte g\u00f6nderilir.<\/p>\nDigitalOcean’\u0131 Tan\u0131mak: Bulut Altyap\u0131n\u0131z<\/h3>\n
DigitalOcean’\u0131n Ba\u015fl\u0131ca Hizmetleri<\/h4>\n
\n2. App Platform:<\/strong> Git deposundan do\u011frudan uygulama da\u011f\u0131t\u0131m\u0131 sa\u011flayan, y\u00f6netilen bir platformdur (PaaS). Geli\u015ftiricilerin altyap\u0131 y\u00f6netimi yerine kod yazmaya odaklanmas\u0131n\u0131 sa\u011flar. Otomatik \u00f6l\u00e7ekleme, CI\/CD, SSL gibi \u00f6zellikleri vard\u0131r.
\n3. Spaces (Nesne Depolama):<\/strong> Amazon S3 benzeri, \u00f6l\u00e7eklenebilir ve uygun maliyetli nesne depolama hizmetidir. Statik dosyalar, resimler ve videolar i\u00e7in kullan\u0131labilir.
\n4. Managed Databases:<\/strong> Y\u00f6netilen veritaban\u0131 hizmetleri (PostgreSQL, MySQL, Redis vb.).
\n5. Kubernetes:<\/strong> Y\u00f6netilen Kubernetes k\u00fcmeleri.<\/p>\nNeden DigitalOcean Headless Frontend Da\u011f\u0131t\u0131m\u0131 \u0130\u00e7in \u0130yi Bir Se\u00e7im?<\/h4>\n
\n* Maliyet Etkinli\u011fi:<\/strong> K\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projeler i\u00e7in rekabet\u00e7i fiyatland\u0131rma sunar.
\n* Performans:<\/strong> SSD tabanl\u0131 depolama ve y\u00fcksek h\u0131zl\u0131 a\u011f ba\u011flant\u0131lar\u0131 sayesinde iyi performans sunar.
\n* \u00d6l\u00e7eklenebilirlik:<\/strong> Uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e kolayca kaynaklar\u0131 art\u0131rabilirsiniz.
\n* App Platform ile CI\/CD:<\/strong> Git entegrasyonu sayesinde kodunuzu her push etti\u011finizde otomatik da\u011f\u0131t\u0131m yapabilir, bu da geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.<\/p>\n\u00d6n Gereksinimler ve Haz\u0131rl\u0131klar<\/h3>\n
\n * Bir Hashnode hesab\u0131n\u0131z\u0131n olmas\u0131 ve en az bir blog olu\u015fturmu\u015f olman\u0131z gerekir.
\n * Hashnode blogunuzun ayarlar\u0131ndan bir Personal Access Token (PAT)<\/strong> olu\u015fturman\u0131z gerekecek. Bu token, Hashnode API’sine g\u00fcvenli bir \u015fekilde eri\u015fmek i\u00e7in kullan\u0131lacakt\u0131r. Settings -> Developer -> Personal Access Tokens<\/code> yolunu izleyerek yeni bir token olu\u015fturabilirsiniz. Bu token’\u0131 g\u00fcvenli bir yerde saklay\u0131n, zira bir daha g\u00f6sterilmeyecektir.
\n2. DigitalOcean Hesab\u0131:<\/strong>
\n * Bir DigitalOcean hesab\u0131na sahip olman\u0131z gerekir. Hen\u00fcz yoksa, kaydolmak olduk\u00e7a basittir.
\n3. Temel Web Geli\u015ftirme Bilgisi:<\/strong>
\n * JavaScript, React (veya se\u00e7ti\u011finiz ba\u015fka bir frontend \u00e7at\u0131s\u0131) ve Next.js (veya Gatsby) hakk\u0131nda temel bilgiye sahip olman\u0131z faydal\u0131 olacakt\u0131r.
\n * Git ve komut sat\u0131r\u0131 (terminal) kullan\u0131m\u0131 hakk\u0131nda bilgi.
\n4. Yerel Geli\u015ftirme Ortam\u0131:<\/strong>
\n * Node.js ve npm\/yarn:<\/strong> Yerel makinenizde Node.js’in g\u00fcncel bir s\u00fcr\u00fcm\u00fcn\u00fcn (tercihen LTS) kurulu olmas\u0131 gerekir. npm (Node Package Manager) veya yarn paket y\u00f6neticisini kullanaca\u011f\u0131z.
\n * Git:<\/strong> Kodunuzu versiyonlamak ve DigitalOcean’a da\u011f\u0131tmak i\u00e7in Git kurulu olmal\u0131d\u0131r.
\n * Metin D\u00fczenleyici\/IDE:<\/strong> VS Code gibi bir kod d\u00fczenleyici.
\n5. Alan Ad\u0131 (\u0130ste\u011fe Ba\u011fl\u0131 ama \u00d6nerilir):<\/strong>
\n * Blogunuzu kendi \u00f6zel alan ad\u0131n\u0131zda yay\u0131nlamak isterseniz, bir alan ad\u0131 kaydetmi\u015f olman\u0131z ve DigitalOcean’a y\u00f6nlendirme yapabilmeniz gerekecektir.<\/p>\nHashnode API Eri\u015fimi ve Yap\u0131land\u0131rma<\/h3>\n
Personal Access Token (PAT) Olu\u015fturma<\/h4>\n
\n2. Sol men\u00fcden Settings<\/code> (Ayarlar) se\u00e7ene\u011fine t\u0131klay\u0131n.
\n3. Developer<\/code> (Geli\u015ftirici) sekmesine gidin.
\n4. Personal Access Tokens<\/code> (Ki\u015fisel Eri\u015fim Tokenlar\u0131) b\u00f6l\u00fcm\u00fcnde Generate New Token<\/code> (Yeni Token Olu\u015ftur) d\u00fc\u011fmesine t\u0131klay\u0131n.
\n5. Token’\u0131n\u0131za anlaml\u0131 bir isim verin (\u00f6rn. “MyHeadlessBlog”).
\n6. Olu\u015fturulan token’\u0131 kopyalay\u0131n ve g\u00fcvenli bir yere kaydedin. Bu token’\u0131 daha sonra frontend uygulaman\u0131zda ortam de\u011fi\u015fkeni olarak kullanaca\u011f\u0131z.<\/p>\nHashnode GraphQL API U\u00e7 Noktas\u0131<\/h4>\n
https:\/\/gql.hashnode.com\/<\/code>. T\u00fcm GraphQL sorgular\u0131m\u0131z\u0131 bu adrese g\u00f6nderece\u011fiz.<\/p>\nBasit Bir GraphQL Sorgusu<\/h4>\n
graphql-request<\/code> k\u00fct\u00fcphanesini kullanmak pratik olacakt\u0131r. Ancak \u00f6nce, API’yi anlamak i\u00e7in bir \u00f6rnek sorguya bakal\u0131m.<\/p>\nquery GetUserArticles($username: String!) {\n user(username: $username) {\n publication {\n posts(page: 0) {\n _id\n title\n slug\n publishedAt\n brief\n coverImage {\n url\n }\n }\n }\n }\n}<\/code><\/pre>\nAuthorization<\/code> ba\u015fl\u0131\u011f\u0131 alt\u0131nda Bearer YOUR_HASHNODE_PAT<\/code> \u015feklinde token’\u0131n\u0131z\u0131 g\u00f6ndermeniz gerekebilir.<\/p>\nHeadless Frontend Geli\u015ftirme: Next.js ile Blog Uygulamas\u0131<\/h3>\n
Next.js Projesi Olu\u015fturma<\/h4>\n
npx create-next-app@latest my-headless-hashnode-blog --typescript\ncd my-headless-hashnode-blog<\/code><\/pre>\nnpm install graphql graphql-request react-markdown\nveya yarn add graphql graphql-request react-markdown<\/code><\/pre>\n<\/h2>\n
graphql<\/code>: GraphQL sorgular\u0131n\u0131 ve \u015femalar\u0131n\u0131 tan\u0131mlamak i\u00e7in.
\n* graphql-request<\/code>: GraphQL API’sine istek g\u00f6ndermek i\u00e7in hafif bir istemci.
\n* react-markdown<\/code>: Markdown i\u00e7eri\u011fini React bile\u015fenlerine d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in.<\/p>\nOrtam De\u011fi\u015fkenleri<\/h4>\n
.env.local<\/code> adl\u0131 bir dosya olu\u015fturun:<\/p>\nNEXT_PUBLIC_HASHNODE_API_URL=https:\/\/gql.hashnode.com\/\nHASHNODE_PAT=your_hashnode_personal_access_token\nHASHNODE_USERNAME=your_hashnode_username<\/code><\/pre>\nNEXT_PUBLIC_<\/code> \u00f6neki, de\u011fi\u015fkenin istemci taraf\u0131nda da eri\u015filebilir olmas\u0131n\u0131 sa\u011flar (SSG\/SSR ba\u011flam\u0131nda). PAT’nizi do\u011frudan istemci taraf\u0131nda kullanmaktan ka\u00e7\u0131nmal\u0131s\u0131n\u0131z, ancak API URL’si genellikle kamuya a\u00e7\u0131kt\u0131r. PAT’yi sadece sunucu taraf\u0131nda (getStaticProps\/getServerSideProps) kullanaca\u011f\u0131z.<\/p>\nHashnode API \u0130stemcisi Olu\u015fturma<\/h4>\n
lib\/hashnode.ts<\/code> (veya .js<\/code>) ad\u0131nda bir dosya olu\u015ftural\u0131m ve GraphQL istemcimizi tan\u0131mlayal\u0131m:<\/p>\n\/\/ lib\/hashnode.ts\nimport { GraphQLClient, gql } from 'graphql-request';\n\nconst API_URL = process.env.NEXT_PUBLIC_HASHNODE_API_URL || 'https:\/\/gql.hashnode.com\/';\nconst HASHNODE_PAT = process.env.HASHNODE_PAT;\n\nexport const graphQLClient = new GraphQLClient(API_URL, {\n headers: {\n Authorization: HASHNODE_PAT ? Bearer ${HASHNODE_PAT}<\/code> : '',\n },\n});\n\nexport const GET_USER_ARTICLES = gql\n query GetUserArticles($username: String!, $page: Int = 0) {\n user(username: $username) {\n publication {\n posts(page: $page) {\n _id\n title\n slug\n publishedAt\n brief\n coverImage {\n url\n }\n }\n }\n }\n }\n<\/code>;\n\nexport const GET_SINGLE_ARTICLE = gql\n query GetSingleArticle($slug: String!, $hostname: String) {\n publication(host: $hostname) {\n post(slug: $slug) {\n _id\n title\n slug\n content {\n markdown\n }\n publishedAt\n coverImage {\n url\n }\n author {\n name\n profilePicture\n }\n }\n }\n }\n<\/code>;<\/code><\/pre>\nGET_SINGLE_ARTICLE<\/code> sorgusunda hostname<\/code> de\u011fi\u015fkeni, e\u011fer Hashnode blogunuz \u00f6zel bir alan ad\u0131nda ise gereklidir. Aksi takdirde, host<\/code> yerine username<\/code> ile de sorgu yapabilirsiniz, ancak publication(host: $hostname)<\/code> daha esnektir.<\/em><\/p>\nAna Sayfa (T\u00fcm G\u00f6nderileri Listeleme)<\/h4>\n
pages\/index.tsx<\/code> dosyas\u0131n\u0131 d\u00fczenleyelim:<\/p>\n\/\/ pages\/index.tsx\nimport { GetStaticProps } from 'next';\nimport Link from 'next\/link';\nimport { graphQLClient, GET_USER_ARTICLES } from '..\/lib\/hashnode';\n\ninterface Post {\n _id: string;\n title: string;\n slug: string;\n publishedAt: string;\n brief: string;\n coverImage?: {\n url: string;\n };\n}\n\ninterface HomeProps {\n posts: Post[];\n}\n\nexport const getStaticProps: GetStaticProps\n )}\n
\n \/post\/${post.slug}<\/code>} className=\"text-blue-600 hover:underline\">\n {post.title}\n <\/Link>\n <\/h2>\n
Dinamik G\u00f6nderi Sayfalar\u0131 (
[slug].tsx<\/code>)<\/h4>\npages\/post\/[slug].tsx<\/code> ad\u0131nda bir dosya olu\u015fturun:<\/p>\n\/\/ pages\/post\/[slug].tsx\nimport { GetStaticPaths, GetStaticProps } from 'next';\nimport { graphQLClient, GET_USER_ARTICLES, GET_SINGLE_ARTICLE } from '..\/..\/lib\/hashnode';\nimport ReactMarkdown from 'react-markdown';\n\ninterface PostContent {\n _id: string;\n title: string;\n content: {\n markdown: string;\n };\n publishedAt: string;\n coverImage?: {\n url: string;\n };\n author: {\n name: string;\n profilePicture: string;\n };\n}\n\ninterface PostProps {\n post: PostContent;\n}\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n const username = process.env.HASHNODE_USERNAME;\n if (!username) {\n throw new Error('HASHNODE_USERNAME is not defined in .env.local');\n }\n\n const data = await graphQLClient.request(GET_USER_ARTICLES, {\n username,\n page: 0,\n });\n const posts = data.user.publication.posts;\n\n const paths = posts.map((post: any) => ({\n params: { slug: post.slug },\n }));\n\n return { paths, fallback: 'blocking' }; \/\/ blocking: yeni g\u00f6nderiler i\u00e7in sayfa olu\u015fturur\n};\n\nexport const getStaticProps: GetStaticProps\n )}\n
prose<\/code> s\u0131n\u0131flar\u0131, tailwindcss\/typography<\/code> eklentisinden gelmektedir. Markdown i\u00e7eri\u011fini daha iyi bi\u00e7imlendirmek i\u00e7in bu eklentiyi kurman\u0131z ve tailwind.config.js<\/code> dosyan\u0131za eklemeniz \u00f6nerilir.<\/p>\nnpm run dev\nveya yarn dev<\/code><\/pre>\n<\/h2>\n
http:\/\/localhost:3000<\/code> adresine giderek blogunuzu g\u00f6r\u00fcnt\u00fcleyebilirsiniz.<\/p>\nDigitalOcean’da Da\u011f\u0131t\u0131m<\/h3>\n
Se\u00e7enek 1: DigitalOcean App Platform (\u00d6nerilen)<\/h4>\n
\n2. DigitalOcean App Platform’a Giri\u015f Yap\u0131n:<\/strong> DigitalOcean kontrol panelinize gidin ve sol men\u00fcden Apps<\/code> se\u00e7ene\u011fine t\u0131klay\u0131n.
\n3. Uygulama Olu\u015fturun:<\/strong> Create App<\/code> d\u00fc\u011fmesine t\u0131klay\u0131n.
\n4. Kaynak Se\u00e7imi:<\/strong> Git sa\u011flay\u0131c\u0131n\u0131z\u0131 se\u00e7in ve projenizin bulundu\u011fu depoyu ba\u011flay\u0131n. Next.js projenizin ana dal\u0131n\u0131 (\u00f6rn. main<\/code> veya master<\/code>) se\u00e7in.
\n5. Kaynaklar\u0131 Yap\u0131land\u0131r\u0131n:<\/strong> DigitalOcean, projenizin bir Next.js uygulamas\u0131 oldu\u011funu otomatik olarak alg\u0131lamal\u0131d\u0131r.
\n * Type:<\/strong> Web Service
\n * Build Command:<\/strong> npm run build<\/code> (veya yarn build<\/code>)
\n * Run Command:<\/strong> npm start<\/code> (veya yarn start<\/code>)
\n * Environment Variables:<\/strong> .env.local<\/code> dosyan\u0131zdaki de\u011fi\u015fkenleri buraya ekleyin. HASHNODE_PAT<\/code> ve HASHNODE_USERNAME<\/code> (veya NEXT_PUBLIC_HASHNODE_HOSTNAME<\/code> e\u011fer \u00f6zel alan ad\u0131 kullan\u0131yorsan\u0131z) de\u011fi\u015fkenlerini eklemeyi unutmay\u0131n. PAT’nizi Encrypted<\/code> olarak i\u015faretleyin.<\/strong>
\n6. Plan Se\u00e7imi:<\/strong> Uygulaman\u0131z i\u00e7in uygun bir plan se\u00e7in (Ba\u015flang\u0131\u00e7 seviyesi i\u00e7in “Basic” planlar yeterli olabilir).
\n7. Uygulamay\u0131 Da\u011f\u0131t\u0131n:<\/strong> Launch App<\/code> d\u00fc\u011fmesine t\u0131klay\u0131n. DigitalOcean kodunuzu \u00e7ekip, derleyecek ve da\u011f\u0131tacakt\u0131r. Bu i\u015flem birka\u00e7 dakika s\u00fcrebilir.
\n8. Alan Ad\u0131 Yap\u0131land\u0131rmas\u0131 (\u0130ste\u011fe Ba\u011fl\u0131):<\/strong> Uygulaman\u0131z da\u011f\u0131t\u0131ld\u0131ktan sonra, DigitalOcean size ge\u00e7ici bir URL sa\u011flayacakt\u0131r. Kendi alan ad\u0131n\u0131z\u0131 ba\u011flamak isterseniz, Settings<\/code> sekmesinden Domains<\/code> b\u00f6l\u00fcm\u00fcne gidin ve alan ad\u0131n\u0131z\u0131 ekleyin. DigitalOcean size y\u00f6nlendirme i\u00e7in gerekli DNS kay\u0131tlar\u0131n\u0131 (CNAME veya A kayd\u0131) sa\u011flayacakt\u0131r. Bu kay\u0131tlar\u0131 alan ad\u0131 sa\u011flay\u0131c\u0131n\u0131z\u0131n DNS y\u00f6netimi panelinde yap\u0131land\u0131rman\u0131z gerekir.<\/p>\nSe\u00e7enek 2: DigitalOcean Droplet \u00dczerinde Da\u011f\u0131t\u0131m (Daha Fazla Kontrol)<\/h4>\n
\n * DigitalOcean kontrol panelinizden Create -> Droplets<\/code> se\u00e7ene\u011fine t\u0131klay\u0131n.
\n * Bir Ubuntu s\u00fcr\u00fcm\u00fc se\u00e7in (\u00f6rn. Ubuntu 22.04 LTS).
\n * Uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na uygun bir plan se\u00e7in (en az 1GB RAM \u00f6nerilir).
\n * Bir veri merkezi konumu se\u00e7in.
\n * SSH anahtar\u0131n\u0131z\u0131 ekleyin veya yeni bir anahtar olu\u015fturun.
\n * Bir Droplet ad\u0131 verin ve Create Droplet<\/code> d\u00fc\u011fmesine t\u0131klay\u0131n.
\n2. SSH ile Droplet’e Ba\u011flan\u0131n:<\/strong>
\n * Droplet’iniz olu\u015fturulduktan sonra IP adresini kopyalay\u0131n.
\n * Terminalinizden SSH ile ba\u011flan\u0131n: ssh root@your_droplet_ip<\/code>
\n3. Node.js ve npm Kurulumu:<\/strong>
\n * Droplet’e ba\u011fland\u0131ktan sonra Node.js ve npm’i kurun (e\u011fer kurulu de\u011filse):<\/p>\ncurl -fsSL https:\/\/deb.nodesource.com\/setup_lts.x | sudo -E bash -\n sudo apt-get install -y nodejs<\/code><\/pre>\n
\n * sudo apt-get install -y git<\/code>
\n5. Uygulaman\u0131z\u0131 Klonlay\u0131n:<\/strong>
\n * Git deponuzu Droplet’inize klonlay\u0131n: git clone your_repo_url \/var\/www\/my-headless-hashnode-blog<\/code>
\n * Dizinine gidin: cd \/var\/www\/my-headless-hashnode-blog<\/code>
\n6. Ortam De\u011fi\u015fkenlerini Ayarlay\u0131n:<\/strong>
\n * .env.local<\/code> dosyas\u0131n\u0131 sunucuda manuel olarak olu\u015fturun ve gerekli de\u011fi\u015fkenleri ekleyin. \u00d6rne\u011fin:<\/p>\nnano .env.local\n # \u0130\u00e7ine:\n # NEXT_PUBLIC_HASHNODE_API_URL=https:\/\/gql.hashnode.com\/\n # HASHNODE_PAT=your_hashnode_personal_access_token\n # HASHNODE_USERNAME=your_hashnode_username\n # Kaydet ve \u00e7\u0131k (Ctrl+X, Y, Enter)<\/code><\/pre>\n
\n * npm install<\/code> (veya yarn install<\/code>)
\n * npm run build<\/code> (veya yarn build<\/code>)
\n8. Uygulamay\u0131 \u00c7al\u0131\u015ft\u0131r\u0131n (PM2 ile):<\/strong>
\n * Uygulaman\u0131z\u0131 s\u00fcrekli \u00e7al\u0131\u015ft\u0131rmak ve s\u00fcre\u00e7 y\u00f6netimi i\u00e7in PM2’yi kullan\u0131n:<\/p>\nsudo npm install -g pm2\n pm2 start npm --name \"my-hashnode-blog\" -- start\n pm2 save\n pm2 startup<\/code><\/pre>\n
\n * Nginx’i kurun: sudo apt-get install -y nginx<\/code>
\n * Nginx yap\u0131land\u0131rma dosyas\u0131 olu\u015fturun (\/etc\/nginx\/sites-available\/my-hashnode-blog<\/code>):<\/p>\nserver {\n listen 80;\n server_name your_domain.com www.your_domain.com; # Kendi alan ad\u0131n\u0131z\u0131 girin\n\n location \/ {\n proxy_pass http:\/\/localhost:3000; # Next.js uygulaman\u0131z\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131 port\n proxy_http_version 1.1;\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection 'upgrade';\n proxy_set_header Host $host;\n proxy_cache_bypass $http_upgrade;\n }\n }<\/code><\/pre>\nsudo ln -s \/etc\/nginx\/sites-available\/my-hashnode-blog \/etc\/nginx\/sites-enabled\/\n sudo nginx -t\n sudo systemctl restart nginx<\/code><\/pre>\nsudo snap install core\n sudo snap refresh core\n sudo snap install --classic certbot\n sudo ln -s \/snap\/bin\/certbot \/usr\/bin\/certbot\n sudo certbot --nginx -d your_domain.com -d www.your_domain.com<\/code><\/pre>\n
\n10. G\u00fcvenlik Duvar\u0131 (UFW) Yap\u0131land\u0131rmas\u0131:<\/strong>
\n * Gerekli portlar\u0131 a\u00e7\u0131n:<\/p>\nsudo ufw allow OpenSSH\n sudo ufw allow 'Nginx Full'\n sudo ufw enable<\/code><\/pre>\nS\u00fcrekli Entegrasyon ve Da\u011f\u0131t\u0131m (CI\/CD)<\/h3>\n
git pull<\/code>, npm install<\/code>, npm run build<\/code> ve pm2 restart<\/code> komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rmay\u0131 i\u00e7erir.<\/p>\nSEO ve Performans \u0130pu\u00e7lar\u0131<\/h3>\n
getStaticProps<\/code> ve getStaticPaths<\/code> gibi fonksiyonlar\u0131, blogunuzun sayfalar\u0131n\u0131 derleme zaman\u0131nda (build time) statik HTML dosyalar\u0131 olarak olu\u015fturman\u0131za olanak tan\u0131r. Bu, sayfalar\u0131n \u00e7ok h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar ve SEO i\u00e7in idealdir. \u0130\u00e7erik g\u00fcncellendi\u011finde (\u00f6rn. Hashnode’da yeni bir yaz\u0131 yay\u0131nland\u0131\u011f\u0131nda), Next.js’in revalidate<\/code> se\u00e7ene\u011fi (Incremental Static Regeneration – ISR) veya bir webhook ile yeniden derleme tetikleyebilirsiniz.
\n* Metadata ve SEO:<\/strong> Her sayfa i\u00e7in uygun title<\/code> etiketleri, meta description<\/code> ve Open Graph etiketleri ekleyin. Next.js’in next\/head<\/code> bile\u015fenini kullanarak bunu kolayca yapabilirsiniz.
\n* Anlamsal HTML:<\/strong> Ba\u015fl\u0131k etiketlerini (h1, h2, h3), paragraflar\u0131 (p) ve di\u011fer HTML etiketlerini do\u011fru ve anlamsal bir \u015fekilde kullan\u0131n.
\n* Resim Optimizasyonu:<\/strong> next\/image<\/code> bile\u015fenini kullanarak resimleri otomatik olarak optimize edin, lazy load (tembel y\u00fckleme) uygulay\u0131n ve uygun boyutlarda sunun.
\n* H\u0131z Optimizasyonu:<\/strong> CSS ve JavaScript dosyalar\u0131n\u0131 k\u00fc\u00e7\u00fclt\u00fcn (minify), gereksiz kodlar\u0131 kald\u0131r\u0131n ve taray\u0131c\u0131 \u00f6nbellekleme mekanizmalar\u0131n\u0131 kullan\u0131n.
\n* Sitemap ve Robots.txt:<\/strong> Arama motorlar\u0131n\u0131n blogunuzu daha iyi taramas\u0131 i\u00e7in bir sitemap.xml dosyas\u0131 olu\u015fturun ve robots.txt dosyan\u0131z\u0131 do\u011fru yap\u0131land\u0131r\u0131n.<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\nKesinlikle! Headless mimarinin g\u00fczelli\u011fi budur. React, Vue, Angular, Svelte veya Gatsby gibi herhangi bir frontend \u00e7at\u0131s\u0131n\u0131 kullanabilirsiniz. Veri \u00e7ekme mant\u0131\u011f\u0131 benzer olacakt\u0131r.<\/p>\n
\nHashnode API’si \u015fu anda yorumlara do\u011frudan eri\u015fim sa\u011flamaz. Ancak, Discus, Commento veya Hyvor Talk gibi \u00fc\u00e7\u00fcnc\u00fc taraf bir yorum sistemini frontend uygulaman\u0131za entegre edebilirsiniz.<\/p>\n
\nHashnode, API kararl\u0131l\u0131\u011f\u0131n\u0131 korumaya \u00e7al\u0131\u015f\u0131r. Ancak b\u00fcy\u00fck bir s\u00fcr\u00fcm de\u011fi\u015fikli\u011fi (\u00f6rn. v1’den v2’ye ge\u00e7i\u015f) olursa, sorgular\u0131n\u0131z\u0131 ve veri i\u015fleme mant\u0131\u011f\u0131n\u0131z\u0131 g\u00fcncellemeniz gerekebilir. Bu t\u00fcr de\u011fi\u015fiklikler genellikle \u00f6nceden duyurulur.<\/p>\n
\nDigitalOcean App Platform veya Droplet’in maliyetleri se\u00e7ti\u011finiz plana ve kullan\u0131m\u0131n\u0131za g\u00f6re de\u011fi\u015fir. K\u00fc\u00e7\u00fck bir blog i\u00e7in ayl\u0131k birka\u00e7 dolardan ba\u015flayan fiyatlarla hizmet alabilirsiniz. Hashnode’un kendisi \u00fccretsizdir.<\/p>\n
\n\u0130\u00e7eri\u011fi Hashnode’un kendi platformunda yazmaya ve d\u00fczenlemeye devam edersiniz. E\u011fer frontend’iniz SSG kullan\u0131yorsa, i\u00e7eri\u011fi g\u00fcncelledi\u011finizde otomatik olarak yeniden derlenmesi i\u00e7in bir webhook kurman\u0131z veya DigitalOcean App Platform’un otomatik da\u011f\u0131t\u0131m \u00f6zelli\u011fini kullanman\u0131z gerekir.<\/p>\nSonu\u00e7<\/h3>\n
\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Headless Hashnode ile DigitalOcean \u00dczerinde Blogunuzu Kurmaya Ba\u015flang\u0131\u00e7\nGiri\u015f: Modern Bloglama Deneyimine Ho\u015f Geldiniz\nG\u00fcn\u00fcm\u00fcz\u00fcn dijital","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":[136],"tags":[],"class_list":{"0":"post-38964","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-node-js","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n