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

ภาพรวม

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

Jigsaw คืออะไร?

Jigsaw คือเครื่องมือสร้างเว็บไซต์สเตติกที่พัฒนาบนคอมโพเนนต์ Laravel โดยบริษัท Tighten โดยใช้ข้อได้เปรียบด้านความยืดหยุ่นของ Blade Template Engine และทำงานร่วมกับไฟล์ Markdown เพื่อสร้างออกมาเป็น HTML สเตติก 100% เหมาะสำหรับเว็บไซต์เอกสาร, บล็อก, หน้าแลนดิ้งเชิงการตลาด หรือโครงการที่ไม่ต้องการฐานข้อมูลหรือการประมวลผลฝั่งเซิร์ฟเวอร์ ข้อดีสำคัญของ Jigsaw ได้แก่:

• ใช้เครื่องมือที่คุ้นเคย: หากคุณเคยใช้ Laravel หรือ Blade Template อยู่แล้ว จะเริ่มทำงานกับ Jigsaw ได้อย่างรวดเร็ว
• ความเร็วและความปลอดภัย: เว็บไซต์ที่สร้างด้วย Jigsaw โหลดเร็วมาก และเนื่องจากไม่มีโค้ดฝั่งเซิร์ฟเวอร์จึงปลอดภัยสูง
• โครงร่างและคอมโพเนนต์ที่ยืดหยุ่น: พัฒนาด้วย Blade Template ให้คุณออกแบบเลย์เอาต์และคอมโพเนนต์ซับซ้อนได้
• รองรับ Markdown: เขียนเนื้อหาได้อย่างง่ายดาย

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

Jigsaw เหมาะสำหรับ:

• เว็บไซต์เอกสารโปรเจกต์และ API
• บล็อกส่วนตัวหรือเว็บแชร์ความรู้เทคนิค
• หน้าแลนดิ้งสำหรับบริษัทหรือผลิตภัณฑ์
• เว็บไซต์นำเสนอขนาดเล็ก
• เว็บไซต์ที่เนื้อหาค่อนข้างคงที่ และให้ความสำคัญกับสมรรถนะ/ความปลอดภัย

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

ก่อนเริ่ม โปรดตรวจสอบว่าได้เตรียมสิ่งเหล่านี้ไว้แล้ว:

1. ติดตั้งและเปิดใช้งาน ServBay: คุณต้องติดตั้ง ServBay และเปิดบน macOS โดย ServBay มี PHP, Composer และ Node.js/npm ติดตั้งล่วงหน้าแล้ว
2. ความรู้พื้นฐานเรื่อง Command Line: คุณจะต้องใช้ Terminal สำหรับรันคำสั่งต่าง ๆ
3. เข้าใจ Composer และ npm เบื้องต้น: Jigsaw ใช้ Composer ในการติดตั้ง, และใช้งาน npm สำหรับการบริหารจัดการ front-end assets

ขั้นตอนการติดตั้งและตั้งค่า

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

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

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

cd /Applications/ServBay/www
mkdir servbay-jigsaw-demo
cd servbay-jigsaw-demo

ในตัวอย่างนี้ เราตั้งชื่อไดเรกทอรีโปรเจกต์ว่า servbay-jigsaw-demo ไฟล์งานทั้งหมดจะอยู่ในไดเรกทอรีนี้

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

ServBay ได้ติดตั้งและตั้งค่า Composer พร้อมใช้งานแล้ว คุณสามารถใช้คำสั่ง composer ได้ทันทีจาก Terminal ในโฟลเดอร์โปรเจกต์ที่เพิ่งสร้าง (/Applications/ServBay/www/servbay-jigsaw-demo) ให้รันคำสั่งเพื่อติดตั้ง Jigsaw ดังนี้

composer create-project tightenco/jigsaw .

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

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

