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

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

การติดตั้ง

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

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

ใช้งาน development

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

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

สร้าง production build

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

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

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

Author:

ชื่อ ศิริชัย ธีรภัทรสกุล ชื่อเล่น “ตั้ม” ทำงานด้านพัฒนาเว็บไซต์ สนใจเรื่องการพัฒนาตัวเอง หลงใหลการถ่ายรูป เวลาว่างมักชอบอ่านหนังสือ และเขียนบล็อก