ServBay Ortamında Statamic Kurulumu ve Yapılandırması

Statamic, modern ve esnek yapısı ile tanınan, Laravel çatısı üzerinde geliştirilmiş bir içerik yönetim sistemidir (CMS). Farklı türdeki web siteleri oluşturmak için özellikle uygundur. Statamic’in öne çıkan özelliklerinden biri, içerikleri ve yapılandırmaları varsayılan olarak dosya sistemi üzerinde saklamasıdır; ancak istenirse veritabanı desteği de sunar.

Bu makalede, kapsamlı özelliklere sahip yerel bir web geliştirme ortamı olan ServBay üzerinde, Composer kullanarak Statamic’in nasıl kurulup yapılandırılacağını adım adım anlatacağız. ServBay, Statamic için gerekli olan PHP ortamını, Composer desteğini ve kolay site yönetimi imkanını sağlar.

Statamic’in Kurulum Adımları

ServBay ortamında Statamic kurulumu hem kolay hem de hızlıdır. Adımları aşağıdaki şekilde uygulayabilirsiniz:

Adım 1: Proje Dizini Oluşturun

Öncelikle, Statamic projeniz için ServBay’in web sitesi kök dizini olan /Applications/ServBay/www içinde yeni bir alt dizin oluşturmanız gerekmektedir. Terminali açın ve şu komutları girin:

cd /Applications/ServBay/www
mkdir servbay-statamic-app
cd servbay-statamic-app

Bu adımlar, sizi ServBay’in varsayılan web kök dizinine götürür, ardından servbay-statamic-app adında yeni bir klasör oluşturup oraya girmenizi sağlar.

2: Composer ile Statamic Projesi Oluşturun

ServBay, PHP bağımlılıklarınızı yönetmek için kullanılan Composer aracını önceden yüklemiş olarak sunar. Ekstra bir kurulum yapmanıza gerek yoktur; Composer’ı proje oluşturmak için doğrudan kullanabilirsiniz.

Bir önceki adımda oluşturduğunuz servbay-statamic-app klasörü içindeyken, aşağıdaki Composer komutunu çalıştırın:

composer create-project statamic/statamic .

Bu komut, Composer’a Statamic’in en güncel sürümünü ve tüm bağımlılıklarını indirip mevcut klasöre (.) kurmasını söyler. İndirme ve kurulum tamamlanana kadar sabırlı olun.

Adım 3: Web Sunucusunu Yapılandırma (ServBay’e Site Ekleme)

Statamic projenizin ServBay tarafından barındırılabilmesi için, ServBay uygulamasında yeni bir site yapılandırması eklemeniz gereklidir.

1. ServBay Uygulamasını Açın: ServBay masaüstü uygulamasını başlatın.

2. “Web Siteleri” Sekmesine Gidin: ServBay arayüzünde üstteki “Web Siteleri” (bazı eski sürümlerde “Hostlar” olarak da geçebilir) sekmesine tıklayın.

3. Yeni Site Ekleyin: Sol alt köşedeki “artı (+)” simgesine tıklayarak yeni bir site yapılandırması ekleyin.

4. Site Bilgilerini Doldurun: Açılan yapılandırma penceresinde aşağıdaki bilgileri girin:

   • Adı: Kolay hatırlayabileceğiniz bir ad, örneğin My Statamic Site.
   • Alan Adı: Yerel geliştirme için kullanılacak domain, genellikle .local uzantılı olmalıdır, örneğin servbay-statamic.local. ServBay, alan adını otomatik olarak yerel DNS ile ilişkilendirir.
   • Site Türü: PHP olarak seçin.
   • PHP Sürümü: Statamic projenizle uyumlu bir PHP versiyonu (genellikle en güncel ve kararlı sürüm önerilir).
   • Site Kök Dizini: Bu adım kritiktir. Statamic’in ana giriş dosyası index.php projenizin public alt klasörü içindedir. Bu yüzden site kök dizini olarak şu yolu seçin: /Applications/ServBay/www/servbay-statamic-app/public.

5. Ayarları Kaydedip Uygulayın: Tüm alanları doldurduktan sonra “Kaydet”e tıklayın. ServBay, yapılandırma değişikliklerinin etkin olması için sizi servisleri yeniden başlatmaya yönlendirebilir. Yönergelere uygun olarak web sunucusunu (varsayılan olarak Caddy veya Nginx) baştan başlatın ve yeni site yapılandırmasının aktif olmasını sağlayın.