ถ้าต้องการเข้าถึงเว็บไซต์ Jigsaw ด้วยเบราว์เซอร์ คุณต้องเพิ่มการตั้งค่าเว็บไซต์ใน ServBay สำหรับโปรเจกต์นี้

1. เปิด ServBay UI: ดับเบิลคลิกไอคอนแอปฯ หรือเลือกจากแถบเมนูเพิ่อเปิดแผงควบคุม
2. ไปที่ "เว็บไซต์": คลิกแท็บ "เว็บไซต์" ที่แถบด้านซ้าย
3. เพิ่มเว็บไซต์ใหม่: คลิกปุ่ม "+" ด้านล่างหน้าจอ จากนั้นเลือก "เพิ่มเว็บไซต์"
4. กำหนดรายละเอียดเว็บไซต์:
   • ชื่อ (Name): ตั้งชื่อสำหรับระบุเว็บไซต์ เช่น ServBay Jigsaw Demo
   • โดเมน (Domain): ระบุโดเมนสำหรับใช้งานในเครื่อง แนะนำให้ใช้โดเมนลงท้ายด้วย .servbay.demo เช่น jigsaw-demo.servbay.demo เพื่อไม่ให้ชนกับชื่อโดเมนจริง ServBay จะกำหนดให้ .servbay.demo มาชี้มาที่เครื่องอัตโนมัติ
   • ประเภทเว็บไซต์ (Site Type): เลือก PHP เพราะกระบวนการ build ของ Jigsaw ต้องการ PHP
   • เวอร์ชัน PHP (PHP Version): เลือก PHP เวอร์ชันที่ติดตั้งใน ServBay (แนะนำใช้เวอร์ชันใหม่)
   • ไดเรกทอรีรากของเว็บไซต์ (Site Root): ขั้นตอนนี้สำคัญมาก Jigsaw จะสร้างไฟล์สเตติกไว้ในโฟลเดอร์ build_local ในโปรเจกต์ จึงต้องชี้ root มาที่ /Applications/ServBay/www/servbay-jigsaw-demo/build_local
5. บันทึกและใช้งาน: เมื่อกรอกข้อมูลครบแล้ว คลิก "บันทึก" แล้วกด "ยืนยัน" เมื่อ ServBay แจ้งเตือน ServBay จะอัปเดตการตั้งค่า Web server (Caddy หรือ Nginx) รวมถึงการตั้งค่า HTTPS ให้อัตโนมัติ

ขั้นตอนที่ 4: ติดตั้ง dependencies ฝั่ง front-end

โปรเจกต์ Jigsaw โดยทั่วไปจะใช้ npm จัดการและคอมไพล์ไฟล์ Frontend (เช่น SASS, JavaScript ฯลฯ) ซึ่ง ServBay เตรียม Node.js กับ npm ไว้แล้ว

ในไดเรกทอรีโปรเจกต์ (/Applications/ServBay/www/servbay-jigsaw-demo) ให้รันคำสั่งนี้เพื่อติดตั้ง dependencies

npm install

คำสั่งนี้จะอ่านไฟล์ package.json และดาวน์โหลดโมดูล Node.js ที่ต้องใช้ไปยังโฟลเดอร์ node_modules

ขั้นตอนที่ 5: สร้างเว็บไซต์ด้วย Jigsaw

เมื่อ dependencies ทั้งหมดติดตั้งครบแล้ว ให้รันคำสั่ง build ของ Jigsaw เพื่อสร้างไฟล์เว็บไซต์สเตติก

./vendor/bin/jigsaw build

โดยคำสั่งนี้จะทำงานดังนี้

1. ประมวลผลไฟล์ Markdown และ Blade Template ในไดเรกทอรี source
2. รันงานคอมไพล์ที่ตั้งไว้ใน webpack.mix.js (หากติดตั้ง Laravel Mix ตอนรัน npm install)
3. สร้างไฟล์ HTML, CSS, JS และ assets ต่าง ๆ ออกมาไว้ที่ไดเรกทอรี build_local

