Gatsby.js คือ Modern site generator ตัวช่วยสร้างเว็บแบบ Static ของฝั่ง React ที่ทำง่ายอย่างรวดเร็ว ประโยชน์ที่ได้รับคือ สนับสนุน SEO, Progressive Web Application เพราะด้วยที่เป็น Static site มีแค่ HTML/CSS/Javascript จึงเอาไปรันที่ไหนก็ได้ เดี๋ยวเรามาลองติดตั้งครับ

การติดตั้ง

เริ่มต้น Gatsby CLI ซึ่งจะช่วยให้เรา ใช้คำสั่งของ Gatsby ต่างๆนาๆ ได้ในเครื่องของเราในแบบ global ติดตั้งโดยพิมพ์คำสั่งตามด้านล่างนี้

npm install -g gatsby-cli

เมื่อติดตั้ง Gatsby CLI ด้านบนเรียบร้อนย ทีนี้เราสามารถใช้คำสั่งของ Gatsby ได้แล้ว เรามาเริ่มสร้างโปรเจ็คกันเลย ด้วยคำสั่งนี้

gatsby new gatsby-site

ใช้งาน development

จากนั้นให้เข้าไปในโฟลเดอร์โปรเจ็คที่เราสร้าง แล้วสั่งเริ่มรันการทำงาน ด้วยคำสั่งนี้

gatsby develop

Gatsby จะเริ่มทำงาน และมี hot-reloading สำหรับ development environment โดยทดลอง ทำการแก้ไข JavaScript pages ในโฟลเดอร์ src/pages เมื่อบันทึกโค้ดมันจะ refresh ให้เราบน web browser ให้เราอัตโนมัติ สามาถเข้าดูได้ที่  http://localhost:8000

สร้าง production build

Gatsby จะทำการ build production โดยการ generate static HTML ออกมาให้พร้อมใช้งาน โดยใช้คำสั่งนี้

gatsby build

เราสามารถรันดู production ที่ build ในเครื่องของเราโดยใช้คำสั่งนี้

gatsby serve

บล็อกนี้ก็ขอจบไว้เพียงเท่านี้ก่อนครับ หวังว่าคงมีประโยชน์ไม่มากก็น้อย

• Facebook
• Twitter
• Line