DigitalOcean App Platform Statik Site<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n background-color: #f4f7f6;\n color: #333;\n }\n .container {\n text-align: center;\n padding: 40px;\n background-color: #ffffff;\n border-radius: 10px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n h1 {\n color: #007bff;\n margin-bottom: 20px;\n }\n p {\n font-size: 1.1em;\n line-height: 1.6;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n Bu, GitHub'dan ba\u015far\u0131yla da\u011f\u0131t\u0131lan ilk statik sitemizdir.<\/p>\n Otomatik da\u011f\u0131t\u0131m\u0131n keyfini \u00e7\u0131kar\u0131n!<\/p>\n <\/div>\n<\/body>\n<\/html><\/code><\/pre>\nBu dosyay\u0131 projenizin k\u00f6k dizinine kaydedin.<\/p>\n<h4>Statik Site Olu\u015fturucular\u0131 (SSG’ler) \u0130\u00e7in Haz\u0131rl\u0131k<\/h4>\nE\u011fer Jekyll, Hugo, Next.js (SSG modu), Gatsby, Astro veya benzeri bir SSG kullan\u0131yorsan\u0131z, sitenizi geli\u015ftirme ortam\u0131n\u0131zda olu\u015fturman\u0131z (build etmeniz) gerekir. Bu i\u015flem genellikle bir <code>build<\/code> komutu ile yap\u0131l\u0131r ve statik dosyalar\u0131 belirli bir \u00e7\u0131kt\u0131 dizinine (\u00f6rne\u011fin <code>public<\/code>, <code>_site<\/code>, <code>dist<\/code>) yerle\u015ftirir. DigitalOcean App Platform bu komutu otomatik olarak \u00e7al\u0131\u015ft\u0131racak ve belirtilen \u00e7\u0131kt\u0131 dizinindeki dosyalar\u0131 da\u011f\u0131tacakt\u0131r.<\/p>\n\u00d6rnek <code>build<\/code> komutlar\u0131:<\/p>\n* Jekyll<\/strong>: <code>jekyll build<\/code> (\u00e7\u0131kt\u0131 dizini: <code>_site<\/code>) \n* Hugo<\/strong>: <code>hugo<\/code> (\u00e7\u0131kt\u0131 dizini: <code>public<\/code>) \n* Next.js (SSG)<\/strong>: <code>npm run build<\/code> (\u00e7\u0131kt\u0131 dizini: <code>out<\/code> veya <code>.next\/static<\/code> – App Platform genellikle <code>out<\/code> veya <code>public<\/code> gibi genel SSG \u00e7\u0131kt\u0131 dizinlerini otomatik olarak alg\u0131lar, ancak belirtmek faydal\u0131d\u0131r.) \n* Gatsby<\/strong>: <code>gatsby build<\/code> (\u00e7\u0131kt\u0131 dizini: <code>public<\/code>) \n* Astro<\/strong>: <code>npm run build<\/code> (\u00e7\u0131kt\u0131 dizini: <code>dist<\/code>) \n* Vite\/React\/Vue<\/strong>: <code>npm run build<\/code> (\u00e7\u0131kt\u0131 dizini: <code>dist<\/code>)<\/p>\n<h4>GitHub’a Y\u00fckleme<\/h4>\nSitenizin dosyalar\u0131 haz\u0131r oldu\u011funda, bunlar\u0131 bir GitHub deposuna y\u00fcklemeniz gerekir.<\/p>\n1. Yeni Bir GitHub Deposu Olu\u015fturun<\/strong>: GitHub hesab\u0131n\u0131za giri\u015f yap\u0131n ve yeni bir depo olu\u015fturun. Deponuza anlaml\u0131 bir isim verin (\u00f6rne\u011fin <code>my-static-site<\/code>). <code>README.md<\/code> eklemeyi veya <code>.gitignore<\/code> olu\u015fturmay\u0131 \u015fimdilik atlayabilirsiniz. \n2. Yerel Depoyu Ba\u015flat\u0131n<\/strong>: Proje dizininizde terminali a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code class=\"language-bash\">git init\n git add .\n git commit -m \"Initial static site commit\"\n git branch -M main\n git remote add origin https:\/\/github.com\/KULLANICI_ADINIZ\/DEPO_ADINIZ.git\n git push -u origin main<\/code><\/pre>\n <code>KULLANICI_ADINIZ<\/code> ve <code>DEPO_ADINIZ<\/code> k\u0131s\u0131mlar\u0131n\u0131 kendi GitHub kullan\u0131c\u0131 ad\u0131n\u0131z ve depo ad\u0131n\u0131zla de\u011fi\u015ftirin. Bu ad\u0131mlar, yerel projenizi <code>main<\/code> dal\u0131na (branch) ilk kez y\u00fckleyecektir.<\/p>\nArt\u0131k statik sitenizin kodu GitHub’da. DigitalOcean App Platform’a ge\u00e7meye haz\u0131r\u0131z.<\/p>\n<h3>2. DigitalOcean App Platform’a Giri\u015f<\/h3>\nDigitalOcean App Platform, uygulaman\u0131z\u0131 y\u00f6netilen bir ortamda bar\u0131nd\u0131rmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Sunucu yap\u0131land\u0131rmas\u0131, \u00f6l\u00e7eklendirme, g\u00fcvenlik yamalar\u0131 ve i\u015fletim sistemi g\u00fcncellemeleri gibi karma\u015f\u0131k altyap\u0131 y\u00f6netiminden sizi kurtar\u0131r. Sadece kodunuzu verin, gerisini App Platform halleder.<\/p>\nStatik siteler i\u00e7in App Platform’un sundu\u011fu baz\u0131 temel avantajlar:<\/p>\n* GitHub Entegrasyonu<\/strong>: Kodunuzu GitHub’a itti\u011finizde otomatik olarak yeni da\u011f\u0131t\u0131mlar tetikler. \n* Otomatik Derleme ve Da\u011f\u0131t\u0131m<\/strong>: Statik site olu\u015fturucular\u0131 i\u00e7in gerekli derleme ad\u0131mlar\u0131n\u0131 otomatik olarak y\u00fcr\u00fct\u00fcr. \n* \u00dccretsiz SSL Sertifikalar\u0131<\/strong>: Let’s Encrypt arac\u0131l\u0131\u011f\u0131yla t\u00fcm uygulamalar i\u00e7in otomatik HTTPS sa\u011flar. \n* K\u00fcresel CDN<\/strong>: \u0130\u00e7eri\u011finizi son kullan\u0131c\u0131lara daha h\u0131zl\u0131 ula\u015ft\u0131rmak i\u00e7in yerle\u015fik bir CDN kullan\u0131r. \n* \u00d6zel Alan Ad\u0131 Deste\u011fi<\/strong>: Kendi alan ad\u0131n\u0131z\u0131 kolayca ba\u011flayabilirsiniz. \n* Uygun Fiyatland\u0131rma<\/strong>: Statik siteler i\u00e7in genellikle “Starter” plan\u0131 yeterlidir ve \u00fccretsizdir.<\/p>\n<h3>3. DigitalOcean Hesab\u0131 Olu\u015fturma ve Proje Ba\u015flatma<\/h3>\nE\u011fer bir DigitalOcean hesab\u0131n\u0131z yoksa, \u00f6ncelikle bir tane olu\u015fturman\u0131z gerekecektir.<\/p>\n1. DigitalOcean’a Kaydolun<\/strong>: DigitalOcean web sitesine gidin ve bir hesap olu\u015fturun. Genellikle yeni kullan\u0131c\u0131lar i\u00e7in \u00fccretsiz kredi sunulur, bu da ba\u015flang\u0131\u00e7 i\u00e7in harika bir f\u0131rsatt\u0131r. \n2. Yeni Bir Uygulama Olu\u015fturun<\/strong>: DigitalOcean kontrol paneline giri\u015f yapt\u0131ktan sonra, sol men\u00fcde “Apps” b\u00f6l\u00fcm\u00fcne t\u0131klay\u0131n veya sa\u011f \u00fcst k\u00f6\u015fedeki “Create” d\u00fc\u011fmesine t\u0131klayarak “Apps” se\u00e7ene\u011fini se\u00e7in. \n3. Kaynak Kodunu Ba\u011flay\u0131n<\/strong>: \n * “Create App” d\u00fc\u011fmesine t\u0131klad\u0131ktan sonra, DigitalOcean sizden kaynak kodunuzu ba\u011flaman\u0131z\u0131 isteyecektir. “GitHub” se\u00e7ene\u011fini se\u00e7in. \n * E\u011fer ilk kez yap\u0131yorsan\u0131z, DigitalOcean’\u0131n GitHub hesab\u0131n\u0131za eri\u015fmesine izin vermeniz gerekecektir. “Install DigitalOcean GitHub App” veya “Authorize DigitalOcean” gibi bir d\u00fc\u011fme g\u00f6receksiniz. Bu ad\u0131m\u0131 tamamlay\u0131n. Bu, DigitalOcean’\u0131n depolar\u0131n\u0131z\u0131 okumas\u0131na ve web kancalar\u0131 (webhooks) olu\u015fturmas\u0131na izin verecektir. \n * Eri\u015fim izni verdikten sonra, DigitalOcean size GitHub depolar\u0131n\u0131z\u0131n bir listesini g\u00f6sterecektir. Daha \u00f6nce olu\u015fturdu\u011funuz statik site deponuzu (\u00f6rne\u011fin <code>my-static-site<\/code>) se\u00e7in. \n * “Branch” (dal) olarak <code>main<\/code> veya hangi dalda da\u011f\u0131t\u0131m yapmak istiyorsan\u0131z onu se\u00e7in. \n * “Autodeploy” (otomatik da\u011f\u0131t\u0131m) se\u00e7ene\u011finin i\u015faretli oldu\u011fundan emin olun. Bu, GitHub’a her itme yapt\u0131\u011f\u0131n\u0131zda uygulaman\u0131z\u0131n otomatik olarak yeniden da\u011f\u0131t\u0131lmas\u0131n\u0131 sa\u011flayacakt\u0131r. \n * “Next” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\n<h3>4. Uygulaman\u0131z\u0131 Yap\u0131land\u0131rma<\/h3>\nBu ad\u0131m, uygulaman\u0131z\u0131n DigitalOcean App Platform \u00fczerinde nas\u0131l derlenece\u011fini ve da\u011f\u0131t\u0131laca\u011f\u0131n\u0131 belirledi\u011finiz yerdir.<\/p>\n1. Kaynak Alg\u0131lama<\/strong>: DigitalOcean, deponuzu tarayacak ve genellikle otomatik olarak bir “Static Site” bile\u015feni alg\u0131layacakt\u0131r. E\u011fer alg\u0131lamazsa, manuel olarak ekleyebilirsiniz. \n2. Bile\u015fen Ayarlar\u0131<\/strong>: Alg\u0131lanan veya eklenen statik site bile\u015fenine t\u0131klay\u0131n. Burada a\u015fa\u011f\u0131daki ayarlar\u0131 yap\u0131land\u0131rman\u0131z gerekecektir:<\/p>\n * Resource Type (Kaynak T\u00fcr\u00fc)<\/strong>: <code>Static Site<\/code> olarak ayarland\u0131\u011f\u0131ndan emin olun. \n * Source Directory (Kaynak Dizini)<\/strong>: E\u011fer projeniz deponun k\u00f6k dizininde de\u011fil de bir alt dizinde (\u00f6rne\u011fin bir monorepo i\u00e7inde) bulunuyorsa, bu dizini belirtmeniz gerekir. \u00c7o\u011fu statik site projesi i\u00e7in bu alan bo\u015f b\u0131rak\u0131labilir veya <code>\/<\/code> olarak ayarlanabilir. \n * Build Command (Derleme Komutu)<\/strong>: Bu, statik site olu\u015fturucunuzu (SSG) \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131lan komuttur. \n * Basit HTML\/CSS\/JS siteleri i\u00e7in<\/strong>: Bu alan\u0131 bo\u015f b\u0131rak\u0131n. Herhangi bir derleme ad\u0131m\u0131na ihtiya\u00e7 yoktur. \n * Jekyll<\/strong>: <code>jekyll build<\/code> \n * Hugo<\/strong>: <code>hugo<\/code> \n * Next.js (SSG), Astro, Gatsby, React, Vue, Svelte<\/strong>: <code>npm run build<\/code> veya <code>yarn build<\/code> (projenizin <code>package.json<\/code> dosyas\u0131ndaki <code>scripts<\/code> b\u00f6l\u00fcm\u00fcne g\u00f6re). \n * DigitalOcean genellikle pop\u00fcler SSG’ler i\u00e7in bu komutu otomatik olarak alg\u0131lar. \n * Output Directory (\u00c7\u0131kt\u0131 Dizini)<\/strong>: Derleme komutunuzun statik dosyalar\u0131 olu\u015fturdu\u011fu dizindir. App Platform, bu dizindeki i\u00e7eri\u011fi web sunucusunda sunacakt\u0131r. \n * Basit HTML\/CSS\/JS siteleri i\u00e7in<\/strong>: <code>\/<\/code> (k\u00f6k dizin) \n * Jekyll<\/strong>: <code>_site<\/code> \n * Hugo<\/strong>: <code>public<\/code> \n * Next.js (SSG)<\/strong>: <code>out<\/code> veya <code>public<\/code> (yap\u0131land\u0131rman\u0131za ba\u011fl\u0131 olarak) \n * Gatsby<\/strong>: <code>public<\/code> \n * Astro, React, Vue, Svelte (Vite ile)<\/strong>: <code>dist<\/code> \n * Bu da genellikle otomatik olarak alg\u0131lan\u0131r, ancak do\u011fru oldu\u011fundan emin olun. \n * HTTP Port (HTTP Portu)<\/strong>: Statik siteler i\u00e7in genellikle 80 veya 443 (HTTPS) kullan\u0131l\u0131r ve bu App Platform taraf\u0131ndan otomatik olarak y\u00f6netilir. Bu ayar genellikle de\u011fi\u015ftirilmez. \n * Environment Variables (Ortam De\u011fi\u015fkenleri)<\/strong>: E\u011fer uygulaman\u0131zda API anahtarlar\u0131 veya di\u011fer hassas veriler gibi ortam de\u011fi\u015fkenleri kullan\u0131yorsan\u0131z, bunlar\u0131 burada ekleyebilirsiniz. Statik siteler i\u00e7in genellikle daha az kullan\u0131l\u0131r, ancak frontend kodunuzda \u00e7al\u0131\u015fma zaman\u0131nda ihtiya\u00e7 duyulan baz\u0131 yap\u0131land\u0131rmalar i\u00e7in faydal\u0131 olabilir.<\/p>\n3. Di\u011fer Ayarlar<\/strong>: \n * Region (B\u00f6lge)<\/strong>: Uygulaman\u0131z\u0131n da\u011f\u0131t\u0131laca\u011f\u0131 veri merkezi konumunu se\u00e7in. Hedef kitlenize en yak\u0131n b\u00f6lgeyi se\u00e7mek, sitenizin daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar. \n * Plan<\/strong>: Statik siteler i\u00e7in genellikle Starter<\/strong> plan\u0131 yeterlidir ve bu plan, belirli bir kullan\u0131m limitine kadar \u00fccretsizdir. Daha fazla kaynak veya \u00f6zellik gerekiyorsa, Basic veya Professional planlar\u0131 d\u00fc\u015f\u00fcnebilirsiniz. \u00dccretsiz katman, ayda 100 GB bant geni\u015fli\u011fi ve 10.000 derleme dakikas\u0131 gibi c\u00f6mert limitler sunar.<\/p>\nT\u00fcm ayarlar\u0131 g\u00f6zden ge\u00e7irdikten sonra “Next” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\n<h3>5. Da\u011f\u0131t\u0131m S\u00fcreci<\/h3>\nYap\u0131land\u0131rma ad\u0131mlar\u0131n\u0131 tamamlad\u0131ktan sonra, DigitalOcean size uygulaman\u0131z\u0131n bir \u00f6zetini sunacakt\u0131r.<\/p>\n1. \u00d6zeti G\u00f6zden Ge\u00e7irin<\/strong>: Yap\u0131land\u0131rma ayarlar\u0131n\u0131z\u0131n do\u011fru oldu\u011fundan emin olun. \n2. Uygulamay\u0131 Ba\u015flat\u0131n<\/strong>: “Create Resources” veya “Launch App” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\nDigitalOcean App Platform \u015fimdi uygulaman\u0131z\u0131 da\u011f\u0131tmaya ba\u015flayacakt\u0131r. Bu s\u00fcre\u00e7 birka\u00e7 dakika s\u00fcrebilir ve a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 i\u00e7erecektir:<\/p>\n* Kod \u00c7ekme<\/strong>: GitHub deponuzdan kaynak kodunu \u00e7eker. \n* Derleme<\/strong>: E\u011fer bir derleme komutu belirttiyseniz (\u00f6rne\u011fin <code>npm run build<\/code>), bu komutu \u00e7al\u0131\u015ft\u0131r\u0131r. \n* Da\u011f\u0131t\u0131m<\/strong>: \u00c7\u0131kt\u0131 dizinindeki statik dosyalar\u0131 CDN’ye da\u011f\u0131t\u0131r ve uygulaman\u0131z\u0131 canl\u0131ya al\u0131r.<\/p>\nDa\u011f\u0131t\u0131m s\u00fcrecini DigitalOcean kontrol panelindeki uygulaman\u0131z\u0131n “Deployments” (Da\u011f\u0131t\u0131mlar) sekmesinden takip edebilirsiniz. Loglar\u0131 g\u00f6r\u00fcnt\u00fcleyerek herhangi bir sorun olup olmad\u0131\u011f\u0131n\u0131 kontrol edebilirsiniz.<\/p>\nBa\u015far\u0131l\u0131 bir da\u011f\u0131t\u0131m\u0131n ard\u0131ndan, uygulaman\u0131z\u0131n genel bir URL’si (\u00f6rne\u011fin <code>https:\/\/your-app-name.ondigitalocean.app<\/code>) ile birlikte “Live” (Canl\u0131) durumunu g\u00f6receksiniz. Bu URL’ye t\u0131klayarak statik sitenizi taray\u0131c\u0131n\u0131zda g\u00f6r\u00fcnt\u00fcleyebilirsiniz. Tebrikler, ilk statik sitenizi DigitalOcean App Platform’a da\u011f\u0131tt\u0131n\u0131z!<\/p>\n<h3>6. Otomatik Da\u011f\u0131t\u0131mlar ve G\u00fcncellemeler<\/h3>\nDigitalOcean App Platform’un en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, GitHub entegrasyonu sayesinde otomatik da\u011f\u0131t\u0131mlard\u0131r.<\/p>\n1. De\u011fi\u015fiklik Yap\u0131n<\/strong>: GitHub’da ba\u011fl\u0131 olan dal\u0131n\u0131za (\u00f6rne\u011fin <code>main<\/code> dal\u0131) k\u00fc\u00e7\u00fck bir de\u011fi\u015fiklik yap\u0131n. \u00d6rne\u011fin, <code>index.html<\/code> dosyas\u0131ndaki bir metni de\u011fi\u015ftirin:<\/p>\n<pre><code class=\"language-html\">Bu, GitHub'dan ba\u015far\u0131yla da\u011f\u0131t\u0131lan ilk statik sitemizdir. \u015eimdi otomatik g\u00fcncellemeleri test ediyoruz!<\/strong><\/p><\/code><\/pre>\n2. De\u011fi\u015fiklikleri Kaydedin ve GitHub’a \u0130tin<\/strong>:<\/p>\n<pre><code class=\"language-bash\">git add .\n git commit -m \"Updated content for autodeploy test\"\n git push origin main<\/code><\/pre>\n3. Otomatik Da\u011f\u0131t\u0131m\u0131 G\u00f6zlemleyin<\/strong>: GitHub’a itme i\u015flemini tamamlad\u0131ktan k\u0131sa bir s\u00fcre sonra DigitalOcean kontrol panelinize geri d\u00f6n\u00fcn. Uygulaman\u0131z\u0131n “Deployments” sekmesinde yeni bir da\u011f\u0131t\u0131m\u0131n otomatik olarak ba\u015flad\u0131\u011f\u0131n\u0131 g\u00f6receksiniz. Bu da\u011f\u0131t\u0131m tamamland\u0131\u011f\u0131nda, sitenizin genel URL’sini yeniledi\u011finizde yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fikliklerin yans\u0131t\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6receksiniz.<\/p>\nBu \u00f6zellik, geli\u015ftirme s\u00fcrecinizi son derece h\u0131zland\u0131r\u0131r ve manuel da\u011f\u0131t\u0131m ad\u0131mlar\u0131na olan ihtiyac\u0131 ortadan kald\u0131r\u0131r.<\/p>\n<h3>7. \u00d6zel Alan Ad\u0131 ve SSL Yap\u0131land\u0131rmas\u0131<\/h3>\nUygulaman\u0131z\u0131n DigitalOcean taraf\u0131ndan sa\u011flanan varsay\u0131lan URL yerine kendi \u00f6zel alan ad\u0131n\u0131zla eri\u015filebilir olmas\u0131n\u0131 isteyebilirsiniz. DigitalOcean App Platform, bu s\u00fcreci de kolayla\u015ft\u0131r\u0131r ve \u00fccretsiz SSL sertifikalar\u0131 sa\u011flar.<\/p>\n1. \u00d6zel Alan Ad\u0131 Ekleme<\/strong>: \n * DigitalOcean kontrol panelinde uygulaman\u0131z\u0131n sayfas\u0131na gidin. \n * Sol men\u00fcden “Settings” (Ayarlar) sekmesine t\u0131klay\u0131n. \n * “Domains” (Alan Adlar\u0131) b\u00f6l\u00fcm\u00fcne gidin ve “Add Domain” (Alan Ad\u0131 Ekle) d\u00fc\u011fmesine t\u0131klay\u0131n. \n * Kullanmak istedi\u011finiz alan ad\u0131n\u0131 girin (\u00f6rne\u011fin <code>example.com<\/code> veya <code>www.example.com<\/code>). \n * “Add Domain” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\n2. DNS Kay\u0131tlar\u0131n\u0131 Yap\u0131land\u0131rma<\/strong>: \n * DigitalOcean size alan ad\u0131n\u0131z\u0131 do\u011frulamak i\u00e7in yapman\u0131z gereken DNS kay\u0131tlar\u0131n\u0131 g\u00f6sterecektir. Genellikle iki t\u00fcr kay\u0131t istenir: \n * CNAME Kayd\u0131<\/strong>: <code>www.example.com<\/code> gibi alt alan adlar\u0131 i\u00e7in kullan\u0131l\u0131r. <code>www<\/code> ana bilgisayar ad\u0131n\u0131, uygulaman\u0131z\u0131n varsay\u0131lan DigitalOcean URL’sine (\u00f6rne\u011fin <code>your-app-name.ondigitalocean.app<\/code>) i\u015faret eden bir CNAME kayd\u0131 olu\u015fturman\u0131z gerekir. \n * A Kayd\u0131<\/strong>: K\u00f6ksel alan adlar\u0131 (\u00f6rne\u011fin <code>example.com<\/code>) i\u00e7in kullan\u0131l\u0131r. <code>@<\/code> ana bilgisayar ad\u0131n\u0131 (veya bazen bo\u015f b\u0131rak\u0131l\u0131r), DigitalOcean taraf\u0131ndan sa\u011flanan bir IP adresine i\u015faret eden bir A kayd\u0131 olu\u015fturman\u0131z gerekir. \n * Bu kay\u0131tlar\u0131 alan ad\u0131n\u0131z\u0131 y\u00f6netti\u011finiz DNS sa\u011flay\u0131c\u0131n\u0131z\u0131n (\u00f6rne\u011fin GoDaddy, Namecheap, Cloudflare veya DigitalOcean DNS) kontrol paneline girmeniz gerekir. \n * Kayd\u0131 ekledikten sonra, DNS de\u011fi\u015fikliklerinin yay\u0131lmas\u0131 biraz zaman alabilir (genellikle birka\u00e7 dakika ile birka\u00e7 saat aras\u0131nda).<\/p>\n3. \u00dccretsiz SSL Sertifikas\u0131<\/strong>: \n * Alan ad\u0131n\u0131z\u0131 ekledikten ve DNS kay\u0131tlar\u0131n\u0131 do\u011fru bir \u015fekilde yap\u0131land\u0131rd\u0131ktan sonra, DigitalOcean App Platform otomatik olarak Let’s Encrypt arac\u0131l\u0131\u011f\u0131yla siteniz i\u00e7in \u00fccretsiz bir SSL sertifikas\u0131 sa\u011flayacakt\u0131r. \n * Bu, sitenizin <code>https:\/\/<\/code> ile g\u00fcvenli bir \u015fekilde eri\u015filebilir olmas\u0131n\u0131 sa\u011flar. Sertifika y\u00f6netimi tamamen App Platform taraf\u0131ndan yap\u0131l\u0131r, yenileme ve kurulum gibi i\u015flemlerle u\u011fra\u015fman\u0131za gerek kalmaz. \n * Sertifika aktif hale geldi\u011finde, “Domains” b\u00f6l\u00fcm\u00fcnde alan ad\u0131n\u0131z\u0131n yan\u0131nda “Verified” ve “HTTPS” durumunu g\u00f6receksiniz.<\/p>\nArt\u0131k statik sitenize kendi \u00f6zel alan ad\u0131n\u0131z \u00fczerinden g\u00fcvenli bir \u015fekilde eri\u015febilirsiniz.<\/p>\n<h3>8. Geli\u015fmi\u015f \u00d6zellikler ve \u0130pu\u00e7lar\u0131<\/h3>\nDigitalOcean App Platform, statik siteler i\u00e7in bile baz\u0131 geli\u015fmi\u015f \u00f6zellikler ve kullan\u0131\u015fl\u0131 ipu\u00e7lar\u0131 sunar.<\/p>\n<h4>Ortam De\u011fi\u015fkenleri<\/h4>\nStatik siteler genellikle sunucu taraf\u0131 mant\u0131k i\u00e7ermese de, bazen istemci taraf\u0131 kodunuzda kullan\u0131lan API anahtarlar\u0131 veya yap\u0131land\u0131rma ayarlar\u0131 gibi ortam de\u011fi\u015fkenlerine ihtiya\u00e7 duyabilirler. Bu de\u011fi\u015fkenleri do\u011frudan kodunuza yazmak yerine (\u00f6zellikle hassas veriler i\u00e7in), App Platform’da ortam de\u011fi\u015fkenleri olarak tan\u0131mlayabilirsiniz.<\/p>\n* Uygulaman\u0131z\u0131n “Settings” (Ayarlar) sekmesine gidin. \n* “Environment Variables” (Ortam De\u011fi\u015fkenleri) b\u00f6l\u00fcm\u00fcnde, “Add Variable” (De\u011fi\u015fken Ekle) d\u00fc\u011fmesine t\u0131klay\u0131n. \n* De\u011fi\u015fken ad\u0131n\u0131 ve de\u011ferini girin. “Scope” (Kapsam) olarak “Static Site” bile\u015fenini se\u00e7ti\u011finizden emin olun. \n* \u00d6nemli<\/strong>: \u0130stemci taraf\u0131nda eri\u015filmesi gereken de\u011fi\u015fkenler i\u00e7in genellikle bir \u00f6nek (\u00f6rne\u011fin <code>NEXT_PUBLIC_<\/code>, <code>VITE_<\/code>, <code>GATSBY_<\/code>) kullan\u0131l\u0131r. Bu, derleme s\u0131ras\u0131nda bu de\u011fi\u015fkenlerin istemci taraf\u0131 koduna enjekte edilmesini sa\u011flar.<\/p>\n<h4>Rollback (Geri Alma)<\/h4>\nYeni bir da\u011f\u0131t\u0131m\u0131n sorunlara yol a\u00e7mas\u0131 durumunda, DigitalOcean App Platform \u00f6nceki ba\u015far\u0131l\u0131 da\u011f\u0131t\u0131mlara geri d\u00f6nmenize olanak tan\u0131r.<\/p>\n* Uygulaman\u0131z\u0131n “Deployments” (Da\u011f\u0131t\u0131mlar) sekmesine gidin. \n* \u00d6nceki ba\u015far\u0131l\u0131 bir da\u011f\u0131t\u0131m\u0131n yan\u0131ndaki “…” men\u00fcs\u00fcne t\u0131klay\u0131n ve “Rollback to this deployment” (Bu da\u011f\u0131t\u0131ma geri al) se\u00e7ene\u011fini se\u00e7in. \n* Bu, sitenizi h\u0131zla \u00e7al\u0131\u015fan bir \u00f6nceki s\u00fcr\u00fcme geri d\u00f6nd\u00fcr\u00fcr.<\/p>\n<h4>\u0130zleme ve G\u00fcnl\u00fckler (Monitoring and Logging)<\/h4>\nApp Platform, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve durumunu izlemek i\u00e7in ara\u00e7lar sa\u011flar.<\/p>\n* “Metrics” (Metrikler) sekmesi, bant geni\u015fli\u011fi kullan\u0131m\u0131, istek say\u0131s\u0131 ve hata oranlar\u0131 gibi \u00f6nemli performans g\u00f6stergelerini g\u00f6sterir. \n* “Logs” (G\u00fcnl\u00fckler) sekmesi, derleme ve da\u011f\u0131t\u0131m s\u00fcre\u00e7leri s\u0131ras\u0131nda olu\u015fan t\u00fcm g\u00fcnl\u00fckleri g\u00f6r\u00fcnt\u00fcler. Hata ay\u0131klama ve sorun giderme i\u00e7in \u00e7ok faydal\u0131d\u0131r.<\/p>\n<h4>CDN ve Performans<\/h4>\nDigitalOcean App Platform, t\u00fcm uygulamalar i\u00e7in varsay\u0131lan olarak bir k\u00fcresel \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131 (CDN) kullan\u0131r. Bu, statik dosyalar\u0131n\u0131z\u0131n d\u00fcnya \u00e7ap\u0131ndaki farkl\u0131 konumlarda \u00f6nbelle\u011fe al\u0131nmas\u0131n\u0131 sa\u011flar. Son kullan\u0131c\u0131lar, i\u00e7eri\u011fi kendilerine en yak\u0131n CDN sunucusundan alarak daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri deneyimlerler. Bu \u00f6zellik, statik sitelerin do\u011fas\u0131nda var olan h\u0131z avantaj\u0131n\u0131 daha da art\u0131r\u0131r.<\/p>\n<h4>Branch Da\u011f\u0131t\u0131mlar\u0131 (Staging Ortamlar\u0131)<\/h4>\nGeli\u015ftiriciler genellikle yeni \u00f6zellikleri ana siteye da\u011f\u0131tmadan \u00f6nce test etmek i\u00e7in haz\u0131rl\u0131k (staging) ortamlar\u0131na ihtiya\u00e7 duyarlar. DigitalOcean App Platform, farkl\u0131 dallardan (branch) farkl\u0131 uygulamalar da\u011f\u0131tarak veya ayn\u0131 uygulama i\u00e7inde farkl\u0131 dallar\u0131 farkl\u0131 bile\u015fenlere ba\u011flayarak bu senaryoyu destekleyebilir. \u00d6rne\u011fin, <code>main<\/code> dal\u0131n\u0131 canl\u0131 siteye, <code>develop<\/code> dal\u0131n\u0131 ise bir test sitesine da\u011f\u0131tabilirsiniz.<\/p>\n<h4>Monorepo Deste\u011fi<\/h4>\nE\u011fer projeniz bir monorepo i\u00e7indeyse (yani tek bir depoda birden fazla uygulama veya k\u00fct\u00fcphane bulunuyorsa), DigitalOcean App Platform’da her bir uygulamay\u0131 ayr\u0131 bir bile\u015fen olarak yap\u0131land\u0131rabilirsiniz. <code>Source Directory<\/code> (Kaynak Dizini) ayar\u0131 bu durumda kritik \u00f6neme sahiptir. Her bile\u015fen i\u00e7in, ilgili uygulama kodunun bulundu\u011fu alt dizini belirtmeniz gerekir.<\/p>\n<h3>Sonu\u00e7<\/h3>\nDigitalOcean App Platform, GitHub ile entegrasyonu sayesinde statik siteleri da\u011f\u0131tmak i\u00e7in inan\u0131lmaz derecede g\u00fc\u00e7l\u00fc, kullan\u0131c\u0131 dostu ve uygun maliyetli bir \u00e7\u00f6z\u00fcm sunar. Basit bir HTML sayfas\u0131ndan karma\u015f\u0131k bir statik site olu\u015fturucu projesine kadar her t\u00fcrl\u00fc statik web uygulamas\u0131n\u0131 sorunsuz bir \u015fekilde da\u011f\u0131tabilirsiniz.<\/p>\nBu k\u0131lavuzda ele ald\u0131\u011f\u0131m\u0131z ad\u0131mlar\u0131 takip ederek:<\/p>\n* Statik sitenizi haz\u0131rlad\u0131n\u0131z ve GitHub’a y\u00fcklediniz. \n* DigitalOcean App Platform’a ba\u011fland\u0131n\u0131z ve uygulaman\u0131z\u0131 yap\u0131land\u0131rd\u0131n\u0131z. \n* Sitenizi canl\u0131ya ald\u0131n\u0131z ve otomatik da\u011f\u0131t\u0131mlar\u0131n keyfini \u00e7\u0131kard\u0131n\u0131z. \n* \u00d6zel alan ad\u0131n\u0131z\u0131 ba\u011flad\u0131n\u0131z ve \u00fccretsiz SSL sertifikas\u0131 edindiniz. \n* Geli\u015fmi\u015f \u00f6zellikleri ve ipu\u00e7lar\u0131n\u0131 ke\u015ffettiniz.<\/p>\nArt\u0131k bir sonraki statik web sitenizi veya portf\u00f6y\u00fcn\u00fcz\u00fc h\u0131zla d\u00fcnyaya a\u00e7mak i\u00e7in gerekli t\u00fcm ara\u00e7lara sahipsiniz. DigitalOcean App Platform, geli\u015ftiricilerin altyap\u0131 y\u00f6netimi yerine kod yazmaya odaklanmas\u0131n\u0131 sa\u011flayarak modern web geli\u015ftirme s\u00fcre\u00e7lerini basitle\u015ftirir. Deneyin ve bu g\u00fc\u00e7l\u00fc platformun sundu\u011fu kolayl\u0131\u011f\u0131 kendiniz g\u00f6r\u00fcn!<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]\nWeb geli\u015ftirme d\u00fcnyas\u0131nda statik siteler, h\u0131zlar\u0131, g\u00fcv","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":[1401],"tags":[],"class_list":{"0":"post-36630","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-git","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\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\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]\" \/>\n<meta property=\"og:description\" content=\"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] Web geli\u015ftirme d\u00fcnyas\u0131nda statik siteler, h\u0131zlar\u0131, g\u00fcv\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-20T18:40:41+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=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]\",\"datePublished\":\"2025-12-20T18:40:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\"},\"wordCount\":3131,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Git\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\",\"name\":\"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-20T18:40:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]\"}]},{\"@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_head_json":{"title":"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/","og_locale":"tr_TR","og_type":"article","og_title":"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]","og_description":"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] Web geli\u015ftirme d\u00fcnyas\u0131nda statik siteler, h\u0131zlar\u0131, g\u00fcv","og_url":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-20T18:40:41+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]","datePublished":"2025-12-20T18:40:41+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/"},"wordCount":3131,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Git"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/","url":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/","name":"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-20T18:40:41+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]"}]},{"@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\/36630","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=36630"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36630\/revisions"}],"predecessor-version":[{"id":36631,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36630\/revisions\/36631"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":36630,"date":"2025-12-20T21:40:41","date_gmt":"2025-12-20T18:40:41","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36630"},"modified":"2025-12-20T21:40:41","modified_gmt":"2025-12-20T18:40:41","slug":"githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/","title":{"rendered":"GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]"},"content":{"rendered":"

