การติดตั้งและตั้งค่า Statamic ในสภาพแวดล้อม ServBay

Statamic คือระบบบริหารจัดการเนื้อหา (CMS) สมัยใหม่ที่พัฒนาขึ้นบนเฟรมเวิร์ก Laravel มีจุดเด่นด้านความยืดหยุ่นและฟีเจอร์ทรงพลัง เหมาะสำหรับการสร้างเว็บไซต์หลากหลายประเภท Statamic มีจุดเด่นตรงที่จัดเก็บเนื้อหาและการตั้งค่าต่างๆ ด้วยไฟล์ระบบเป็นหลัก (file-based CMS) แต่ก็สามารถเลือกใช้ฐานข้อมูลได้เช่นกัน

บทความนี้จะนำเสนอขั้นตอนอย่างละเอียดในการติดตั้งและตั้งค่า Statamic บน ServBay ซึ่งเป็นสภาพแวดล้อมพัฒนาเว็บแบบ local ที่ครบเครื่องบน macOS โดยจะใช้ Composer ในการติดตั้ง ทั้งนี้ ServBay มีทุกอย่างที่ Statamic ต้องการ ไม่ว่าจะเป็น PHP, Composer และระบบจัดการเว็บไซต์ที่ใช้ง่าย

ขั้นตอนการติดตั้ง Statamic

การติดตั้ง Statamic บน ServBay นั้นง่ายและมีประสิทธิภาพ ทำตามขั้นตอนดังนี้

ขั้นตอนที่ 1: สร้างไดเรกทอรีโปรเจกต์

เริ่มต้นโดยการสร้างโฟลเดอร์ย่อยใหม่ภายใต้ไดเรกทอรีรากของเว็บไซต์ ServBay ที่ /Applications/ServBay/www เปิดเทอร์มินัล และรันคำสั่ง:

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

คำสั่งนี้จะนำคุณไปยังรากเว็บไซต์หลักของ ServBay สร้างโฟลเดอร์ใหม่ชื่อ servbay-statamic-app และเข้าสู่โฟลเดอร์นั้น

ขั้นตอนที่ 2: สร้างโปรเจกต์ Statamic ด้วย Composer

ServBay ได้ติดตั้ง Composer มาไว้ล่วงหน้าแล้ว (ไม่ต้องติดตั้งเพิ่ม) Composer คือ เครื่องมือจัดการ dependency สำหรับ PHP ให้คุณใช้ติดตั้ง Statamic ได้ทันที

ขณะที่อยู่ในโฟลเดอร์ servbay-statamic-app ที่เพิ่งสร้าง เปิดเทอร์มินัลแล้วรันคำสั่ง:

composer create-project statamic/statamic .

คำสั่งนี้จะบอกให้ Composer ดาวน์โหลด Statamic เวอร์ชันล่าสุดพร้อม dependency ที่เกี่ยวข้องและติดตั้งทั้งหมดในไดเรกทอรีปัจจุบัน (.) โปรดรอจนติดตั้งสมบูรณ์

ขั้นตอนที่ 3: ตั้งค่าเว็บเซิร์ฟเวอร์ (เพิ่มเว็บไซต์ใน ServBay)

เพื่อให้ ServBay สามารถให้บริการเว็บไซต์ Statamic ของคุณได้ จะต้องเพิ่มการตั้งค่าเว็บไซต์ใหม่ในแอป ServBay

1. เปิดแอปพลิเคชัน ServBay: รันแอปเดสก์ท็อป ServBay

2. ไปที่แท็บ "เว็บไซต์": จากอินเทอร์เฟซของ ServBay คลิกแท็บ “เว็บไซต์” ที่ด้านบน (เวอร์ชันเก่าอาจแสดงเป็น “โฮสต์”)

3. เพิ่มเว็บไซต์ใหม่: คลิกปุ่มเครื่องหมายบวก (+) มุมซ้ายล่างเพื่อเพิ่มการตั้งค่าเว็บไซต์ใหม่

4. กรอกข้อมูลเว็บไซต์: ในหน้าต่างป็อปอัพ ให้กรอกข้อมูลต่อไปนี้:

   • ชื่อ: ใส่ชื่อที่จำง่าย เช่น My Statamic Site
   • โดเมน: ระบุชื่อโดเมนสำหรับพัฒนาเว็บ local แนะนำให้ลงท้ายด้วย .local เช่น servbay-statamic.local (ServBay จะตั้งค่า DNS ภายในให้อัตโนมัติ)
   • ประเภทเว็บไซต์: เลือก PHP
   • เวอร์ชัน PHP: เลือกเวอร์ชันที่เข้ากันได้กับ Statamic (โดยทั่วไปแนะนำให้ใช้เวอร์ชันล่าสุดที่เสถียร)
   • ไดเรกทอรีรากของเว็บไซต์: ข้อสำคัญ - Statamic ใช้ index.php ภายใต้โฟลเดอร์ public ดังนั้นไดเรกทอรีรากควรตั้งเป็น /Applications/ServBay/www/servbay-statamic-app/public

