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

ภาพรวม

Sculpin เป็นเครื่องมือสร้างเว็บไซต์สถิต (Static Site Generator) ที่มีประสิทธิภาพและยืดหยุ่น สร้างขึ้นด้วย PHP เหมาะอย่างยิ่งสำหรับการสร้างบล็อก เว็บไซต์เอกสาร หรือโปรเจกต์ที่ต้องการแปลงเนื้อหาไดนามิก (เช่น เทมเพลต Twig และไฟล์ Markdown) ให้เป็น HTML สถิตที่รวดเร็วสูง Sculpin ใช้ Composer สำหรับจัดการ dependency และอิงโครงสร้าง Symfony เพื่อประสบการณ์พัฒนาที่คุ้นเคยและมั่นคง

ServBay คือสภาพแวดล้อมการพัฒนาเว็บโลคอล (local web development) ที่ออกแบบมาสำหรับ macOS โดยเฉพาะ รวมซอฟต์แวร์ที่ใช้บ่อย ได้แก่ PHP, Composer, ระบบฐานข้อมูล (MySQL, PostgreSQL, MongoDB, Redis) เซิร์ฟเวอร์เว็บ (Caddy, Nginx) และระบบจัดการแบบอินเทอร์เฟซกราฟิก ใช้งานง่าย ช่วยลดความยุ่งยากในการจัดเตรียมสภาพแวดล้อมพัฒนา Sculpin บน macOS โดยเฉพาะเรื่องเวอร์ชัน PHP, การจัดการ dependency และการตั้งค่าเซิร์ฟเวอร์

คู่มือนี้จะแนะนำวิธีติดตั้งและตั้งค่า Sculpin ใน ServBay รวมถึงการตั้งค่าเว็บไซต์สำหรับพัฒนาในเครื่อง

กรณีการใช้งาน

• สร้างบล็อกสถิตประสิทธิภาพสูงด้วย PHP stack
• สร้างเว็บไซต์เอกสารสถิตสำหรับโปรเจกต์โอเพ่นซอร์สหรือสินค้า
• เริ่มต้นหน้ามาร์เก็ตติ้งหรือเว็บไซต์บริษัทที่ไม่ต้องการฐานข้อมูล
• เขียนเนื้อหาด้วย Twig template และ Markdown เพื่อประโยชน์ด้านความรวดเร็วและความปลอดภัยของเว็บสถิต

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

ก่อนเริ่มต้น กรุณาตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:

1. ได้ติดตั้งและรัน ServBay บน macOS แล้ว ServBay จะมี PHP, Composer และ Web Server (Caddy หรือ Nginx) ที่จำเป็น
2. มีความรู้เบื้องต้นเรื่องการใช้ Command Line
3. เข้าใจพื้นฐาน PHP, Composer และ Markdown

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

ต่อไปนี้คือขั้นตอนโดยละเอียดสำหรับการติดตั้งและตั้งค่า Sculpin ใน ServBay:

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

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

เปิดเทอร์มินัล แล้วรันคำสั่งต่อไปนี้:

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

โฟลเดอร์นี้จะใช้เก็บไฟล์โปรเจกต์ Sculpin ของคุณ

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

ServBay มาพร้อม Composer อยู่แล้ว ไม่ต้องติดตั้งเพิ่มเติม สามารถใช้คำสั่ง composer ในเทอร์มินัลได้ทันที

จะใช้ Sculpin blog skeleton ตัวอย่างจากทางการ เพื่อตั้งต้นโปรเจกต์อย่างรวดเร็ว ในโฟลเดอร์ servbay-sculpin-app ที่เพิ่งสร้างไว้ รันคำสั่งนี้:

composer create-project sculpin/sculpin-blog-skeleton .

คำสั่งนี้จะดาวน์โหลด Sculpin blog skeleton และ dependency ทั้งหมด มาไว้ในไดเรกทอรีปัจจุบัน (.)

ขั้นตอนที่ 3: กำหนดค่าเว็บไซต์ใน ServBay

เพื่อให้เข้าถึงเว็บไซต์ Sculpin ผ่านเซิร์ฟเวอร์ของ ServBay (Caddy หรือ Nginx) จำเป็นต้องเพิ่มคอนฟิกเว็บไซต์ใน ServBay