<\/p>\n

GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]<\/h2>\n
Web geli\u015ftirme d\u00fcnyas\u0131nda statik siteler, h\u0131zlar\u0131, g\u00fcvenlikleri ve d\u00fc\u015f\u00fck maliyetleri sayesinde giderek daha pop\u00fcler hale gelmektedir. Bu siteleri da\u011f\u0131tmak i\u00e7in bir\u00e7ok se\u00e7enek bulunsa da, DigitalOcean App Platform, GitHub ile entegrasyonu sayesinde geli\u015ftiricilere sorunsuz ve otomatik bir da\u011f\u0131t\u0131m deneyimi sunar. Bu makalede, bir statik siteyi GitHub deposundan DigitalOcean App Platform’a nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m, h\u0131zl\u0131 ve pratik bir \u015fekilde \u00f6\u011freneceksiniz.<\/p>\n

Giri\u015f: Statik Sitelerin Y\u00fckseli\u015fi ve Neden DigitalOcean App Platform?<\/h3>\n
Statik siteler, sunucu taraf\u0131nda herhangi bir i\u015fleme ihtiya\u00e7 duymayan, \u00f6nceden olu\u015fturulmu\u015f HTML, CSS ve JavaScript dosyalar\u0131ndan olu\u015fan web siteleridir. Dinamik sitelerin aksine (\u00f6rne\u011fin WordPress veya bir Node.js uygulamas\u0131), veritaban\u0131 sorgular\u0131 veya sunucu taraf\u0131 kod y\u00fcr\u00fctmesi gerektirmezler. Bu \u00f6zellikleri onlara e\u015fsiz avantajlar sa\u011flar:<\/p>\n
* H\u0131z<\/strong>: Sunucu taraf\u0131 i\u015flem olmad\u0131\u011f\u0131 i\u00e7in sayfalar \u00e7ok h\u0131zl\u0131 y\u00fcklenir.
\n* G\u00fcvenlik<\/strong>: Dinamik sitelerde g\u00f6r\u00fclen bir\u00e7ok g\u00fcvenlik a\u00e7\u0131\u011f\u0131 (SQL enjeksiyonu, XSS vb.) statik sitelerde bulunmaz.
\n* Maliyet Etkinli\u011fi<\/strong>: Sunucu kaynaklar\u0131na daha az ihtiya\u00e7 duyuldu\u011fu i\u00e7in genellikle daha ucuz bar\u0131nd\u0131rma se\u00e7enekleri sunarlar.
\n* \u00d6l\u00e7eklenebilirlik<\/strong>: \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011flar\u0131 (CDN) ile kolayca \u00f6l\u00e7eklenebilirler ve y\u00fcksek trafik durumlar\u0131nda bile performanslar\u0131n\u0131 korurlar.<\/p>\n
DigitalOcean App Platform, geli\u015ftiricilerin uygulamalar\u0131n\u0131 h\u0131zl\u0131 bir \u015fekilde olu\u015fturmas\u0131na, da\u011f\u0131tmas\u0131na ve \u00f6l\u00e7eklendirmesine olanak tan\u0131yan tam olarak y\u00f6netilen bir Platform as a Service (PaaS) \u00e7\u00f6z\u00fcm\u00fcd\u00fcr. GitHub ile derin entegrasyonu sayesinde, kodunuzu bir depoya itti\u011finizde otomatik olarak uygulaman\u0131z\u0131n da\u011f\u0131t\u0131lmas\u0131n\u0131 sa\u011flayarak s\u00fcrekli entegrasyon ve s\u00fcrekli da\u011f\u0131t\u0131m (CI\/CD) s\u00fcre\u00e7lerini basitle\u015ftirir. Statik siteler i\u00e7in \u00f6zellikle caziptir \u00e7\u00fcnk\u00fc \u00fccretsiz bir katman sunar ve otomatik SSL, k\u00fcresel CDN ve \u00f6zel alan ad\u0131 deste\u011fi gibi \u00f6zelliklerle birlikte gelir.<\/p>\n
Bu makalede, basit bir HTML\/CSS\/JS projesinden, pop\u00fcler statik site olu\u015fturucular\u0131na (SSG’ler) kadar \u00e7e\u015fitli senaryolar\u0131 kapsayarak, projenizi GitHub’a y\u00fcklemekten DigitalOcean App Platform \u00fczerinde canl\u0131ya almaya kadar t\u00fcm s\u00fcreci ele alaca\u011f\u0131z.<\/p>\n

