การติดตั้งและตั้งค่า Kirby CMS ใน ServBay

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

คู่มือนี้จะช่วยแนะนำวิธีติดตั้งและตั้งค่า Kirby 4.2 Starterkit โดยใช้ Composer บน ServBay ซึ่งเป็นสภาพแวดล้อมเว็บสำหรับการพัฒนาที่ถูกออกแบบมาโดยเฉพาะสำหรับนักพัฒนา ServBay มาพร้อม PHP, เว็บเซิร์ฟเวอร์ (เช่น Caddy หรือ Nginx) และ Composer ที่ตั้งค่าพร้อมใช้งาน เหมาะสมอย่างยิ่งสำหรับการพัฒนา Kirby แบบโลคอล

ข้อกำหนดเบื้องต้น

ก่อนเริ่มต้น กรุณาตรวจสอบว่าคุณได้:

1. ติดตั้งและเปิดใช้งาน ServBay บน macOS แล้ว
2. เปิดใช้เวอร์ชัน PHP ที่ต้องการใน ServBay (ตัวอย่างนี้ใช้ PHP 8.2)
3. Composer ใน ServBay ถูกเตรียมไว้ให้พร้อมใช้งาน ไม่ต้องติดตั้งแยก

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

ขั้นตอนโดยละเอียดในการติดตั้งและตั้งค่า Kirby บน ServBay มีดังนี้:

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

ก่อนอื่น เปิดแอปพลิเคชัน Terminal จากนั้นไปที่โฟลเดอร์ root ของเว็บไซต์ใน ServBay /Applications/ServBay/www แล้วสร้างไดเรกทอรีโปรเจกต์ใหม่ โดยในตัวอย่างนี้จะใช้ชื่อโปรเจกต์ว่า servbay-kirby-app

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

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

ServBay ติดตั้ง Composer ไว้แล้ว สามารถใช้งานได้ทันทีภายในเทอร์มินัล ขณะที่อยู่ในโฟลเดอร์ servbay-kirby-app ให้รันคำสั่ง Composer ดังนี้เพื่อดาวน์โหลดและสร้าง Starterkit ของ Kirby:

composer create-project getkirby/starterkit .

คำสั่งนี้จะดาวน์โหลดไฟล์หลักของ Kirby, dependencies และ Starterkit ที่มีเนื้อหาและเทมเพลตพื้นฐานไปยังโฟลเดอร์ปัจจุบัน (.)

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

เพื่อให้เว็บเซิร์ฟเวอร์ใน ServBay (เช่น Caddy หรือ Nginx) ให้บริการโปรเจกต์ Kirby ของคุณได้ จำเป็นต้องเพิ่มการตั้งค่าเว็บไซต์ใหม่ในแอป ServBay

1. เปิด ServBay Application: เริ่มต้นโปรแกรม ServBay
2. เข้าสู่การจัดการเว็บไซต์: คลิกที่แท็บ "เว็บไซต์" ในแถบเมนูด้านข้างของ ServBay
3. เพิ่มเว็บไซต์ใหม่: กดปุ่ม "+" หรือเลือกเพิ่มเว็บไซต์จากเมนู
4. กรอกข้อมูลเว็บไซต์: ในหน้าต่างตั้งค่าที่ปรากฏ ให้กรอกข้อมูลดังนี้:
   • ชื่อ: ตั้งชื่อที่จดจำง่าย เช่น My Kirby Site
   • โดเมน: กำหนดโดเมนสำหรับโลคอลแนะนำให้ใช้นามสกุล .local หรือ .servbay.demo เช่น servbay-kirby.local ServBay จะคอนฟิก DNS โลคอลให้อัตโนมัติ
   • ประเภทเว็บไซต์: เลือก PHP เนื่องจาก Kirby คือแอปพลิเคชัน PHP
   • เวอร์ชัน PHP: เลือกเวอร์ชันที่ต้องการใช้ เช่น 8.2 ตรวจสอบให้ตรงตามข้อกำหนดขั้นต่ำของ Kirby
   • รากของเว็บไซต์: ระบุไดเรกทอรีที่มีไฟล์ index.php ของ Kirby ในกรณีของ Starterkit คือโฟลเดอร์โปรเจกต์โดยตรง เลือกหรือพิมพ์ /Applications/ServBay/www/servbay-kirby-app
