Instalasi dan Konfigurasi Statamic di Lingkungan ServBay

Statamic adalah sistem manajemen konten (CMS) modern berbasis kerangka kerja Laravel yang dikenal karena fleksibilitas dan fitur-fiturnya yang kuat, sangat cocok untuk membangun berbagai jenis website. Salah satu keunggulan Statamic adalah kemampuannya menyimpan konten dan pengaturan melalui sistem file secara default, namun juga menyediakan opsi untuk menggunakan basis data.

Dokumen ini akan memandu Anda secara detail mengenai cara menginstal dan mengonfigurasi Statamic di ServBay, lingkungan pengembangan web lokal yang lengkap. ServBay menyediakan lingkungan PHP, dukungan Composer, dan manajemen konfigurasi situs yang praktis untuk kebutuhan Statamic.

Langkah-langkah Instalasi Statamic

Proses instalasi Statamic di lingkungan ServBay sangat langsung dan efisien. Silakan ikuti langkah-langkah berikut:

Langkah 1: Membuat Direktori Proyek

Pertama, Anda perlu membuat subdirektori baru untuk proyek Statamic Anda di direktori root situs ServBay, /Applications/ServBay/www. Buka Terminal, lalu jalankan perintah berikut:

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

Langkah ini akan membawa Anda ke direktori root situs default ServBay, membuat folder baru bernama servbay-statamic-app, dan masuk ke dalamnya.

Langkah 2: Membuat Proyek Statamic Menggunakan Composer

ServBay sudah dibekali dengan Composer, alat manajemen dependensi PHP. Anda dapat langsung menggunakannya tanpa instalasi tambahan untuk membuat proyek Statamic.

Di dalam direktori servbay-statamic-app yang baru dibuat, jalankan perintah Composer berikut:

composer create-project statamic/statamic .

Perintah tersebut menginstruksikan Composer untuk mengunduh Statamic versi terbaru beserta semua dependensinya, lalu menginstalnya ke direktori saat ini (.). Mohon tunggu hingga proses pengunduhan dan instalasi selesai.

Langkah 3: Konfigurasi Web Server (Menambahkan Situs di ServBay)

Agar ServBay dapat menjalankan proyek Statamic Anda, Anda perlu menambahkan konfigurasi situs baru di aplikasi ServBay.

1. Buka aplikasi ServBay: Jalankan aplikasinya di desktop.

2. Navigasi ke tab "Situs": Pada tampilan ServBay, klik tab "Situs" di bagian atas (catatan: pada versi lama mungkin tertulis "Host").

3. Tambahkan Situs Baru: Klik tombol "Tambah (+)" di pojok kiri bawah untuk membuat konfigurasi situs baru.

4. Isi informasi situs: Pada jendela konfigurasi yang muncul, masukkan informasi berikut:

   • Nama: Nama yang mudah Anda kenali, misal My Statamic Site.
   • Domain: Domain lokal untuk mengakses situs, disarankan memakai akhiran .local seperti servbay-statamic.local. ServBay akan secara otomatis mengatur DNS lokal.
   • Tipe Situs: Pilih PHP.
   • Versi PHP: Pilih versi PHP yang kompatibel dengan Statamic Anda (umumnya dianjurkan versi stabil terbaru).
   • Root Direktori Situs: Hal ini sangat penting. Berkas entri Statamic (index.php) berada pada subdirektori public dalam proyek. Jadi, arahkan root ke: /Applications/ServBay/www/servbay-statamic-app/public.

5. Simpan dan Terapkan Konfigurasi: Setelah mengisi, klik "Simpan". ServBay mungkin akan meminta Anda untuk me-restart layanan agar konfigurasi diterapkan. Lakukan sesuai petunjuk agar web server ServBay (default: Caddy atau Nginx) memuat situs baru.

Langkah 4: Konfigurasi Lingkungan Statamic

Di direktori root proyek, Statamic menggunakan file .env untuk mengelola pengaturan lingkungan (seperti kunci aplikasi, koneksi database, dll).

1. Salin file environment: Proyek Statamic sudah menyertakan file .env.example sebagai template. Pastikan Anda berada di /Applications/ServBay/www/servbay-statamic-app, lalu jalankan perintah di Terminal:

   cp .env.example .env

2. Generate Kunci Aplikasi: Laravel/Statamic membutuhkan kunci aplikasi unik untuk keamanan (misal, enkripsi session). Jalankan perintah Artisan berikut dari root proyek:

   php artisan key:generate

   Perintah ini akan secara otomatis menghasilkan dan mengisi nilai APP_KEY dalam file .env.

Langkah 5: Menjalankan dan Mengakses Statamic

Sekarang, website Statamic Anda sudah dikonfigurasi dan siap dijalankan di ServBay.