1. เปิดแอป ServBay: เรียกใช้งานอินเทอร์เฟซกราฟิกของ ServBay
2. ไปที่แท็บ "เว็บไซต์": คลิก "เว็บไซต์" ในแถบนำทางของหน้าต่าง ServBay
3. เพิ่มเว็บไซต์ใหม่: คลิกปุ่ม "+" ด้านล่างซ้าย เพื่อสร้างคอนฟิกเว็บไซต์ใหม่
4. กรอกข้อมูลเว็บไซต์:
   • ชื่อ (Name): ใส่ชื่อจำง่าย เช่น My Sculpin Site
   • โดเมน (Domain): ใส่โดเมนที่ต้องการใช้ เช่น servbay-sculpin.local ServBay จะตั้งค่าการชี้โดเมนและใบรับรอง SSL อัตโนมัติสำหรับ .local (ด้วย ServBay User CA)
   • ประเภทเว็บไซต์ (Type): เลือก PHP (เพราะ Sculpin คือ PHP app)
   • เวอร์ชัน PHP (PHP Version): เลือกเวอร์ชัน PHP ที่ต้องการ (ServBay รองรับหลายเวอร์ชัน เลือกเวอร์ชันที่ Sculpin รองรับได้ โดยปกติเลือกเวอร์ชันใหม่)
   • ไดเรกทอรีรากเว็บไซต์ (Document Root): ขั้นตอนนี้สำคัญ Sculpin จะสร้างไฟล์สถิตไว้ใน output_dev หรือ output_prod สำหรับ dev ให้ตั้ง document root ไปที่: /Applications/ServBay/www/servbay-sculpin-app/output_dev
5. บันทึกคอนฟิก: คลิก "บันทึก" เมื่อกรอกข้อมูลครบ ServBay จะนำคอนฟิกใหม่ไปใช้ เซิร์ฟเวอร์เว็บ (Caddy หรือ Nginx) ไม่ต้องรีสตาร์ทเอง

ขั้นตอนที่ 4: สร้างเว็บไซต์ Sculpin

หลังตั้งค่าเว็บไซต์ใน ServBay แล้ว จะต้องให้ Sculpin สร้างไฟล์สถิตของเว็บไซต์

ในเทอร์มินัล (อยู่ที่ /Applications/ServBay/www/servbay-sculpin-app) รันคำสั่งนี้เพื่อติดตั้ง dependency ของโปรเจกต์ (ถ้าทำขั้นตอนที่ 2 ไปแล้ว อาจข้ามได้ แต่แนะนำให้รันเพื่อตรวจสอบให้แน่ใจว่า dependency ครบ):

composer install

จากนั้นรันคำสั่ง Sculpin generate เพื่อสร้างเว็บไซต์:

vendor/bin/sculpin generate --watch

• vendor/bin/sculpin: คือ path ไปยังไฟล์ Sculpin ที่ติดตั้งโดย Composer
• generate: คำสั่งหลักสำหรับสร้างเว็บไซต์สถิต Sculpin จะอ่านไฟล์ในโฟลเดอร์ source แล้วแปลงเป็นไฟล์สถิตใน output directory (output_dev เป็นดีฟอลต์)
• --watch: ให้ Sculpin เฝ้าดูการเปลี่ยนแปลงของไฟล์ในโฟลเดอร์ source แล้ว regenerate อัตโนมัติ เหมาะกับการพัฒนา

เมื่อรันเสร็จและเห็นข้อความ "Sculpin has generated your site!" หรือข้อความคล้ายกัน แสดงว่าไฟล์สถิตถูกสร้างไว้ที่ output_dev แล้ว

ขั้นตอนที่ 5: เข้าชมเว็บไซต์โลคอลที่พัฒนา

ขณะนี้คุณสามารถเข้าเว็บไซต์ Sculpin ผ่านโดเมนที่ตั้งไว้ใน ServBay ได้แล้ว

เปิดเว็บเบราว์เซอร์ แล้วไปที่:

https://servbay-sculpin.local

เนื่องจาก document root ใน ServBay ชี้ไปที่ output_dev และรันคำสั่ง sculpin generate --watch อยู่ คุณจะสามารถพรีวิวการเปลี่ยนแปลงของเนื้อหาและเทมเพลตในเว็บไซต์ได้แบบเรียลไทม์ที่ https://servbay-sculpin.local ServBay จะออก SSL certificate อัตโนมัติสำหรับ .local ให้คุณเข้าผ่าน HTTPS อย่างปลอดภัย