5. บันทึกและนำไปใช้: เมื่อตั้งค่าครบ คลิก “บันทึก” ServBay อาจแจ้งให้รีสตาร์ท service เพื่อให้การตั้งค่ามีผล ให้ทำตามคำแนะนำ เซิร์ฟเวอร์เว็บ (ปกติใช้ Caddy หรือ Nginx) จะโหลดค่าตั้งค่าใหม่อัตโนมัติ

ขั้นตอนที่ 4: ตั้งค่าสภาพแวดล้อม Statamic

Statamic ใช้ไฟล์ .env ในไดเรกทอรีรากโปรเจกต์เพื่อการตั้งค่าสภาพแวดล้อม เช่น คีย์แอป, การเชื่อมฐานข้อมูล เป็นต้น

1. คัดลอกไฟล์ .env: ในโปรเจกต์ Statamic จะมีไฟล์ตัวอย่างชื่อ .env.example อยู่แล้ว ขณะอยู่ที่ /Applications/ServBay/www/servbay-statamic-app ให้รัน:

   cp .env.example .env

2. สร้างคีย์แอป: Laravel/Statamic ต้องใช้คีย์แอปที่ไม่ซ้ำกันเพื่อความปลอดภัย (เช่นเข้ารหัส session และข้อมูลสำคัญอื่นๆ) ที่ root โปรเจกต์ รันคำสั่ง Artisan ดังนี้

   php artisan key:generate

   คำสั่งนี้จะสร้างค่า APP_KEY และเติมลงในไฟล์ .env ให้อัตโนมัติ

ขั้นตอนที่ 5: รันและเข้าถึง Statamic

ตอนนี้ เว็บไซต์ Statamic ของคุณได้ตั้งค่าและรันอยู่ใน ServBay เรียบร้อยแล้ว