Adım 4: Statamic Ortamını Yapılandırma

Statamic, proje kök dizininde .env dosyasını kullanarak ortam değişkenlerini ve uygulama ayarlarını (ör. uygulama anahtarı, veritabanı bağlantısı) yönetir.

1. Ortam Dosyasını Kopyalayın: Statamic projesinin içinde örnek bir .env.example dosyası bulunur. Terminalde, halen /Applications/ServBay/www/servbay-statamic-app dizinindeyken aşağıdaki komutu girin:

   cp .env.example .env

2. Uygulama Anahtarı Oluşturun: Laravel/Statamic, güvenlik amaçları için (ör. Session ve hassas verilerin şifrelenmesi) benzersiz bir uygulama anahtarına ihtiyaç duyar. Ana dizinde şu Artisan komutunu çalıştırarak bu anahtarı üretin:

   php artisan key:generate

   Bu komut, .env dosyasında bulunan APP_KEY değerini otomatik olarak oluşturur ve yazar.

Adım 5: Statamic’i Çalıştırma ve Erişim

Artık Statamic siteniz ServBay üzerinde yapılandırıldı ve çalışır durumda.

1. Statamic Sitesini Ziyaret Edin: Web tarayıcınızı açın, adres çubuğuna adım 3’te yapılandırdığınız domain adresini yazın; örneğin https://servbay-statamic.local. ServBay, yerel siteler için varsayılan olarak SSL sertifikası oluşturur (ServBay User CA veya ServBay Public CA ile), bu nedenle HTTPS ile doğrudan erişebilirsiniz. Statamic’in hoş geldiniz sayfasını görmelisiniz.

2. Yönetim Paneline Erişim: Statamic’in yönetim paneline genellikle /cp yolu üzerinden ulaşılır. Tarayıcınızda https://servbay-statamic.local/cp adresini ziyaret edin. Burada karşınıza Statamic kontrol panelinin giriş ya da kurulum ekranı çıkacaktır.

3. Yönetici Hesabı Oluşturun: Kontrol panelini ilk kez ziyaret ettiğinizde, sistem sizi bir yönetici hesabı oluşturmaya yönlendirecektir. Kullanıcı adı, şifre ve e-posta bilgilerini girin, ardından “Hesap Oluştur” seçeneğine tıklayın. Bu adımı tamamladıktan sonra, sitede oturum açabilir ve Statamic sitenizi yönetmeye başlayabilirsiniz.

Adım 6: Eklenti ve Tema Kurulumu (Opsiyonel)

Statamic’in geniş bir eklenti ve tema ekosistemi vardır; bunlar, sitenizin işlevselliğini ve görünümünü geliştirebilir.

1. Eklenti Kurulumu: Kontrol paneline giriş yaptıktan sonra, sol menüdeki ilgili alandan veya Composer komut satırıyla eklenti yükleyebilirsiniz. Kontrol panelinden yüklemek genellikle daha sezgiseldir.
2. Tema Kurulumu: Benzer şekilde, temanızı ya panelden kurabilir ya da tema dosyalarını belirli dizine manuel olarak ekleyebilirsiniz.

Statamic ile Web Sitesi Geliştirme

Kurulum ve yapılandırma tamamlandıktan sonra Statamic’in güçlü özelliklerini kullanarak kendi web sitenizi oluşturmaya başlayabilirsiniz. İşte temel işlemler için bazı ipuçları:

İçerik ve Koleksiyon Oluşturma

Statamic, geleneksel CMS’lerdeki makale veya sayfa türlerine benzer şekilde “Koleksiyonlar” ile içerikleri düzenler.

1. Koleksiyon Oluşturun: Statamic kontrol panelinde “İçerik” -> “Koleksiyonlar” yolunu takip edin ve “Koleksiyon Oluştur” seçeneğine tıklayın. Koleksiyona bir isim verin (ör. Posts, Pages) ve yol yapısı, alan şeması gibi ayarları belirleyin.
2. İçerik Öğesi Ekleyin: Oluşturduğunuz koleksiyonun altında, “Yeni Ekle” seçeneği ile içerik oluşturun (örneğin bir blog yazısı veya sayfa). İlgili alan şemasını kullanarak içeriklerinizi girin.

Gezinti Menüsü Yapılandırması

Web sitenizin menülerini kolayca oluşturabilir ve yönetebilirsiniz.