การพัฒนาด้วย Sculpin

เมื่อติดตั้งและตั้งค่า Sculpin ใน ServBay เสร็จแล้ว คุณก็สามารถสร้างเว็บไซต์สถิตของคุณเองได้ทันที ต่อไปนี้เป็นคำแนะนำสำหรับเวิร์กโฟลว์เบื้องต้น

โครงสร้างไดเรกทอรีของ Sculpin

เข้าใจโครงสร้างโปรเจกต์ของ Sculpin จะช่วยให้คุณพัฒนาได้คล่องขึ้น:

servbay-sculpin-app/
├── app/                # ตั้งค่าแอพและแคช
├── output_dev/         # ไฟล์ผลลัพธ์ระหว่างพัฒนา (ServBay จะชี้เว็บ root มาที่นี่)
├── output_prod/        # ไฟล์ผลลัพธ์สำหรับ production
├── source/             # ไฟล์ต้นฉบับของเว็บไซต์ (Markdown, Twig, ไฟล์ resource อื่นๆ)
│   ├── _layouts/       # ไฟล์ layout ของ Twig
│   ├── _posts/         # บทความบล็อก เป็น Markdown
│   ├── assets/         # resource สถิต (CSS, JS, รูป ฯลฯ)
│   └── index.md        # ไฟล์ Markdown ของหน้าแรก
├── vendor/             # dependency ติดตั้งโดย Composer
├── sculpin.yml         # ไฟล์คอนฟิกหลักของ Sculpin
├── composer.json       # ไฟล์คอนฟิก dependency Composer
└── ...ไฟล์อื่นๆ

ส่วนมากคุณจะโฟกัสที่การพัฒนาในโฟลเดอร์ source

การสร้างบทความบล็อก

เพิ่มบทความใหม่ใน Sculpin blog ให้สร้างไฟล์ Markdown ใหม่ใน source/_posts โดยชื่อตามรูปแบบ YYYY-MM-DD-slug.md

ตัวอย่าง สร้างไฟล์ 2024-06-06-my-first-post.md:

---
title: "โพสต์แรกของฉัน"
date: 2024-06-06
tags: [คู่มือ, Sculpin, ServBay]
---

# โพสต์แรกของฉัน

นี่คือเนื้อหาของโพสต์บล็อกแรกบน Sculpin ที่ผมจะมาแบ่งปันประสบการณ์การใช้งาน ServBay และ Sculpin

คุณสามารถใช้ syntax ของ Markdown ได้ที่นี่

## หัวข้อย่อย

รายการ:
- โครงการ 1
- โครงการ 2

หลังบันทึกไฟล์ ถ้าคุณรัน sculpin generate --watch อยู่ Sculpin จะตรวจเจอไฟล์ใหม่และ build เว็บไซต์อัตโนมัติ รีเฟรชที่เบราว์เซอร์ https://servbay-sculpin.local จะเห็นโพสต์ใหม่

การสร้างหน้าใหม่

ถ้าต้องการเพิ่มเพจแยก เช่น "About Us" ให้สร้างไฟล์ Markdown ใน source เช่น about.md:

---
title: "เกี่ยวกับเรา"
layout: page.html.twig # ระบุ layout ที่ใช้
---

# เกี่ยวกับคู่มือ ServBay Sculpin

หน้านี้เป็นข้อมูลเกี่ยวกับการใช้ ServBay และ Sculpin ในการสร้างเว็บไซต์สถิต

หลังบันทึก Sculpin จะสร้างไฟล์ output_dev/about/index.html (ถ้าคุณคอนฟิก pretty URL) สามารถเข้าชมผ่าน https://servbay-sculpin.local/about/

ปรับแต่ง Style และ Script

ไฟล์ resource เช่น CSS และ JS ให้จัดเก็บใน source/assets สามารถแก้ไขได้โดยตรง

เช่น แก้ไฟล์ source/assets/css/style.css เพื่อเปลี่ยนแปลงรูปแบบเว็บไซต์

เมื่อคุณแก้ไข resource เหล่านี้ --watch ของ Sculpin จะตรวจจับและ regenerate เว็บไซต์ให้โดยอัตโนมัติ

การ build เผยแพร่เว็บไซต์จริง (Production)

เมื่อเว็บไซต์พร้อมสำหรับเผยแพร่ ให้สร้างเวอร์ชัน production ซึ่งมักจะมีการปรับแต่งเพิ่มประสิทธิภาพ (เช่น บีบอัดไฟล์ resource)