ขั้นตอนที่ 6: เข้าใช้งานเว็บไซต์

เมื่อ Jigsaw สร้างไฟล์สเตติกไว้ที่ /Applications/ServBay/www/servbay-jigsaw-demo/build_local เรียบร้อย และได้ตั้งค่าไดเรกทอรีรากใน ServBay ให้ชี้มาที่นี่ คุณก็สามารถเปิดเว็บเบราว์เซอร์และเข้าเว็บไซต์ผ่านโดเมนที่กำหนดไว้ในขั้นตอน 3 ได้แล้ว

เพียงแค่เปิดเว็บเบราว์เซอร์แล้วเข้าโดเมนที่ตั้งไว้ เช่น https://jigsaw-demo.servbay.demo ServBay จะดูแลเรื่อง HTTPS (ด้วย ServBay User CA) อัตโนมัติ คุณจะเห็นหน้า Welcome Page ของ Jigsaw ทันที

การปรับแต่งและพัฒนาเว็บไซต์

เมื่อคุณตั้งค่าพื้นฐานระบบเสร็จแล้ว ก็พร้อมสำหรับการพัฒนาเนื้อหาและออกแบบหน้าตาเว็บไซต์ด้วย Jigsaw

แก้ไขคอนเทนต์และแม่แบบ

• โค้ดต้นฉบับของเว็บจะอยู่ที่โฟลเดอร์ source ในรากโปรเจกต์
• แม่แบบ HTML และคอมโพเนนต์เขียนด้วย Blade Template เก็บใน source/_layouts กับ source/_partials เป็นต้น
• คอนเทนต์หน้าต่าง ๆ มักเขียนด้วย Markdown แล้วใส่ไว้ใน source หรือโฟลเดอร์ย่อย เช่น source/index.md, source/about.md
• บทความบล็อกมักใส่ที่ source/_posts ตามรูปแบบชื่อ YYYY-MM-DD-slug.md

เพิ่มหน้า หรือบทความใหม่

คุณสามารถเพิ่มหน้าใหม่หรือบล็อกโพสต์ด้วยการสร้างไฟล์ Markdown ใหม่ใน source หรือโฟลเดอร์ย่อยที่เกี่ยวข้อง (เช่นใน source/_posts)

ตัวอย่าง การสร้างไฟล์ source/about.md:

---
title: "เกี่ยวกับเรา"
description: "ข้อมูลเพิ่มเติมเกี่ยวกับ ServBay Jigsaw Demo"
---

# เกี่ยวกับเรา

นี่คือหน้า "เกี่ยวกับ" ที่สร้างด้วย Jigsaw

คุณสามารถใส่รายละเอียดบริษัท ข้อมูลทีม ฯลฯ ได้ที่นี่

ปรับแต่งสไตล์และสคริปต์

โปรเจกต์ Jigsaw ส่วนมากใช้ Laravel Mix (webpack.mix.js) สำหรับคอมไพล์ front-end assets

• ไฟล์สไตล์ (เช่น SASS/SCSS) เก็บใน source/_assets/sass
• ไฟล์ JavaScript อยู่ใน source/_assets/js

คุณสามารถคอมไพล์ asset เหล่านี้ได้ผ่าน npm script:

• npm run dev: คอมไพล์สำหรับพัฒนา (source map เปิด, ไม่บีบอัด)
• npm run watch: คอมไพล์แล้วเฝ้าดูไฟล์ หากมีเปลี่ยนจะ rebuild อัตโนมัติ เหมาะกับช่วงพัฒนา
• npm run prod: คอมไพล์สำหรับ production (บีบอัดและ optimize แล้ว)

เช่น หากแก้ไข source/_assets/sass/main.scss ให้รัน npm run dev หรือ npm run watch เพื่อคอมไพล์เป็น CSS ใหม่

สร้างเว็บไซต์ใหม่อีกครั้งหลังปรับแต่ง