5. บันทึกการตั้งค่า: เมื่อแน่ใจว่าข้อมูลถูกต้อง กดปุ่มบันทึก ServBay จะบังคับใช้การตั้งค่าใหม่นี้ทันที หรืออาจรีสตาร์ทเว็บเซิร์ฟเวอร์ให้เอง

ขั้นตอนที่ 4: ตั้งค่าเบื้องต้นของ Kirby

ไฟล์การตั้งค่าหลักของ Kirby คือ site/config/config.php สำหรับ Starterkit ได้ตั้งค่าเบื้องต้นพร้อมใช้งานไว้แล้ว คุณสามารถแก้ไขเพื่อปรับค่าตามต้องการ เช่น

• เปิดโหมด debug (c::set('debug', true);)
• กำหนดภาษาสำหรับแผงควบคุม (Panel)
• เพิ่มเส้นทาง (route) และการตั้งค่ากำหนดเองอื่น ๆ

ภายในโฟลเดอร์โปรเจกต์ จะมีโฟลเดอร์ content ซึ่ง Kirby Starterkit สร้างไว้เพื่อเก็บข้อมูลเนื้อหาทั้งหมดของเว็บไซต์

ขั้นตอนที่ 5: รันและเข้าถึงเว็บไซต์ Kirby

หลังตั้งค่าใน ServBay เรียบร้อยแล้ว สามารถเข้าชมเว็บไซต์ Kirby ผ่านโดเมนที่สร้างไว้ได้ทันที

1. ตรวจสอบว่า ServBay ทำงานอยู่: แน่ใจว่าแอป ServBay และเซิร์ฟเวอร์ (Caddy หรือ Nginx) รวมถึง PHP ถูกเปิดใช้งานแล้ว
2. เข้าชมเว็บไซต์: เปิดเว็บเบราว์เซอร์แล้วพิมพ์โดเมนที่ตั้งค่าขึ้นในขั้นตอนที่ 3 เช่น https://servbay-kirby.local

คุณควรเห็นหน้า Welcome ของ Kirby Starterkit โดย ServBay เปิดใช้ HTTPS เป็นค่าเริ่มต้น จึงแนะนำให้ใช้ https:// เข้าถึง

ขั้นตอนที่ 6: ติดตั้งและใช้งาน Kirby Panel (ทางเลือก)

Kirby มีแผงควบคุม (Panel) ที่ทรงพลังสำหรับจัดการเนื้อหา ผู้ใช้ และการตั้งค่าเว็บไซต์

1. เข้าสู่หน้าติดตั้ง Panel: ในเบราว์เซอร์ เข้าโดเมนของคุณคั่นด้วย /panel เช่น https://servbay-kirby.local/panel
2. สร้างบัญชีผู้ดูแลระบบ: หากเป็นการเข้าครั้งแรก จะเจอหน้าจอการติดตั้ง Panel ให้กรอกข้อมูลผู้ใช้ รหัสผ่าน และอีเมล เพื่อสร้างแอดมินคนแรก
3. ล็อกอินเข้าสู่ Panel: เมื่อสร้างบัญชีแล้ว จะสามารถล็อกอินเข้า Panel เพื่อจัดการเนื้อหาเว็บไซต์ผ่านอินเทอร์เฟซกราฟิกได้ทันที

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

เมื่อติดตั้งและตั้งค่า Kirby CMS แบบโลคอลแล้ว พร้อมสำหรับการสร้างเว็บไซต์ด้วยข้อดีของการจัดเก็บเนื้อหาแบบไฟล์ไดรฟ์แล้ว โดยแนวคิดและฟีเจอร์สำคัญของ Kirby มีดังนี้