ใช้คำสั่งนี้เพื่อ build โหมด production:

vendor/bin/sculpin generate --env=prod

ไฟล์สถิตจะอยู่ในโฟลเดอร์ output_prod สามารถนำไฟล์ทั้งหมดในนี้ไปอัพโหลดบนบริการเว็บ static hosting ใดๆ (เช่น GitHub Pages, Netlify, Vercel หรือเซิร์ฟเวอร์ส่วนตัวของคุณ)

หากต้องการดูผลลัพธ์ production ใน ServBay ให้เปลี่ยน document root ของเว็บไซต์ชี้ไปที่ /Applications/ServBay/www/servbay-sculpin-app/output_prod แล้วบันทึก จากนั้นเข้าชมที่โดเมนเดิม

ข้อควรสังเกต

• ตรวจสอบให้แน่ใจว่า ServBay รันอยู่และเว็บไซต์ถูกเปิดใช้งานแล้ว
• ตรวจสอบให้แน่ใจว่าได้รันคำสั่ง sculpin generate --watch อยู่เสมอระหว่างพัฒนา เพื่อให้เว็บไซต์อัปเดตอัตโนมัติ
• ตรวจสอบ document root ใน ServBay ว่าชี้ไปที่ output directory ของ Sculpin ถูกต้องแล้ว (โดยปกติคือ output_dev สำหรับ dev)
• ServBay จะสร้าง SSL certificate อัตโนมัติสำหรับโดเมน .local แต่บางครั้งระบบปฏิบัติการต้องให้คุณ "trust" CA ของ ServBay เพิ่มเติม ดูขั้นตอนในเอกสารของ ServBay

คำถามที่พบบ่อย (FAQ)

Q: หลังแก้ไขไฟล์ เว็บไซต์ไม่อัปเดต?

A: ตรวจสอบให้แน่ใจว่าได้รัน vendor/bin/sculpin generate --watch แล้วและคำสั่งไม่ล้มเหลว ดู error message ในเทอร์มินัล หากมีปัญหาควรเคลียร์ cache ของเบราว์เซอร์ หรือเปิดในโหมด private/incognito ดู

Q: เข้า https://servbay-sculpin.local แล้วขึ้น SSL Error?

A: เนื่องจาก ServBay ออกใบรับรอง self-signed certificate สำหรับ .local คุณต้อง trust CA ของ ServBay ที่เครื่องของคุณเอง ติดตั้งและ trust CA ตามคำแนะนำในเอกสารของ ServBay

Q: จะเปลี่ยนเวอร์ชัน PHP ได้อย่างไร?

A: ไปที่แท็บ "ซอฟต์แวร์" ในแอป ServBay เพื่อติดตั้งและจัดการเวอร์ชัน PHP แล้วแก้คอนฟิกเว็บไซต์ Sculpin ในแท็บ "เว็บไซต์" เลือกเวอร์ชัน PHP ที่ต้องการแล้วบันทึก

Q: Sculpin รองรับ template engine หรือ markup ใดบ้าง?

A: Sculpin ใช้ Twig เป็น template engine เริ่มต้น และรองรับ Markdown สำหรับเขียนเนื้อหา

สรุป

ด้วยสภาพแวดล้อมแบบบูรณาการของ ServBay การติดตั้งและตั้งค่า Sculpin Static Site Generator บน macOS กลายเป็นเรื่องง่ายมาก ServBay มีทั้ง PHP และ Composer พร้อมให้ใช้งาน การตั้งค่าเซิร์ฟเวอร์และ SSL สะดวกสุดๆ ให้นักพัฒนา Sculpin เริ่มต้นได้อย่างมั่นใจ ปฏิบัติตามคู่มือนี้ คุณจะสร้างสภาพแวดล้อมพัฒนา Sculpin ได้ภายในเวลาอันสั้น พร้อมสร้างและพรีวิวเว็บไซต์สถิตของคุณได้อย่างรวดเร็ว ใช้ประโยชน์จากพลังของ Sculpin ผสมกับความสะดวกของ ServBay เพื่อให้คุณได้โฟกัสกับเนื้อหาคุณภาพ โดยไม่ต้องเสียเวลากับการเตรียมสภาพแวดล้อมหรือแก้ปัญหาทางเทคนิคที่ซับซ้อน