1. Gezinti Oluşturun: Statamic kontrol panelinde “İçerik” -> “Gezintiler” bölümünde “Gezinti Oluştur” seçeneğine tıklayın. Menüye uygun bir isim verin (örneğin Ana Navigasyon).
2. Gezinti Öğeleri Ekleyin: Oluşturduğunuz koleksiyondaki veya bağımsız sayfalardaki içerikleri sürükleyip menü yapısına dâhil ederek menü katmanlarını organize edebilirsiniz.

Şablon ve Stil Özelleştirme

Statamic, Laravel’in Blade şablon motorunu kullanır; böylece sitenizin görünümünü esnek bir şekilde kontrol edebilirsiniz.

1. Şablonları Düzenleyin: Web sitenizin görünüm dosyaları genellikle proje kök dizininde resources/views klasöründe bulunur. Statamic’in şablon hiyerarşisine uygun olarak (genelde layouts, partials, collections gibi alt klasörler içerir) .blade.php dosyalarını düzenleyerek ya da yeni oluşturarak sayfanızın HTML yapısını özelleştirin. Örneğin, ana şablon dosyasını aşağıdaki şekilde düzenleyebilirsiniz:

   <!-- resources/views/layouts/default.blade.php -->
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{ $title ?? 'My Statamic Site' }}</title>
       {{-- Derlenmiş CSS dosyasını dahil eder --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- Örnek: 'main_navigation' adındaki menüyü gösterir --}}
           @inject('nav', 'Statamic\View\ViewServiceProvider')
           @if ($main_navigation = $nav->navigation('main_navigation'))
               <nav>
                   <ul>
                       @foreach ($main_navigation->tree() as $item)
                           <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                       @endforeach
                   </ul>
               </nav>
           @endif
       </header>
       <main>
           {{-- Mevcut sayfanın içeriğini gösterir --}}
           @yield('content')
       </main>
       {{-- Derlenmiş JavaScript dosyasını dahil eder --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Stil ve Script Ekleyin: Statamic projeleri, genellikle Laravel Mix veya Vite gibi ön uç kaynak derleyicileriyle birlikte gelir. Orijinal CSS ve JavaScript dosyaları genellikle resources/css ve resources/js klasörlerinde olur.

   CSS dosyalarınızı resources/css/app.css içinde aşağıdaki gibi oluşturabilirsiniz:

   /* resources/css/app.css */
   body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: 1.6;
       color: #333;
       margin: 0;
       padding: 20px;
   }
   nav ul {
       list-style: none;
       padding: 0;
   }
   nav ul li {
       display: inline;
       margin-right: 15px;
   }

   JavaScript kodunuzu da resources/js/app.js dosyasında şu şekilde yazabilirsiniz:

   // resources/js/app.js
   console.log('Statamic ön uç varlıklar yüklendi!');
   
   // Örnek: Basit bir etkileşim
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`Üzerine gelindi: ${item.textContent}`);
           });
       });
   });

3. Ön Uç Kaynaklarını Derleyin: CSS ve JS dosyalarınızı tarayıcıda kullanılabilir hale getirmek için derleme yapmanız gerekir. Statamic projesi genellikle bir package.json içerir; npm veya yarn ile ön uç bağımlılıklarını yükleyip derleyebilirsiniz. ServBay, Node.js desteği ile birlikte geldiği için terminalde aşağıdaki komutları kullanabilirsiniz:

   npm install
   npm run dev

   npm install, package.json dosyasına göre tüm ön uç bağımlılıklarını yükler (Laravel Mix/Vite, Tailwind CSS, Vue/React vb.). npm run dev ise geliştirme modu için kaynak dosyaları derler; böylece CSS ve JS dosyalarınız oluşturulur ve genellikle kaynak haritalarıyla gelir. Prodüksiyon derlemesi için npm run prod veya npm run build komutlarını kullanabilirsiniz.

Sonuç

Bu adımlar sayesinde, güçlü bir yerel geliştirme ortamı olan ServBay üzerinde Statamic CMS’i başarıyla kurup yapılandırmış ve temel kullanım hakkında bilgi edinmiş oluyorsunuz. ServBay’in sunduğu hepsi bir arada ortam (PHP, Composer, web sunucusu, kolay site yönetimi ve Node.js desteği), Statamic’in yerel geliştirme sürecini büyük ölçüde kolaylaştırmaktadır. Artık Statamic’in esnek dosya tabanlı yapısı ve güçlü özellikleriyle, web projenizi hızlıca geliştirmeye ve üzerinde çalışmaya hazırsınız.