1. เข้าถึงเว็บไซต์ Statamic: เปิดเบราว์เซอร์แล้วกรอกโดเมนที่ตั้งไว้ในขั้นตอนที่ 3 (เช่น https://servbay-statamic.local) ServBay ตั้งค่า SSL certificate ให้อัตโนมัติโดยใช้ User CA หรือ Public CA คุณจะสามารถเข้าถึงด้วย HTTPS และจะพบหน้าต้อนรับของ Statamic
2. เข้าสู่แผงควบคุม (Control Panel): แผงควบคุมของ Statamic เข้าผ่าน /cp เช่น https://servbay-statamic.local/cp จะเห็นหน้าล็อกอินหรือหน้าตั้งค่าครั้งแรก
3. สร้างบัญชีแอดมิน: เมื่อเข้าครั้งแรก ระบบจะให้สร้างบัญชีผู้ดูแลกรอก username, password และ email ตามหน้าจอ แล้วคลิก “สร้างบัญชี” เสร็จขั้นตอนนี้ คุณสามารถล็อกอินและจัดการเว็บไซต์ Statamic ได้เลย

ขั้นตอนที่ 6: ติดตั้งปลั๊กอินและธีม (ไม่บังคับ)

Statamic มีระบบปลั๊กอินและธีมที่หลากหลาย สามารถเพิ่มความสามารถฟีเจอร์ใหม่ หรือเปลี่ยน look & feel ของเว็บได้

1. ติดตั้งปลั๊กอิน: หลังล็อกอินเข้าแผงควบคุม Statamic สามารถติดตั้งปลั๊กอินผ่านเมนูใน control panel (โดยปกติจะอยู่แถบแถบนำทางซ้าย) หรือผ่านคำสั่ง composer ก็ได้ ส่วนใหญ่ใช้วิธีผ่าน control panel จะใช้ง่ายกว่า
2. ติดตั้งธีม: เช่นเดียวกัน สามารถติดตั้งธีมผ่านแผงควบคุม หรือวางไฟล์ธีมในไดเรกทอรีที่กำหนดไว้

การสร้างเว็บไซต์ด้วย Statamic

เมื่อคุณติดตั้งและตั้งค่า Statamic เสร็จแล้ว สามารถเริ่มสร้างเว็บไซต์ของคุณโดยใช้ฟีเจอร์ในตัวต่อไปนี้

สร้างเนื้อหาและคอลเลคชัน

Statamic จัดเนื้อหาโดยใช้ “คอลเลคชัน” (Collections) คล้ายหมวดหมู่หรือประเภทบทความใน CMS ทั่วไป

1. สร้างคอลเลคชัน: เข้าสู่แผงควบคุม Statamic ไปที่เมนู “เนื้อหา” > “คอลเลคชัน” แล้วคลิก “สร้างคอลเลคชัน” จากนั้นกำหนดชื่อ (เช่น Posts, Pages) และการตั้งค่าอื่นๆ (โครงสร้างเส้นทาง, blueprint ข้อมูล ฯลฯ)
2. สร้างรายการเนื้อหา: ภายใต้คอลเลคชันที่สร้างใหม่ คลิก “สร้างใหม่” เพื่อเพิ่มเนื้อหา เช่น บทความ หรือหน้าเพจ แล้วกรอกข้อมูลเนื้อหาตาม blueprint ที่ตั้งไว้

กำหนดและปรับแต่งเมนูนำทางเว็บไซต์

สามารถสร้างและปรับโครงสร้างเมนูเว็บไซต์ได้ด้วย

1. สร้างเมนูนำทาง: ในแผงควบคุม Statamic ไปที่ “เนื้อหา” > “นำทาง” แล้วคลิก “สร้างนำทาง” ระบุชื่อ (เช่น Main Navigation)
2. เพิ่มรายการเมนู: ลากเนื้อหาที่สร้างไว้ (ในคอลเลคชันหรือหน้าเพจเดี่ยว) ลงในโครงสร้างเมนูแล้วจัดลำดับได้ตามต้องการ

ปรับแต่งธีมและสไตล์

Statamic ร่วมกับ Laravel สนับสนุน Blade template เพื่อการออกแบบและควบคุมโครงสร้างเว็บได้อิสระ

1. แก้ไขเทมเพลต: ไฟล์เทมเพลตของเว็บไซต์อยู่ใต้ resources/views โดยปกติจะใช้งานร่วมกับโฟลเดอร์ย่อยเช่น layouts, partials, collections เป็นต้น สามารถแก้ไขหรือเพิ่มไฟล์ Blade (.blade.php) ได้ เช่น แก้ไขโครงร่างเว็บใน resources/views/layouts/default.blade.php

   <!-- 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>
       {{-- เรียกใช้ CSS ที่คอมไพล์แล้ว --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- ตัวอย่าง: แสดงเมนูนำทางชื่อ '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>
           {{-- แสดงเนื้อหาของหน้าปัจจุบัน --}}
           @yield('content')
       </main>
       {{-- เรียกใช้ JavaScript ที่คอมไพล์แล้ว --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. เพิ่มสไตล์และโค้ดสคริปต์: Statamic รองรับ Laravel Mix หรือ Vite เป็นต้นฉบับสำหรับคอมไพล์ไฟล์ frontend ไฟล์ต้นฉบับ CSS และ JavaScript จะอยู่ใน resources/css และ resources/js ตามลำดับ

   เช่น ใส่ CSS ของคุณใน 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;
   }

   และใส่ JavaScript ไว้ใน resources/js/app.js:

   // resources/js/app.js
   console.log('Statamic frontend assets loaded!');
   
   // ตัวอย่าง: ฟังก์ชันโต้ตอบง่ายๆ
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`Hovering over: ${item.textContent}`);
           });
       });
   });

3. คอมไพล์ resource ด้านหน้า (frontend): เพื่อให้ browser อ่าน CSS/JS ที่เขียนไว้ได้ ต้องทำการคอมไพล์ resource เหล่านี้ โดยปกติ Statamic จะมาพร้อมไฟล์ package.json สามารถติดตั้ง dependency frontend แล้วคอมไพล์ได้เลย ServBay รองรับ Node.js โดยสมบูรณ์ รันคำสั่ง:

   npm install
   npm run dev

   npm install จะติดตั้ง dependency frontend ทั้งหมด เช่น Laravel Mix/Vite, Tailwind CSS, Vue/React ส่วน npm run dev จะ build ไฟล์สำหรับโหมดพัฒนา (dev) ได้ไฟล์ที่ไม่บีบอัด เหมาะทดสอบและดีบั๊ก ใน production สามารถใช้ npm run prod หรือ npm run build

สรุป

เมื่อดำเนินการตามขั้นตอนข้างต้น คุณก็จะติดตั้งและตั้งค่า Statamic CMS บน ServBay ได้เรียบร้อย ServBay ให้องค์ประกอบที่ครบถ้วน ทั้ง PHP, Composer, เว็บเซิร์ฟเวอร์, การจัดการเว็บไซต์แบบคลิกเดียว ตลอดจนรองรับ Node.js ซึ่งช่วยให้การพัฒนา Statamic บนเครื่องของคุณเป็นไปอย่างราบรื่น ต่อไปคุณสามารถใช้ประโยชน์จากโครงสร้างไฟล์และความสามารถของ Statamic เพื่อสร้างและพัฒนาเว็บไซต์ของคุณได้อย่างรวดเร็วและมีประสิทธิภาพ