Memasang dan Mengkonfigurasi Statamic dalam Persekitaran ServBay

Statamic ialah sistem pengurusan kandungan (CMS) moden berasaskan kerangka kerja Laravel, terkenal dengan kefleksibelan dan ciri-cirinya yang hebat, sesuai untuk membina pelbagai jenis laman web. Salah satu keunikan Statamic ialah ia menggunakan sistem fail untuk menyimpan kandungan dan konfigurasi secara lalai, tetapi turut menyokong penggunaan pangkalan data jika diperlukan.

Dokumen ini akan membimbing anda langkah demi langkah mengenai cara memasang dan mengkonfigurasi Statamic menggunakan Composer dalam persekitaran pembangunan web tempatan ServBay yang serba lengkap. ServBay menyediakan persekitaran PHP yang diperlukan, sokongan Composer, dan pengurusan konfigurasi tapak yang mudah untuk Statamic.

Langkah-langkah Memasang Statamic

Proses memasang Statamic dalam persekitaran ServBay adalah mudah dan efisien. Ikuti langkah-langkah di bawah:

Langkah 1: Cipta Direktori Projek

Mula-mula, anda perlu mencipta subdirektori baharu untuk projek Statamic anda di direktori root tapak ServBay, iaitu /Applications/ServBay/www. Buka Terminal dan jalankan arahan berikut:

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

Ini akan membawa anda ke direktori root laman web lalai ServBay, mencipta folder baharu bernama servbay-statamic-app, dan seterusnya masuk ke folder tersebut.

2: Cipta Projek Statamic dengan Composer

ServBay telah pun menyediakan Composer, iaitu alat pengurusan kebergantungan PHP. Anda boleh terus menggunakannya tanpa pemasangan tambahan untuk mencipta projek Statamic.

Di direktori servbay-statamic-app yang baru anda cipta, jalankan arahan Composer berikut:

composer create-project statamic/statamic .

Arahan ini akan mengarahkan Composer untuk memuat turun versi terkini Statamic dan segala kebergantungannya ke direktori semasa (.). Sila tunggu sehingga proses muat turun dan pemasangan selesai.

Langkah 3: Konfigurasi Pelayan Web (Tambah Tapak di ServBay)

Agar ServBay dapat menghoskan projek Statamic anda, anda perlu menambah konfigurasi tapak baru dalam aplikasi ServBay.

1. Buka Aplikasi ServBay: Lancarkan aplikasi desktop ServBay.

2. Navigasi ke Tab "Tapak": Dalam antara muka ServBay, klik tab "Tapak" di bahagian atas (Untuk versi lama, ia mungkin tertera sebagai "Hos").

3. Tambah Tapak Baru: Klik butang "Tambah (+)" di sudut kiri bawah untuk menambah konfigurasi tapak yang baru.

4. Lengkapkan Maklumat Tapak: Dalam tetingkap konfigurasi yang muncul, isikan maklumat berikut:

   • Nama: Beri nama yang mudah dikenali, contohnya My Statamic Site.
   • Nama Domain: Domain pembangunan tempatan yang digunakan untuk mengakses laman web, disarankan guna akhiran .local seperti servbay-statamic.local. ServBay akan mengkonfigurasi penyelesaian DNS tempatan secara automatik.
   • Jenis Tapak: Pilih PHP.
   • Versi PHP: Pilih versi PHP yang serasi dengan projek Statamic anda (disarankan versi stabil terkini).
   • Root Direktori Tapak: Langkah ini sangat penting. Fail kemasukan Statamic, index.php, berada di subdirektori public dalam projek anda. Jadi, set root direktori tapak kepada: /Applications/ServBay/www/servbay-statamic-app/public.

5. Simpan dan Aktifkan Konfigurasi: Selepas lengkap, klik butang "Simpan". ServBay mungkin meminta anda untuk memulakan semula servis bagi mengaplikasikan perubahan konfigurasi. Ikuti arahan berkenaan untuk memastikan pelayan web ServBay (lalai: Caddy atau Nginx) memuatkan konfigurasi tapak baharu anda.

Langkah 4: Konfigurasi Persekitaran Statamic

Di direktori root projek, Statamic menggunakan fail .env untuk mengurus konfigurasi persekitaran (seperti kunci aplikasi, sambungan pangkalan data dan sebagainya).

1. Salin Fail Persekitaran: Projek Statamic menyertakan fail contoh .env.example sebagai templat. Dengan Terminal (di direktori /Applications/ServBay/www/servbay-statamic-app), jalankan arahan berikut:

   cp .env.example .env

2. Jana Kunci Aplikasi: Laravel/Statamic memerlukan kunci aplikasi unik demi keselamatan seperti penyulitan Sesi dan data sensitif lain. Jalankan arahan Artisan berikut di root projek untuk menjana kunci ini:

   php artisan key:generate

   Arahan ini akan secara automatik mengisi nilai APP_KEY dalam fail .env.

Langkah 5: Jalankan & Akses Statamic

Kini, laman Statamic anda telah dikonfigurasi dan berjalan di dalam ServBay.