ข้อควรระวัง: ทุกครั้งที่แก้ไขไฟล์ คอนเทนต์ (Markdown) หรือ แม่แบบ (Blade) ในโฟลเดอร์ source ต้องรันคำสั่ง build ใหม่ เพื่อให้ Jigsaw อัปเดตไฟล์สเตติกใน build_local

./vendor/bin/jigsaw build

หากแก้ไข ไฟล์ Frontend (SASS, JS) ควรใช้คำสั่ง npm run dev หรือ npm run watch เพื่อคอมไพล์ assets นั้นใหม่ โดยปกติ Jigsaw จะรัน Mix build ด้วยเมื่อสั่ง build แต่การแยก command จะช่วยให้ตรวจสอบปัญหาได้ง่ายขึ้น

หมายเหตุสำคัญ

• โฟลเดอร์ output ที่ได้จากการ build: ค่าเริ่มต้นของ Jigsaw คือ build ไปไว้ที่ build_local (สำหรับ dev) และ build_production (สำหรับ production) ให้แน่ใจว่า ServBay ชี้ root ไปยัง directory ที่ต้องการใช้ (สำหรับพัฒนาแนะนำ build_local)
• Web Server: ServBay ใช้ Caddy หรือ Nginx ให้บริการไฟล์ใน build_local โดยตรง ได้ประสิทธิภาพสูง ไม่จำเป็นต้องรัน jigsaw serve (เหมาะแค่ preview เร็ว ๆ)
• HTTPS: ServBay จะตั้งค่า HTTPS ให้กับโดเมน .servbay.demo โดยใช้ ServBay User CA คุณอาจต้องเพิ่มความน่าเชื่อถือให้ Certificate เพื่อเลี่ยง warning จากเบราว์เซอร์
• Clean Build: หากพบปัญหาแปลก ๆ ให้ลองรัน ./vendor/bin/jigsaw build --clean เพื่อ clean build

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

ถาม: แก้ไขไฟล์ Markdown แต่เว็บไม่อัปเดต ต้องทำอย่างไร?

ตอบ: ทุกครั้งที่แก้ไขคอนเทนต์หรือแม่แบบ ให้รันคำสั่ง ./vendor/bin/jigsaw build ใน Terminal เพื่อ rebuild

ถาม: แก้ไขไฟล์ SCSS แล้วสไตล์ไม่เปลี่ยน?

ตอบ: ต้องรัน npm run dev หรือ npm run watch ที่ไดเรกทอรีโปรเจกต์เพื่อคอมไพล์สไตล์ใหม่หลังแก้ไข

ถาม: เข้าโดเมนในเครื่องแล้วขึ้น “ไม่สามารถเข้าถึง” หรือ “ไฟล์ไม่พบ”?

ตอบ: ตรวจสอบ

1. ServBay เปิดใช้งานปกติหรือไม่
2. การตั้งค่าใน ServBay: ชื่อโดเมนถูกต้องหรือไม่, ชี้โฟลเดอร์ root มาที่ /Applications/ServBay/www/servbay-jigsaw-demo/build_local หรือเปล่า
3. ได้รัน ./vendor/bin/jigsaw build จนสร้างไฟล์ใน build_local แล้วหรือยัง (เช่น มี index.html จริง)

ถาม: จะ deploy เว็บไซต์ Jigsaw อย่างไร?

ตอบ: ผลลัพธ์ของ Jigsaw เป็นไฟล์สเตติก 100% วิธีปรกติคือ:

1. รัน ./vendor/bin/jigsaw build production สำหรับ build Production (มีการ optimize เพิ่มเติม)
2. อัปโหลดไฟล์ในโฟลเดอร์ build_production ไปยังบริการที่รับฝากเว็บสเตติก (เช่น Netlify, Vercel, GitHub Pages, พื้นที่บนคลาวด์ ฯลฯ)

สรุป

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