Gatsby Framework

Gatsby คืออะไร?

  • เป็น open source framework มีพื้นฐานมาจาก React
  • เป็น Static Site Generator กล่าวคือเมื่อเขียนเว็บ -> Build -> HTML+ css + javascript -> Deploy กับ web server หลายๆเว็บ เช่น apache, firebase, github pages หรือ netlify อื่นๆ อีกหลายเว็บ

Create Gatsby Project
ก่อนอื่นเราจะต้องมาติดตั้งตัว gatsby-cli ซึ่งสามารถใช้ได้ทั้งคำสั่ง Yarn หรือ NPM ดังภาพที่ 1

npm install -g gatsby-cli

yarn global install gatsby-cli

ภาพที่ 1 ติดตั้ง gatsby-cli

เมื่อเราติดตั้ง gatsby-cli ขั้นตอนต่อไปก็จะเป็นการสร้าง website ใหม่ด้วย คำสั่ง

gatsby new blog

หลังจากสร้าง blog เรียบร้อยแล้วก็เข้าไปใน project directory ที่สร้างขึ้นมาใหม่ ในที่นี้คือ “blog” แล้วใช้คำสั่ง 

gatsby develop เพื่อรัน development server

และเราจะได้ default page ที่ Gatsby สร้างให้ ซึ่งสามารถเข้าถึงเว็บได้ด้วย http://localhost:8000 ดังภาพที่ 2

ภาพที่ 2 Gatsby Default Starter

ต่อไปเราจะลองแก้ไข Gatsby Config ในไฟล์ gatsby-config.js แล้วกลับไปยัง Browser ที่เราเปิดไว้ในภาพที่ 2จะได้ผลลัพธ์ดังภาพที่ 3 กล่าวคือเราสามารถแก้ Code แล้วSave หน้าเว็บก็จะอัพเดททันทีโดยที่เราไม่ต้องสั่ง Build ใหม่ เนื่องจาก Gatsby เป็น hot reload ดังนั้นเมื่อเราแก้ไขไฟล์ใดๆ จะทำการ build ให้เราใหม่เสมอ เหมือนรัน develop

ภาพที่ 3 ผลลัพธ์จากการแก้ไข gatsby-config.js

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.