\u00d6n Gereklilikler<\/h3>\n
Bu k\u0131lavuzu takip etmek i\u00e7in a\u015fa\u011f\u0131daki maddelere ihtiyac\u0131n\u0131z olacak:<\/p>\n
* GitHub Hesab\u0131<\/strong>: Projenizin kaynak kodunu bar\u0131nd\u0131rmak i\u00e7in.
\n* DigitalOcean Hesab\u0131<\/strong>: Uygulaman\u0131z\u0131 da\u011f\u0131tmak i\u00e7in. (Yeni kullan\u0131c\u0131lar genellikle kredi kazan\u0131r.)
\n* Statik Site Projesi<\/strong>: Da\u011f\u0131tmak istedi\u011finiz bir statik site projesi (basit HTML\/CSS\/JS, Jekyll, Hugo, Astro, Next.js’in SSG modu vb.).<\/p>\n
1. Statik Sitenizi Haz\u0131rlama ve GitHub’a Y\u00fckleme<\/h3>\n
Da\u011f\u0131t\u0131m s\u00fcrecine ba\u015flamadan \u00f6nce, statik sitenizin kodunun haz\u0131r olmas\u0131 ve bir GitHub deposunda bulunmas\u0131 gerekir.<\/p>\n
Basit Bir Statik Site \u00d6rne\u011fi<\/h4>\n
E\u011fer hen\u00fcz bir projeniz yoksa, basit bir index.html<\/code> dosyas\u0131 olu\u015fturarak ba\u015flayabiliriz:<\/p>\n
\n\n\n \n \n DigitalOcean App Platform Statik Site<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n background-color: #f4f7f6;\n color: #333;\n }\n .container {\n text-align: center;\n padding: 40px;\n background-color: #ffffff;\n border-radius: 10px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n h1 {\n color: #007bff;\n margin-bottom: 20px;\n }\n p {\n font-size: 1.1em;\n line-height: 1.6;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n Bu, GitHub'dan ba\u015far\u0131yla da\u011f\u0131t\u0131lan ilk statik sitemizdir.<\/p>\n Otomatik da\u011f\u0131t\u0131m\u0131n keyfini \u00e7\u0131kar\u0131n!<\/p>\n <\/div>\n<\/body>\n<\/html><\/code><\/pre>\nBu dosyay\u0131 projenizin k\u00f6k dizinine kaydedin.<\/p>\n<h4>Statik Site Olu\u015fturucular\u0131 (SSG’ler) \u0130\u00e7in Haz\u0131rl\u0131k<\/h4>\nE\u011fer Jekyll, Hugo, Next.js (SSG modu), Gatsby, Astro veya benzeri bir SSG kullan\u0131yorsan\u0131z, sitenizi geli\u015ftirme ortam\u0131n\u0131zda olu\u015fturman\u0131z (build etmeniz) gerekir. Bu i\u015flem genellikle bir <code>build<\/code> komutu ile yap\u0131l\u0131r ve statik dosyalar\u0131 belirli bir \u00e7\u0131kt\u0131 dizinine (\u00f6rne\u011fin <code>public<\/code>, <code>_site<\/code>, <code>dist<\/code>) yerle\u015ftirir. DigitalOcean App Platform bu komutu otomatik olarak \u00e7al\u0131\u015ft\u0131racak ve belirtilen \u00e7\u0131kt\u0131 dizinindeki dosyalar\u0131 da\u011f\u0131tacakt\u0131r.<\/p>\n\u00d6rnek <code>build<\/code> komutlar\u0131:<\/p>\n* Jekyll<\/strong>: <code>jekyll build<\/code> (\u00e7\u0131kt\u0131 dizini: <code>_site<\/code>) \n* Hugo<\/strong>: <code>hugo<\/code> (\u00e7\u0131kt\u0131 dizini: <code>public<\/code>) \n* Next.js (SSG)<\/strong>: <code>npm run build<\/code> (\u00e7\u0131kt\u0131 dizini: <code>out<\/code> veya <code>.next\/static<\/code> – App Platform genellikle <code>out<\/code> veya <code>public<\/code> gibi genel SSG \u00e7\u0131kt\u0131 dizinlerini otomatik olarak alg\u0131lar, ancak belirtmek faydal\u0131d\u0131r.) \n* Gatsby<\/strong>: <code>gatsby build<\/code> (\u00e7\u0131kt\u0131 dizini: <code>public<\/code>) \n* Astro<\/strong>: <code>npm run build<\/code> (\u00e7\u0131kt\u0131 dizini: <code>dist<\/code>) \n* Vite\/React\/Vue<\/strong>: <code>npm run build<\/code> (\u00e7\u0131kt\u0131 dizini: <code>dist<\/code>)<\/p>\n<h4>GitHub’a Y\u00fckleme<\/h4>\nSitenizin dosyalar\u0131 haz\u0131r oldu\u011funda, bunlar\u0131 bir GitHub deposuna y\u00fcklemeniz gerekir.<\/p>\n1. Yeni Bir GitHub Deposu Olu\u015fturun<\/strong>: GitHub hesab\u0131n\u0131za giri\u015f yap\u0131n ve yeni bir depo olu\u015fturun. Deponuza anlaml\u0131 bir isim verin (\u00f6rne\u011fin <code>my-static-site<\/code>). <code>README.md<\/code> eklemeyi veya <code>.gitignore<\/code> olu\u015fturmay\u0131 \u015fimdilik atlayabilirsiniz. \n2. Yerel Depoyu Ba\u015flat\u0131n<\/strong>: Proje dizininizde terminali a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code class=\"language-bash\">git init\n git add .\n git commit -m \"Initial static site commit\"\n git branch -M main\n git remote add origin https:\/\/github.com\/KULLANICI_ADINIZ\/DEPO_ADINIZ.git\n git push -u origin main<\/code><\/pre>\n <code>KULLANICI_ADINIZ<\/code> ve <code>DEPO_ADINIZ<\/code> k\u0131s\u0131mlar\u0131n\u0131 kendi GitHub kullan\u0131c\u0131 ad\u0131n\u0131z ve depo ad\u0131n\u0131zla de\u011fi\u015ftirin. Bu ad\u0131mlar, yerel projenizi <code>main<\/code> dal\u0131na (branch) ilk kez y\u00fckleyecektir.<\/p>\nArt\u0131k statik sitenizin kodu GitHub’da. DigitalOcean App Platform’a ge\u00e7meye haz\u0131r\u0131z.<\/p>\n<h3>2. DigitalOcean App Platform’a Giri\u015f<\/h3>\nDigitalOcean App Platform, uygulaman\u0131z\u0131 y\u00f6netilen bir ortamda bar\u0131nd\u0131rmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Sunucu yap\u0131land\u0131rmas\u0131, \u00f6l\u00e7eklendirme, g\u00fcvenlik yamalar\u0131 ve i\u015fletim sistemi g\u00fcncellemeleri gibi karma\u015f\u0131k altyap\u0131 y\u00f6netiminden sizi kurtar\u0131r. Sadece kodunuzu verin, gerisini App Platform halleder.<\/p>\nStatik siteler i\u00e7in App Platform’un sundu\u011fu baz\u0131 temel avantajlar:<\/p>\n* GitHub Entegrasyonu<\/strong>: Kodunuzu GitHub’a itti\u011finizde otomatik olarak yeni da\u011f\u0131t\u0131mlar tetikler. \n* Otomatik Derleme ve Da\u011f\u0131t\u0131m<\/strong>: Statik site olu\u015fturucular\u0131 i\u00e7in gerekli derleme ad\u0131mlar\u0131n\u0131 otomatik olarak y\u00fcr\u00fct\u00fcr. \n* \u00dccretsiz SSL Sertifikalar\u0131<\/strong>: Let’s Encrypt arac\u0131l\u0131\u011f\u0131yla t\u00fcm uygulamalar i\u00e7in otomatik HTTPS sa\u011flar. \n* K\u00fcresel CDN<\/strong>: \u0130\u00e7eri\u011finizi son kullan\u0131c\u0131lara daha h\u0131zl\u0131 ula\u015ft\u0131rmak i\u00e7in yerle\u015fik bir CDN kullan\u0131r. \n* \u00d6zel Alan Ad\u0131 Deste\u011fi<\/strong>: Kendi alan ad\u0131n\u0131z\u0131 kolayca ba\u011flayabilirsiniz. \n* Uygun Fiyatland\u0131rma<\/strong>: Statik siteler i\u00e7in genellikle “Starter” plan\u0131 yeterlidir ve \u00fccretsizdir.<\/p>\n<h3>3. DigitalOcean Hesab\u0131 Olu\u015fturma ve Proje Ba\u015flatma<\/h3>\nE\u011fer bir DigitalOcean hesab\u0131n\u0131z yoksa, \u00f6ncelikle bir tane olu\u015fturman\u0131z gerekecektir.<\/p>\n1. DigitalOcean’a Kaydolun<\/strong>: DigitalOcean web sitesine gidin ve bir hesap olu\u015fturun. Genellikle yeni kullan\u0131c\u0131lar i\u00e7in \u00fccretsiz kredi sunulur, bu da ba\u015flang\u0131\u00e7 i\u00e7in harika bir f\u0131rsatt\u0131r. \n2. Yeni Bir Uygulama Olu\u015fturun<\/strong>: DigitalOcean kontrol paneline giri\u015f yapt\u0131ktan sonra, sol men\u00fcde “Apps” b\u00f6l\u00fcm\u00fcne t\u0131klay\u0131n veya sa\u011f \u00fcst k\u00f6\u015fedeki “Create” d\u00fc\u011fmesine t\u0131klayarak “Apps” se\u00e7ene\u011fini se\u00e7in. \n3. Kaynak Kodunu Ba\u011flay\u0131n<\/strong>: \n * “Create App” d\u00fc\u011fmesine t\u0131klad\u0131ktan sonra, DigitalOcean sizden kaynak kodunuzu ba\u011flaman\u0131z\u0131 isteyecektir. “GitHub” se\u00e7ene\u011fini se\u00e7in. \n * E\u011fer ilk kez yap\u0131yorsan\u0131z, DigitalOcean’\u0131n GitHub hesab\u0131n\u0131za eri\u015fmesine izin vermeniz gerekecektir. “Install DigitalOcean GitHub App” veya “Authorize DigitalOcean” gibi bir d\u00fc\u011fme g\u00f6receksiniz. Bu ad\u0131m\u0131 tamamlay\u0131n. Bu, DigitalOcean’\u0131n depolar\u0131n\u0131z\u0131 okumas\u0131na ve web kancalar\u0131 (webhooks) olu\u015fturmas\u0131na izin verecektir. \n * Eri\u015fim izni verdikten sonra, DigitalOcean size GitHub depolar\u0131n\u0131z\u0131n bir listesini g\u00f6sterecektir. Daha \u00f6nce olu\u015fturdu\u011funuz statik site deponuzu (\u00f6rne\u011fin <code>my-static-site<\/code>) se\u00e7in. \n * “Branch” (dal) olarak <code>main<\/code> veya hangi dalda da\u011f\u0131t\u0131m yapmak istiyorsan\u0131z onu se\u00e7in. \n * “Autodeploy” (otomatik da\u011f\u0131t\u0131m) se\u00e7ene\u011finin i\u015faretli oldu\u011fundan emin olun. Bu, GitHub’a her itme yapt\u0131\u011f\u0131n\u0131zda uygulaman\u0131z\u0131n otomatik olarak yeniden da\u011f\u0131t\u0131lmas\u0131n\u0131 sa\u011flayacakt\u0131r. \n * “Next” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\n<h3>4. Uygulaman\u0131z\u0131 Yap\u0131land\u0131rma<\/h3>\nBu ad\u0131m, uygulaman\u0131z\u0131n DigitalOcean App Platform \u00fczerinde nas\u0131l derlenece\u011fini ve da\u011f\u0131t\u0131laca\u011f\u0131n\u0131 belirledi\u011finiz yerdir.<\/p>\n1. Kaynak Alg\u0131lama<\/strong>: DigitalOcean, deponuzu tarayacak ve genellikle otomatik olarak bir “Static Site” bile\u015feni alg\u0131layacakt\u0131r. E\u011fer alg\u0131lamazsa, manuel olarak ekleyebilirsiniz. \n2. Bile\u015fen Ayarlar\u0131<\/strong>: Alg\u0131lanan veya eklenen statik site bile\u015fenine t\u0131klay\u0131n. Burada a\u015fa\u011f\u0131daki ayarlar\u0131 yap\u0131land\u0131rman\u0131z gerekecektir:<\/p>\n * Resource Type (Kaynak T\u00fcr\u00fc)<\/strong>: <code>Static Site<\/code> olarak ayarland\u0131\u011f\u0131ndan emin olun. \n * Source Directory (Kaynak Dizini)<\/strong>: E\u011fer projeniz deponun k\u00f6k dizininde de\u011fil de bir alt dizinde (\u00f6rne\u011fin bir monorepo i\u00e7inde) bulunuyorsa, bu dizini belirtmeniz gerekir. \u00c7o\u011fu statik site projesi i\u00e7in bu alan bo\u015f b\u0131rak\u0131labilir veya <code>\/<\/code> olarak ayarlanabilir. \n * Build Command (Derleme Komutu)<\/strong>: Bu, statik site olu\u015fturucunuzu (SSG) \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131lan komuttur. \n * Basit HTML\/CSS\/JS siteleri i\u00e7in<\/strong>: Bu alan\u0131 bo\u015f b\u0131rak\u0131n. Herhangi bir derleme ad\u0131m\u0131na ihtiya\u00e7 yoktur. \n * Jekyll<\/strong>: <code>jekyll build<\/code> \n * Hugo<\/strong>: <code>hugo<\/code> \n * Next.js (SSG), Astro, Gatsby, React, Vue, Svelte<\/strong>: <code>npm run build<\/code> veya <code>yarn build<\/code> (projenizin <code>package.json<\/code> dosyas\u0131ndaki <code>scripts<\/code> b\u00f6l\u00fcm\u00fcne g\u00f6re). \n * DigitalOcean genellikle pop\u00fcler SSG’ler i\u00e7in bu komutu otomatik olarak alg\u0131lar. \n * Output Directory (\u00c7\u0131kt\u0131 Dizini)<\/strong>: Derleme komutunuzun statik dosyalar\u0131 olu\u015fturdu\u011fu dizindir. App Platform, bu dizindeki i\u00e7eri\u011fi web sunucusunda sunacakt\u0131r. \n * Basit HTML\/CSS\/JS siteleri i\u00e7in<\/strong>: <code>\/<\/code> (k\u00f6k dizin) \n * Jekyll<\/strong>: <code>_site<\/code> \n * Hugo<\/strong>: <code>public<\/code> \n * Next.js (SSG)<\/strong>: <code>out<\/code> veya <code>public<\/code> (yap\u0131land\u0131rman\u0131za ba\u011fl\u0131 olarak) \n * Gatsby<\/strong>: <code>public<\/code> \n * Astro, React, Vue, Svelte (Vite ile)<\/strong>: <code>dist<\/code> \n * Bu da genellikle otomatik olarak alg\u0131lan\u0131r, ancak do\u011fru oldu\u011fundan emin olun. \n * HTTP Port (HTTP Portu)<\/strong>: Statik siteler i\u00e7in genellikle 80 veya 443 (HTTPS) kullan\u0131l\u0131r ve bu App Platform taraf\u0131ndan otomatik olarak y\u00f6netilir. Bu ayar genellikle de\u011fi\u015ftirilmez. \n * Environment Variables (Ortam De\u011fi\u015fkenleri)<\/strong>: E\u011fer uygulaman\u0131zda API anahtarlar\u0131 veya di\u011fer hassas veriler gibi ortam de\u011fi\u015fkenleri kullan\u0131yorsan\u0131z, bunlar\u0131 burada ekleyebilirsiniz. Statik siteler i\u00e7in genellikle daha az kullan\u0131l\u0131r, ancak frontend kodunuzda \u00e7al\u0131\u015fma zaman\u0131nda ihtiya\u00e7 duyulan baz\u0131 yap\u0131land\u0131rmalar i\u00e7in faydal\u0131 olabilir.<\/p>\n3. Di\u011fer Ayarlar<\/strong>: \n * Region (B\u00f6lge)<\/strong>: Uygulaman\u0131z\u0131n da\u011f\u0131t\u0131laca\u011f\u0131 veri merkezi konumunu se\u00e7in. Hedef kitlenize en yak\u0131n b\u00f6lgeyi se\u00e7mek, sitenizin daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar. \n * Plan<\/strong>: Statik siteler i\u00e7in genellikle Starter<\/strong> plan\u0131 yeterlidir ve bu plan, belirli bir kullan\u0131m limitine kadar \u00fccretsizdir. Daha fazla kaynak veya \u00f6zellik gerekiyorsa, Basic veya Professional planlar\u0131 d\u00fc\u015f\u00fcnebilirsiniz. \u00dccretsiz katman, ayda 100 GB bant geni\u015fli\u011fi ve 10.000 derleme dakikas\u0131 gibi c\u00f6mert limitler sunar.<\/p>\nT\u00fcm ayarlar\u0131 g\u00f6zden ge\u00e7irdikten sonra “Next” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\n<h3>5. Da\u011f\u0131t\u0131m S\u00fcreci<\/h3>\nYap\u0131land\u0131rma ad\u0131mlar\u0131n\u0131 tamamlad\u0131ktan sonra, DigitalOcean size uygulaman\u0131z\u0131n bir \u00f6zetini sunacakt\u0131r.<\/p>\n1. \u00d6zeti G\u00f6zden Ge\u00e7irin<\/strong>: Yap\u0131land\u0131rma ayarlar\u0131n\u0131z\u0131n do\u011fru oldu\u011fundan emin olun. \n2. Uygulamay\u0131 Ba\u015flat\u0131n<\/strong>: “Create Resources” veya “Launch App” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\nDigitalOcean App Platform \u015fimdi uygulaman\u0131z\u0131 da\u011f\u0131tmaya ba\u015flayacakt\u0131r. Bu s\u00fcre\u00e7 birka\u00e7 dakika s\u00fcrebilir ve a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 i\u00e7erecektir:<\/p>\n* Kod \u00c7ekme<\/strong>: GitHub deponuzdan kaynak kodunu \u00e7eker. \n* Derleme<\/strong>: E\u011fer bir derleme komutu belirttiyseniz (\u00f6rne\u011fin <code>npm run build<\/code>), bu komutu \u00e7al\u0131\u015ft\u0131r\u0131r. \n* Da\u011f\u0131t\u0131m<\/strong>: \u00c7\u0131kt\u0131 dizinindeki statik dosyalar\u0131 CDN’ye da\u011f\u0131t\u0131r ve uygulaman\u0131z\u0131 canl\u0131ya al\u0131r.<\/p>\nDa\u011f\u0131t\u0131m s\u00fcrecini DigitalOcean kontrol panelindeki uygulaman\u0131z\u0131n “Deployments” (Da\u011f\u0131t\u0131mlar) sekmesinden takip edebilirsiniz. Loglar\u0131 g\u00f6r\u00fcnt\u00fcleyerek herhangi bir sorun olup olmad\u0131\u011f\u0131n\u0131 kontrol edebilirsiniz.<\/p>\nBa\u015far\u0131l\u0131 bir da\u011f\u0131t\u0131m\u0131n ard\u0131ndan, uygulaman\u0131z\u0131n genel bir URL’si (\u00f6rne\u011fin <code>https:\/\/your-app-name.ondigitalocean.app<\/code>) ile birlikte “Live” (Canl\u0131) durumunu g\u00f6receksiniz. Bu URL’ye t\u0131klayarak statik sitenizi taray\u0131c\u0131n\u0131zda g\u00f6r\u00fcnt\u00fcleyebilirsiniz. Tebrikler, ilk statik sitenizi DigitalOcean App Platform’a da\u011f\u0131tt\u0131n\u0131z!<\/p>\n<h3>6. Otomatik Da\u011f\u0131t\u0131mlar ve G\u00fcncellemeler<\/h3>\nDigitalOcean App Platform’un en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, GitHub entegrasyonu sayesinde otomatik da\u011f\u0131t\u0131mlard\u0131r.<\/p>\n1. De\u011fi\u015fiklik Yap\u0131n<\/strong>: GitHub’da ba\u011fl\u0131 olan dal\u0131n\u0131za (\u00f6rne\u011fin <code>main<\/code> dal\u0131) k\u00fc\u00e7\u00fck bir de\u011fi\u015fiklik yap\u0131n. \u00d6rne\u011fin, <code>index.html<\/code> dosyas\u0131ndaki bir metni de\u011fi\u015ftirin:<\/p>\n<pre><code class=\"language-html\">Bu, GitHub'dan ba\u015far\u0131yla da\u011f\u0131t\u0131lan ilk statik sitemizdir. \u015eimdi otomatik g\u00fcncellemeleri test ediyoruz!<\/strong><\/p><\/code><\/pre>\n2. De\u011fi\u015fiklikleri Kaydedin ve GitHub’a \u0130tin<\/strong>:<\/p>\n<pre><code class=\"language-bash\">git add .\n git commit -m \"Updated content for autodeploy test\"\n git push origin main<\/code><\/pre>\n3. Otomatik Da\u011f\u0131t\u0131m\u0131 G\u00f6zlemleyin<\/strong>: GitHub’a itme i\u015flemini tamamlad\u0131ktan k\u0131sa bir s\u00fcre sonra DigitalOcean kontrol panelinize geri d\u00f6n\u00fcn. Uygulaman\u0131z\u0131n “Deployments” sekmesinde yeni bir da\u011f\u0131t\u0131m\u0131n otomatik olarak ba\u015flad\u0131\u011f\u0131n\u0131 g\u00f6receksiniz. Bu da\u011f\u0131t\u0131m tamamland\u0131\u011f\u0131nda, sitenizin genel URL’sini yeniledi\u011finizde yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fikliklerin yans\u0131t\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6receksiniz.<\/p>\nBu \u00f6zellik, geli\u015ftirme s\u00fcrecinizi son derece h\u0131zland\u0131r\u0131r ve manuel da\u011f\u0131t\u0131m ad\u0131mlar\u0131na olan ihtiyac\u0131 ortadan kald\u0131r\u0131r.<\/p>\n<h3>7. \u00d6zel Alan Ad\u0131 ve SSL Yap\u0131land\u0131rmas\u0131<\/h3>\nUygulaman\u0131z\u0131n DigitalOcean taraf\u0131ndan sa\u011flanan varsay\u0131lan URL yerine kendi \u00f6zel alan ad\u0131n\u0131zla eri\u015filebilir olmas\u0131n\u0131 isteyebilirsiniz. DigitalOcean App Platform, bu s\u00fcreci de kolayla\u015ft\u0131r\u0131r ve \u00fccretsiz SSL sertifikalar\u0131 sa\u011flar.<\/p>\n1. \u00d6zel Alan Ad\u0131 Ekleme<\/strong>: \n * DigitalOcean kontrol panelinde uygulaman\u0131z\u0131n sayfas\u0131na gidin. \n * Sol men\u00fcden “Settings” (Ayarlar) sekmesine t\u0131klay\u0131n. \n * “Domains” (Alan Adlar\u0131) b\u00f6l\u00fcm\u00fcne gidin ve “Add Domain” (Alan Ad\u0131 Ekle) d\u00fc\u011fmesine t\u0131klay\u0131n. \n * Kullanmak istedi\u011finiz alan ad\u0131n\u0131 girin (\u00f6rne\u011fin <code>example.com<\/code> veya <code>www.example.com<\/code>). \n * “Add Domain” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\n2. DNS Kay\u0131tlar\u0131n\u0131 Yap\u0131land\u0131rma<\/strong>: \n * DigitalOcean size alan ad\u0131n\u0131z\u0131 do\u011frulamak i\u00e7in yapman\u0131z gereken DNS kay\u0131tlar\u0131n\u0131 g\u00f6sterecektir. Genellikle iki t\u00fcr kay\u0131t istenir: \n * CNAME Kayd\u0131<\/strong>: <code>www.example.com<\/code> gibi alt alan adlar\u0131 i\u00e7in kullan\u0131l\u0131r. <code>www<\/code> ana bilgisayar ad\u0131n\u0131, uygulaman\u0131z\u0131n varsay\u0131lan DigitalOcean URL’sine (\u00f6rne\u011fin <code>your-app-name.ondigitalocean.app<\/code>) i\u015faret eden bir CNAME kayd\u0131 olu\u015fturman\u0131z gerekir. \n * A Kayd\u0131<\/strong>: K\u00f6ksel alan adlar\u0131 (\u00f6rne\u011fin <code>example.com<\/code>) i\u00e7in kullan\u0131l\u0131r. <code>@<\/code> ana bilgisayar ad\u0131n\u0131 (veya bazen bo\u015f b\u0131rak\u0131l\u0131r), DigitalOcean taraf\u0131ndan sa\u011flanan bir IP adresine i\u015faret eden bir A kayd\u0131 olu\u015fturman\u0131z gerekir. \n * Bu kay\u0131tlar\u0131 alan ad\u0131n\u0131z\u0131 y\u00f6netti\u011finiz DNS sa\u011flay\u0131c\u0131n\u0131z\u0131n (\u00f6rne\u011fin GoDaddy, Namecheap, Cloudflare veya DigitalOcean DNS) kontrol paneline girmeniz gerekir. \n * Kayd\u0131 ekledikten sonra, DNS de\u011fi\u015fikliklerinin yay\u0131lmas\u0131 biraz zaman alabilir (genellikle birka\u00e7 dakika ile birka\u00e7 saat aras\u0131nda).<\/p>\n3. \u00dccretsiz SSL Sertifikas\u0131<\/strong>: \n * Alan ad\u0131n\u0131z\u0131 ekledikten ve DNS kay\u0131tlar\u0131n\u0131 do\u011fru bir \u015fekilde yap\u0131land\u0131rd\u0131ktan sonra, DigitalOcean App Platform otomatik olarak Let’s Encrypt arac\u0131l\u0131\u011f\u0131yla siteniz i\u00e7in \u00fccretsiz bir SSL sertifikas\u0131 sa\u011flayacakt\u0131r. \n * Bu, sitenizin <code>https:\/\/<\/code> ile g\u00fcvenli bir \u015fekilde eri\u015filebilir olmas\u0131n\u0131 sa\u011flar. Sertifika y\u00f6netimi tamamen App Platform taraf\u0131ndan yap\u0131l\u0131r, yenileme ve kurulum gibi i\u015flemlerle u\u011fra\u015fman\u0131za gerek kalmaz. \n * Sertifika aktif hale geldi\u011finde, “Domains” b\u00f6l\u00fcm\u00fcnde alan ad\u0131n\u0131z\u0131n yan\u0131nda “Verified” ve “HTTPS” durumunu g\u00f6receksiniz.<\/p>\nArt\u0131k statik sitenize kendi \u00f6zel alan ad\u0131n\u0131z \u00fczerinden g\u00fcvenli bir \u015fekilde eri\u015febilirsiniz.<\/p>\n<h3>8. Geli\u015fmi\u015f \u00d6zellikler ve \u0130pu\u00e7lar\u0131<\/h3>\nDigitalOcean App Platform, statik siteler i\u00e7in bile baz\u0131 geli\u015fmi\u015f \u00f6zellikler ve kullan\u0131\u015fl\u0131 ipu\u00e7lar\u0131 sunar.<\/p>\n<h4>Ortam De\u011fi\u015fkenleri<\/h4>\nStatik siteler genellikle sunucu taraf\u0131 mant\u0131k i\u00e7ermese de, bazen istemci taraf\u0131 kodunuzda kullan\u0131lan API anahtarlar\u0131 veya yap\u0131land\u0131rma ayarlar\u0131 gibi ortam de\u011fi\u015fkenlerine ihtiya\u00e7 duyabilirler. Bu de\u011fi\u015fkenleri do\u011frudan kodunuza yazmak yerine (\u00f6zellikle hassas veriler i\u00e7in), App Platform’da ortam de\u011fi\u015fkenleri olarak tan\u0131mlayabilirsiniz.<\/p>\n* Uygulaman\u0131z\u0131n “Settings” (Ayarlar) sekmesine gidin. \n* “Environment Variables” (Ortam De\u011fi\u015fkenleri) b\u00f6l\u00fcm\u00fcnde, “Add Variable” (De\u011fi\u015fken Ekle) d\u00fc\u011fmesine t\u0131klay\u0131n. \n* De\u011fi\u015fken ad\u0131n\u0131 ve de\u011ferini girin. “Scope” (Kapsam) olarak “Static Site” bile\u015fenini se\u00e7ti\u011finizden emin olun. \n* \u00d6nemli<\/strong>: \u0130stemci taraf\u0131nda eri\u015filmesi gereken de\u011fi\u015fkenler i\u00e7in genellikle bir \u00f6nek (\u00f6rne\u011fin <code>NEXT_PUBLIC_<\/code>, <code>VITE_<\/code>, <code>GATSBY_<\/code>) kullan\u0131l\u0131r. Bu, derleme s\u0131ras\u0131nda bu de\u011fi\u015fkenlerin istemci taraf\u0131 koduna enjekte edilmesini sa\u011flar.<\/p>\n<h4>Rollback (Geri Alma)<\/h4>\nYeni bir da\u011f\u0131t\u0131m\u0131n sorunlara yol a\u00e7mas\u0131 durumunda, DigitalOcean App Platform \u00f6nceki ba\u015far\u0131l\u0131 da\u011f\u0131t\u0131mlara geri d\u00f6nmenize olanak tan\u0131r.<\/p>\n* Uygulaman\u0131z\u0131n “Deployments” (Da\u011f\u0131t\u0131mlar) sekmesine gidin. \n* \u00d6nceki ba\u015far\u0131l\u0131 bir da\u011f\u0131t\u0131m\u0131n yan\u0131ndaki “…” men\u00fcs\u00fcne t\u0131klay\u0131n ve “Rollback to this deployment” (Bu da\u011f\u0131t\u0131ma geri al) se\u00e7ene\u011fini se\u00e7in. \n* Bu, sitenizi h\u0131zla \u00e7al\u0131\u015fan bir \u00f6nceki s\u00fcr\u00fcme geri d\u00f6nd\u00fcr\u00fcr.<\/p>\n<h4>\u0130zleme ve G\u00fcnl\u00fckler (Monitoring and Logging)<\/h4>\nApp Platform, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve durumunu izlemek i\u00e7in ara\u00e7lar sa\u011flar.<\/p>\n* “Metrics” (Metrikler) sekmesi, bant geni\u015fli\u011fi kullan\u0131m\u0131, istek say\u0131s\u0131 ve hata oranlar\u0131 gibi \u00f6nemli performans g\u00f6stergelerini g\u00f6sterir. \n* “Logs” (G\u00fcnl\u00fckler) sekmesi, derleme ve da\u011f\u0131t\u0131m s\u00fcre\u00e7leri s\u0131ras\u0131nda olu\u015fan t\u00fcm g\u00fcnl\u00fckleri g\u00f6r\u00fcnt\u00fcler. Hata ay\u0131klama ve sorun giderme i\u00e7in \u00e7ok faydal\u0131d\u0131r.<\/p>\n<h4>CDN ve Performans<\/h4>\nDigitalOcean App Platform, t\u00fcm uygulamalar i\u00e7in varsay\u0131lan olarak bir k\u00fcresel \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131 (CDN) kullan\u0131r. Bu, statik dosyalar\u0131n\u0131z\u0131n d\u00fcnya \u00e7ap\u0131ndaki farkl\u0131 konumlarda \u00f6nbelle\u011fe al\u0131nmas\u0131n\u0131 sa\u011flar. Son kullan\u0131c\u0131lar, i\u00e7eri\u011fi kendilerine en yak\u0131n CDN sunucusundan alarak daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri deneyimlerler. Bu \u00f6zellik, statik sitelerin do\u011fas\u0131nda var olan h\u0131z avantaj\u0131n\u0131 daha da art\u0131r\u0131r.<\/p>\n<h4>Branch Da\u011f\u0131t\u0131mlar\u0131 (Staging Ortamlar\u0131)<\/h4>\nGeli\u015ftiriciler genellikle yeni \u00f6zellikleri ana siteye da\u011f\u0131tmadan \u00f6nce test etmek i\u00e7in haz\u0131rl\u0131k (staging) ortamlar\u0131na ihtiya\u00e7 duyarlar. DigitalOcean App Platform, farkl\u0131 dallardan (branch) farkl\u0131 uygulamalar da\u011f\u0131tarak veya ayn\u0131 uygulama i\u00e7inde farkl\u0131 dallar\u0131 farkl\u0131 bile\u015fenlere ba\u011flayarak bu senaryoyu destekleyebilir. \u00d6rne\u011fin, <code>main<\/code> dal\u0131n\u0131 canl\u0131 siteye, <code>develop<\/code> dal\u0131n\u0131 ise bir test sitesine da\u011f\u0131tabilirsiniz.<\/p>\n<h4>Monorepo Deste\u011fi<\/h4>\nE\u011fer projeniz bir monorepo i\u00e7indeyse (yani tek bir depoda birden fazla uygulama veya k\u00fct\u00fcphane bulunuyorsa), DigitalOcean App Platform’da her bir uygulamay\u0131 ayr\u0131 bir bile\u015fen olarak yap\u0131land\u0131rabilirsiniz. <code>Source Directory<\/code> (Kaynak Dizini) ayar\u0131 bu durumda kritik \u00f6neme sahiptir. Her bile\u015fen i\u00e7in, ilgili uygulama kodunun bulundu\u011fu alt dizini belirtmeniz gerekir.<\/p>\n<h3>Sonu\u00e7<\/h3>\nDigitalOcean App Platform, GitHub ile entegrasyonu sayesinde statik siteleri da\u011f\u0131tmak i\u00e7in inan\u0131lmaz derecede g\u00fc\u00e7l\u00fc, kullan\u0131c\u0131 dostu ve uygun maliyetli bir \u00e7\u00f6z\u00fcm sunar. Basit bir HTML sayfas\u0131ndan karma\u015f\u0131k bir statik site olu\u015fturucu projesine kadar her t\u00fcrl\u00fc statik web uygulamas\u0131n\u0131 sorunsuz bir \u015fekilde da\u011f\u0131tabilirsiniz.<\/p>\nBu k\u0131lavuzda ele ald\u0131\u011f\u0131m\u0131z ad\u0131mlar\u0131 takip ederek:<\/p>\n* Statik sitenizi haz\u0131rlad\u0131n\u0131z ve GitHub’a y\u00fcklediniz. \n* DigitalOcean App Platform’a ba\u011fland\u0131n\u0131z ve uygulaman\u0131z\u0131 yap\u0131land\u0131rd\u0131n\u0131z. \n* Sitenizi canl\u0131ya ald\u0131n\u0131z ve otomatik da\u011f\u0131t\u0131mlar\u0131n keyfini \u00e7\u0131kard\u0131n\u0131z. \n* \u00d6zel alan ad\u0131n\u0131z\u0131 ba\u011flad\u0131n\u0131z ve \u00fccretsiz SSL sertifikas\u0131 edindiniz. \n* Geli\u015fmi\u015f \u00f6zellikleri ve ipu\u00e7lar\u0131n\u0131 ke\u015ffettiniz.<\/p>\nArt\u0131k bir sonraki statik web sitenizi veya portf\u00f6y\u00fcn\u00fcz\u00fc h\u0131zla d\u00fcnyaya a\u00e7mak i\u00e7in gerekli t\u00fcm ara\u00e7lara sahipsiniz. DigitalOcean App Platform, geli\u015ftiricilerin altyap\u0131 y\u00f6netimi yerine kod yazmaya odaklanmas\u0131n\u0131 sa\u011flayarak modern web geli\u015ftirme s\u00fcre\u00e7lerini basitle\u015ftirir. Deneyin ve bu g\u00fc\u00e7l\u00fc platformun sundu\u011fu kolayl\u0131\u011f\u0131 kendiniz g\u00f6r\u00fcn!<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]\nWeb geli\u015ftirme d\u00fcnyas\u0131nda statik siteler, h\u0131zlar\u0131, g\u00fcv","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":[1401],"tags":[],"class_list":{"0":"post-36630","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-git","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\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\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]\" \/>\n<meta property=\"og:description\" content=\"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] Web geli\u015ftirme d\u00fcnyas\u0131nda statik siteler, h\u0131zlar\u0131, g\u00fcv\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-20T18:40:41+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=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]\",\"datePublished\":\"2025-12-20T18:40:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\"},\"wordCount\":3131,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Git\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\",\"name\":\"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-20T18:40:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]\"}]},{\"@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_head_json":{"title":"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/","og_locale":"tr_TR","og_type":"article","og_title":"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]","og_description":"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] Web geli\u015ftirme d\u00fcnyas\u0131nda statik siteler, h\u0131zlar\u0131, g\u00fcv","og_url":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-20T18:40:41+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]","datePublished":"2025-12-20T18:40:41+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/"},"wordCount":3131,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Git"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/","url":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/","name":"GitHub'dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7] - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-20T18:40:41+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/githubdan-digitalocean-app-platform-ile-statik-site-dagitimi-hizli-baslangic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"GitHub’dan DigitalOcean App Platform ile Statik Site Da\u011f\u0131t\u0131m\u0131 [H\u0131zl\u0131 Ba\u015flang\u0131\u00e7]"}]},{"@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\/36630","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=36630"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36630\/revisions"}],"predecessor-version":[{"id":36631,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36630\/revisions\/36631"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}