วิธีติดตั้งและใช้งาน Gatsby.js เบื้องต้น

Gatsby.js คืออะไร?

Gatsby.js คือ Modern site generator ที่ใช้ React เป็นพื้นฐาน มีความสามารถในการสร้างเว็บไซต์แบบ Static ที่มีประสิทธิภาพสูง รองรับ SEO ตั้งแต่เริ่มต้น และสนับสนุน Progressive Web App (PWA) อีกด้วย

Gatsby.js เหมาะสำหรับการสร้าง Blog, Portfolio หรือเว็บไซต์ที่ข้อมูลไม่ได้เปลี่ยนแปลงบ่อย เพราะมันจะ Export เว็บทั้งหมดเป็นไฟล์ Static ที่โหลดเร็วมาก

ติดตั้ง Gatsby CLI

ก่อนเริ่มต้นต้องติดตั้ง Node.js ก่อน จากนั้นให้ติดตั้ง gatsby-cli แบบ Global

npm install -g gatsby-cli

สร้างโปรเจ็คใหม่

หลังจากติดตั้ง gatsby-cli แล้ว ให้สร้างโปรเจ็คใหม่ด้วยคำสั่ง gatsby new ตามด้วยชื่อโปรเจ็ค

gatsby new gatsby-site

มันจะทำการดาวน์โหลดและสร้างโครงสร้างไฟล์เริ่มต้นให้ใน โฟลเดอร์ gatsby-site ให้เราเข้าไปในโฟลเดอร์นั้น

cd gatsby-site

รัน Development Server

เพื่อดูผลลัพธ์ขณะพัฒนา ให้รันด้วยคำสั่ง

gatsby develop

จากนั้นเปิดเบราว์เซอร์ไปที่ http://localhost:8000 จะเห็นหน้าเริ่มต้นของ Gatsby

นอกจากนี้ Gatsby ยังมี GraphQL playground ที่ http://localhost:8000/___graphql สำหรับ Query ข้อมูลระหว่างพัฒนาด้วย

สร้าง Production Build

เมื่อพัฒนาเสร็จแล้วให้รัน build เพื่อสร้างไฟล์ Static

gatsby build

Gatsby จะสร้างไฟล์ static ทั้งหมดไว้ในโฟลเดอร์ public หลังจาก Build เสร็จแล้ว ลองดูผลลัพธ์ Production ด้วยคำสั่ง

gatsby serve

จากนั้นเปิดเบราว์เซอร์ไปที่ http://localhost:9000 เพื่อดูผลลัพธ์

สรุป

Gatsby.js เป็น Static site generator ที่เหมาะสำหรับ Blog หรือเว็บไซต์ทั่วไปที่ต้องการความเร็วสูงและรองรับ SEO โดยอาศัยพื้นฐาน React ทำให้เรียนรู้ได้ง่ายสำหรับผู้ที่ใช้ React อยู่แล้ว

สามารถอ่านเพิ่มเติมได้ที่ https://www.gatsbyjs.org/ ครับ