โครงสร้างเนื้อหา (Content)

Kirby จะเก็บข้อมูลเนื้อหาไว้ในโฟลเดอร์ content แต่ละหน้า (page) จะเป็นโฟลเดอร์ย่อยภายในนั้น ไฟล์เนื้อหาของแต่ละหน้ามักเป็นไฟล์ข้อความ (เช่น page.txt) ที่รองรับ syntax คล้าย Markdown

ตัวอย่าง: สร้างหน้า "เกี่ยวกับเรา"

ที่ Terminal:

cd /Applications/ServBay/www/servbay-kirby-app
mkdir content/about
echo "Title: เกี่ยวกับเรา\n----\nนี่คือเนื้อหาของหน้าเกี่ยวกับเรา." > content/about/about.txt

จากนั้นเข้าชม https://servbay-kirby.local/about (หากเทมเพลตของคุณรองรับ)

เทมเพลต (Templates)

ไฟล์เทมเพลตอยู่ที่ site/templates และกำหนดวิธีแสดงผลของแต่ละหน้า ชื่อไฟล์มักจะตรงกับชื่อโฟลเดอร์เนื้อหาหรือบลูพริ้นต์ (เช่น about.php สำหรับ content/about)

ตัวอย่าง: สร้างเทมเพลต about.php

ในไฟล์ site/templates/about.php:

<?php snippet('header') ?>

<main>
  <h1><?= $page->title() ?></h1>
  <div class="text">
    <?= $page->text()->kt() // แสดงผลโดย KirbyText ?>
  </div>
</main>

<?php snippet('footer') ?>

ตัวอย่างข้างต้นใช้ฟังก์ชั่น snippet() เพื่อดึงส่วนหัว-ท้ายมาใช้งานซ้ำ

บลูพริ้นต์ (Blueprints)

ไฟล์บลูพริ้นต์อยู่ใน site/blueprints เพื่อกำหนดโครงสร้างและฟิลด์ของแต่ละหน้าใน Panel เขียนด้วยไฟล์ YAML

ตัวอย่าง: สร้าง about.yml Blueprint

ในไฟล์ site/blueprints/pages/about.yml:

title: หน้าเกี่ยวกับ

columns:
  - width: 2/3
    fields:
      text:
        label: เนื้อหา
        type: textarea
        size: large
        buttons:
          - bold
          - italic
          - link
          - email

  - width: 1/3
    fields:
      # ฟิลด์สำหรับ Sidebar เช่น อัพโหลดภาพ
      cover_image:
        label: ภาพปก
        type: files
        max: 1
        uploads:
          template: image

เมื่อสร้าง Blueprint นี้แล้ว ตอนสร้างหน้า "เกี่ยวกับ" ใหม่ใน Panel ก็จะเห็นฟิลด์ต่าง ๆ ที่กำหนดขึ้น

Snippet (ส่วนย่อยที่ใช้ซ้ำ)

Snippet คือไฟล์ PHP สำหรับนำกลับมาใช้ซ้ำ มักใช้ในส่วนหัว ท้าย เมนู นำไปไว้ใน site/snippets

Controller และ Model

สำหรับตรรกะที่ซับซ้อนมากขึ้น สามารถใช้ Controller (site/controllers) เพื่อประมวลผลข้อมูล หรือสร้าง Model (site/models) เพื่อกำหนดคลาสของเพจแบบ custom

สินทรัพย์ (Assets)

ทรัพยากรคงที่ เช่น CSS, JavaScript หรือภาพ จัดเก็บในโฟลเดอร์ assets ที่ root ของโปรเจกต์ ใช้ฟังก์ชั่น url('assets/...') ในเทมเพลตช่วยดึง URL ได้สะดวก

ตัวอย่าง: เรียกใช้งาน CSS และ JS

ในการใช้งานใน site/templates/default.php หรือ site/snippets/header.php:

<link rel="stylesheet" href="<?= url('assets/css/style.css') ?>">
<script src="<?= url('assets/js/script.js') ?>"></script>

สรุป

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