1. Layari Tapak Statamic Anda: Buka pelayar web dan masukkan nama domain yang anda tetapkan di langkah 3, contohnya https://servbay-statamic.local. ServBay akan menyediakan sijil SSL untuk laman tempatan anda (melalui ServBay User CA atau ServBay Public CA), membolehkan akses HTTPS. Anda sepatutnya melihat halaman selamat datang Statamic.
2. Akses Panel Kawalan: Panel admin Statamic boleh diakses melalui laluan /cp. Di pelayar, lawati https://servbay-statamic.local/cp. Anda akan melihat halaman log masuk atau tetapan untuk panel kawalan Statamic.
3. Cipta Akaun Pentadbir: Kali pertama mengakses panel kawalan, sistem akan menggesa anda untuk mencipta akaun pentadbir. Isi nama pengguna, kata laluan dan alamat emel mengikut arahan, kemudian klik "Cipta Akaun". Selesai proses ini, anda boleh log masuk dan mula menguruskan laman Statamic anda.

Langkah 6: Pasang Plugin dan Tema (Pilihan)

Statamic mempunyai ekosistem plugin dan tema yang kaya untuk mengembangkan ciri dan penampilan laman.

1. Pasang Plugin: Selepas log masuk ke panel kawalan Statamic, anda boleh memasang plugin melalui antara muka panel (biasanya dalam navigasi kiri) atau dengan arahan Composer. Kaedah pemasangan melalui panel lebih intuitif untuk pemula.
2. Pasang Tema: Anda juga boleh menambah tema baharu melalui panel kawalan atau dengan meletakkan fail tema di direktori yang ditetapkan.

Membina Laman Web dengan Statamic

Selepas pemasangan dan konfigurasi Statamic berjaya, anda boleh mula memanfaatkan cirinya untuk membina laman web anda. Berikut adalah beberapa arahan asas:

Cipta Kandungan & Koleksi

Statamic menggunakan konsep "koleksi" (Collections) untuk mengatur kandungan, seakan jenis pos atau halaman pada CMS tradisional.

1. Cipta Koleksi: Dalam panel kawalan Statamic, navigasi ke "Kandungan" -> "Koleksi" dan klik "Cipta Koleksi". Tetapkan nama koleksi (contohnya Posts, Pages) dan konfigurasi lain (seperti laluan, pelan medan dan sebagainya).
2. Cipta Item Kandungan: Di bawah koleksi yang anda cipta, klik "Tambah Baharu" untuk menambah kandungan (seperti artikel blog atau halaman). Lengkapkan kandungan mengikut pelan medan koleksi berkenaan.

Konfigurasi Menu Navigasi

Anda boleh mengurus dan mencipta menu navigasi laman web dengan mudah.

1. Cipta Navigasi: Dalam panel kawalan Statamic, navigasi ke "Kandungan" -> "Navigasi", kemudian klik "Cipta Navigasi". Namakan menu navigasi anda (contohnya Main Navigation).
2. Tambah Item Navigasi: Seret dan lepaskan item kandungan (dari koleksi atau halaman bebas) ke struktur navigasi, mengatur hierarki menu.

Ubah Suai Templat & Gaya

Statamic dibina di atas Laravel dan menyokong enjin templat Blade untuk mengatur susun atur serta penyampaian kandungan.

1. Edit Templat: Fail pandangan tapak web lazimnya terletak dalam direktori resources/views di root projek. Anda boleh edit atau cipta fail Blade (.blade.php) berdasarkan struktur templat Statamic (biasanya melibatkan subdirektori layouts, partials, collections dan sebagainya) untuk menyesuaikan struktur HTML halaman. Sebagai contoh, edit fail susun atur resources/views/layouts/default.blade.php untuk ubah kerangka laman secara keseluruhan.

   <!-- 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>
       {{-- Import CSS yang telah dikompilasi --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- Contoh: Paparkan navigasi bernama '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>
           {{-- Paparkan kandungan halaman semasa --}}
           @yield('content')
       </main>
       {{-- Import JavaScript yang telah dikompilasi --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Tambah Gaya & Skrip: Projek Statamic biasanya menggunakan alat seperti Laravel Mix atau Vite untuk menyusun sumber frontend. Fail asal CSS dan JavaScript biasanya diletakkan dalam direktori resources/css dan resources/js.

   Contohnya, tambahkan gaya anda dalam 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;
   }

   Tuliskan skrip JavaScript anda dalam resources/js/app.js:

   // resources/js/app.js
   console.log('Aset frontend Statamic telah dimuatkan!');
   
   // Contoh: Interaksi ringkas
   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 Sumber Frontend: Untuk membina fail CSS dan JS yang dapat digunakan di pelayar, jalankan arahan kompilasi. Projek Statamic lazimnya mengandungi fail package.json, jadi gunakan npm atau yarn untuk memasang kebergantungan serta menjalankan skrip kompilasi. ServBay menyokong Node.js, jadi anda boleh terus jalankan:

   npm install
   npm run dev

   npm install akan memasang semua kebergantungan frontend (seperti Laravel Mix/Vite, Tailwind CSS, Vue/React dan sebagainya) berdasarkan package.json. npm run dev akan menjalankan kompilasi dalam mod pembangunan, menghasilkan fail sumber tanpa pemampatan serta memudahkan penyahpepijatan. Untuk mod produksi, guna npm run prod atau npm run build.

Ringkasan

Dengan mengikuti langkah-langkah di atas, anda telah berjaya memasang, mengkonfigurasi, dan mula memahami penggunaan Statamic CMS dalam persekitaran pembangunan tempatan ServBay yang hebat. Persekitaran serba lengkap yang disediakan ServBay (PHP, Composer, pelayan web, pengurusan tapak yang mudah serta sokongan Node.js) sangat memudahkan dan mempercepat pembangunan Statamic anda. Kini anda boleh memanfaatkan kefleksibelan struktur fail Statamic serta cirinya yang menyeluruh untuk membangunkan serta iterasi projek laman web anda dengan lebih lancar.