1. Akses situs Statamic: Buka browser lalu masukkan domain yang telah Anda konfigurasikan pada Langkah 3, misal https://servbay-statamic.local. Secara default, ServBay akan mengatur sertifikat SSL untuk situs lokal Anda (melalui ServBay User CA atau ServBay Public CA), sehingga Anda dapat mengakses via HTTPS. Anda seharusnya melihat halaman sambutan Statamic.
2. Akses Control Panel: Panel admin Statamic biasanya diakses melalui path /cp. Buka https://servbay-statamic.local/cp di browser Anda. Anda akan melihat halaman login atau setup control panel Statamic.
3. Buat akun administrator: Saat pertama kali mengakses control panel, Anda akan diminta membuat akun admin. Ikuti petunjuk di layar, masukkan username, password, dan email, lalu klik "Buat Akun". Setelah selesai, Anda bisa login dan mulai mengelola situs Statamic Anda.

Langkah 6: Instalasi Plugin dan Tema (Opsional)

Statamic memiliki ekosistem plugin dan tema yang kaya untuk memperluas fitur atau mengubah tampilan.

1. Instalasi plugin: Setelah login ke control panel, Anda bisa menginstal plugin melalui antarmuka panel (biasanya tersedia pada sidebar) atau menggunakan Composer. Instalasi dari control panel umumnya lebih mudah dan visual.
2. Instalasi tema: Hal serupa berlaku untuk tema—dapat di-instal via control panel atau dengan menaruh file tema pada direktori yang sesuai.

Membangun Website dengan Statamic

Setelah instalasi dan konfigurasi berhasil, Anda dapat memanfaatkan fitur-fitur Statamic untuk membangun website. Berikut panduan dasar penggunaannya:

Membuat Konten dan Koleksi

Statamic menggunakan "Koleksi" (Collections) untuk mengelola konten, mirip tipe konten atau halaman pada CMS tradisional.

1. Membuat koleksi: Di control panel Statamic, buka menu "Konten" -> "Koleksi", lalu klik "Buat Koleksi". Tentukan nama koleksi (misal Posts, Pages) serta pengaturan lain seperti struktur rute, blueprint field, dll.
2. Tambah konten: Pada koleksi yang sudah dibuat, klik "Buat Baru" untuk menambah item konten (misalnya artikel blog atau halaman). Isi field-field konten sesuai blueprint yang Anda tetapkan.

Mengatur Menu Navigasi

Anda bisa membuat dan mengatur menu navigasi situs.

1. Buat navigasi: Di control panel, buka "Konten" -> "Navigasi", lalu klik "Buat Navigasi". Beri nama navigasi, misal Main Navigation.
2. Tambah item navigasi: Tarik dan letakkan konten yang sudah dibuat (dari koleksi atau halaman terpisah) ke struktur navigasi untuk mengatur urutan dan hirarki menu.

Kustomisasi Template dan Style

Statamic berbasis Laravel, sehingga Anda dapat menggunakan engine template Blade untuk mengatur tampilan dan layout situs Anda.

1. Edit template: Berkas tampilan umumnya ada di folder resources/views pada root proyek. Anda bisa mengedit atau membuat file Blade (.blade.php) sesuai struktur Statamic (misal, subfolder layouts, partials, collections, dsb). Contoh, edit layout di resources/views/layouts/default.blade.php untuk mengubah kerangka halaman web.

   <!-- 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>
       {{-- Referensi CSS hasil kompilasi --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- Contoh: render navigasi dengan nama 'main_navigation' --}}
           @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>
           {{-- Render isi halaman saat ini --}}
           @yield('content')
       </main>
       {{-- Referensi JavaScript hasil kompilasi --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Menambah style dan script: Proyek Statamic umumnya menggunakan Laravel Mix atau Vite untuk kompilasi front-end. File CSS dan JavaScript mentah biasanya berada di resources/css dan resources/js.

   Contoh, tulis style CSS di resources/css/app.css:

   /* 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;
   }

   Tulis kode JavaScript di resources/js/app.js:

   // resources/js/app.js
   console.log('Statamic frontend assets loaded!');
   
   // Contoh: interaksi sederhana
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`Hovering over: ${item.textContent}`);
           });
       });
   });

3. Kompilasi aset front-end: Untuk mengubah file mentah menjadi CSS & JS siap pakai di browser, jalankan perintah kompilasi. Proyek Statamic biasanya menyertakan file package.json, jadi Anda dapat memakai npm atau yarn untuk instalasi dependensi dan kompilasi. ServBay sudah mendukung Node.js sehingga Anda cukup menjalankan:

   npm install
   npm run dev

   npm install akan mengunduh dependensi dari package.json (misal: Laravel Mix/Vite, Tailwind CSS, Vue/React, dll). npm run dev menjalankan kompilasi mode pengembangan yang biasanya menghasilkan file belum tercompress serta source map untuk debugging. Untuk produksi, gunakan npm run prod atau npm run build.

Ringkasan

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil menginstal, mengonfigurasi, dan memahami dasar penggunaan Statamic CMS di lingkungan pengembangan lokal ServBay. ServBay menawarkan lingkungan terintegrasi (PHP, Composer, web server, manajemen situs mudah, dan dukungan Node.js) yang sangat memudahkan workflow pengembangan Statamic lokal. Kini Anda dapat memanfaatkan struktur file Statamic yang fleksibel serta fitur-fiturnya untuk membangun dan mengembangkan website secara cepat dan efisien.