มาสร้าง Static เว็บด้วย GatsbyJS กันเถอะ

การสร้างเว็บไซต์ในปัจจุบันนี้ส่วนใหญ่เราจะทำเป็น dynamics website หรือ SPA (Single Page Application) ใช้ framework ยอดนิยมอย่าง React, Angular หรือ Vue.js แต่การจะทำให้รองรับ SEO ด้วยการทำ Server Side Rendering (SSR) อาจะมีขั้นตอนยุ่งยากหรือไม่รองรับ ดังนั้น Static Website จึงมีข้อดีมากกว่าด้านนี้ แต่ถ้าเราต้องเการเขียนเว็บให้เป็นแบบ SPA และรองรับ SSR ด้วยล่ะ ยิ่งยากเข้าไปใหญ่ แต่ก็มีหลาย framework ที่สร้างมาช่วยให้เราทำเรื่องนี้ และ Gatsby JS ก็เป็นหนึ่งใน framework ที่ได้รับความนิยม และใช้ React ด้วย ในบทความนี้จะมาใช้ Gatsby มาสร้างเว็บ Blog ที่เป็น static website กันดู

GatsbyJS?

เป็น free และ open source framework มีพื้นฐานมาจาก React ที่ช่วยให้ developer สร้าง website และ app ได้อย่างรวดเร็ว

https://medium.freecodecamp.org/why-you-should-use-gatsbyjs-to-build-static-sites-4f90eb6d1a7b

Gatsby ทำงานโดยดึงข้อมูลมากจาก Data Source ต่างๆ (เช่น CMS, Markdown หรือ Data ที่เป็น API/DB) ด้วย GraphQL และสร้างเป็น web app ด้วย React เมื่อหลังจากสร้างเรียบร้อยแล้วสามารถเอาไป deploy ได้บน Web Hosting ธรรมดาได้เลย โดยไม่จำเป็นต้องมี Node.js ติดตั้งอยู่ (เพราะว่าเป็น static web)

Install Gatsby

ก่อนจะติดตั้ง Gatsby จะต้องแน่ใจก่อนว่าในเครื่องที่เราจะใช้นั้น มี Node.js และ npm ติดตั้งอยู่แล้ว ถ้ายังไม่มีจะต้องติดตั้งก่อน

เราจะติดตั้ง Gatsby CLI เพื่อใช้สร้าง Gatsby website และดำเนินการอื่นๆ เกี่ยวกับ Gatsby ด้วยคำสั่ง

$ npm install -g gatsby-cli

Create Gatsby Project

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

$ gatsby new myblog

หลังจากติดตั้งเสร็จเรียบร้อยแล้วก็เข้าไปใน project directory ที่สร้างขึ้นมาใหม่ แล้วใช้คำสั่ง gatsby develop เพื่อรัน development server และเราสามารถเข้าถึงเว็บได้ด้วย URL http://localhost:8000 ก็จะได้ default page ที่ Gatsby สร้างให้

โครงสร้างของ Gatsby project มีดังนี้

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

Create Blog

ต่อไปเราจะปรับ default page ของ Gatsby ให้เป็น blog ที่เราต้องการโดยการแก้ไข Gatsby Config ในไฟล์ gatsby-config.js

siteMetadata: {
  title: `MyBlog`,
  description: `Simple Web Blog`,
  author: `@iphayao`,
},

ซึ่ง Gatsby เป็น hot reload ดังนั้นเมื่อเราแก้ไขไฟล์ใดๆ จะทำการ build ให้เราใหม่เสมอเมือเรา run แบบ develop ดังนั้นเมื่อเปลี่ยน siteMetadata ชื่อของเว็บเราก็จะเปลี่ยน

เนื่องจากว่า blog project จะใช้ Data Source เป็น Markdown page ซึ่งง่ายต่อการแก้ไขบทความใน blog โดยที่ Gatsby จะสร้าง web page จาก Markdown file มีขั้นตอนดังนี้

1. อ่านไฟล์ markdown เข้าไปใน Gatsby ด้วย filesystem
2. แปลง markdown ให้เป็น HTML และ frontmatter ไปเป็น Data
3. สร้าง component page สำหรับไฟ markdown
4. เขียนโปรแกรมสร้าง page โดยใช้ Gatsby’s Node.js createPage API

ดังนั้นเราจะต้องติดตั้ง Gatsby plugins ที่เกี่ยวข้องก่อน ซึ่งโดย default Gatsby จะติดตั้ง plugin gatsby-source-filessystem มาให้แล้ว ดังนั้นจะเพิ่ม config ให้ Gatsby ด้วยการแก้ไขไฟล์ gatsby-config.js ให้อ่านไฟล์ markdown จาก ../src/blogs ซึ่งเราจะต้องสร้าง folder นี้จริงๆ ใน Gatsby project ด้วย

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `blogs`,
    path: `${__dirname}/src/blogs`,
  },
},

ต่อไปติดตั้ง plugin gatsby-transformer-remark เพื่อแปลง markdown ให้เป็น HTML ด้วยคำสั่ง

$ npm install -save gatsby-transformer-remark

และแก้ไข Gatsby config โดยเพิ่ม plugin gatsby-transformer-remark เข้าไป

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `blogs`,
    path: `${__dirname}/src/blogs`,
  },
},
`gatsby-transformer-remark`,

สร้างไฟล์ markdown ไว้ใน ../src/blogs

---
path: "/blog/my-first-post"
date: "2019-05-07"
title: "My first blog post"
---
Oooooh-weeee, my first blog post!

สร้างหน้า template สำหรับ markdown data

สร้าง Template Gatsby รองรับ server side rendering ของ React component ซึ่งเราสามารถสร้าง template ใน ../src/templates/blog-post.js

ซึ่งจะมีอยู่ 2 ส่วนในไฟล์นี้

1. GraphQL จะเอาค่าข้อมูลของ markdown มาแสดงใน template
2. Template เป็นส่วนที่ Gatsby จะเอาข้อมูลที่ได้จาก GraphQL มาแสดงผลตามรูปแบบที่กำหนดไว้

สร้าง Static page ด้วย Gatsby’s Node API

Gatsby จะใช้ Node API โดยเรียกใช้ createPages API ในขณะ build time ด้วยการ inject parameters actions และ graphql ในไฟล์ gatsby-node.js โดยใช้ GraphQL ค้นหาข้อมูลในไฟล์ markdown และใช้ createPage action สร้างหน้า web page สำหรับแต่ล่ะไฟล์ markdown นั้นๆ โดยการใช้ template

แก้ไขหน้าแรกแสดง Blog post

เนื่องจากเราต้องการให้หน้าแรกของ Blog เราแสดง post ที่มีอยู่ทั้งหมดดังนั้นเราจะต้องแก้ไข index.js ให้แสดงข้อมูลของ markdown ทั้งหมดที่ได้จาก graphql และเพิ่ม component PostLink ที่จะแสดง link ไปยังหน้าของ blog post นั้นๆ

หลังจากเพิ่มส่วนต่างๆ เรียบร้อยแล้วรับ Gatsby อีกครั้งจะได้ และไปที่หน้าแรกของ blog จะเห็นรายหัวข้อของ blog post และเมื่อคลิ๊กไปที่ หัวข้อนั้นจะไปที่ blog post นั้นๆ

Code ของ project นี้ครับ

iphayao/gatsby-myblog

สรุป

จากการที่ลองใช้ Gatsby สร้าง static web site ง่ายๆ ด้วยการสร้างเป็น Blog นั้นจะเห็นได้ว่ามีขั้นตอนไม่อยาก แต่อาจจะต้องมีพื้นฐานเกี่ยวกับ React และ GraphQL มาก่อนก็จะพัฒนาต่อยอดได้เยอะ เพราะจริงๆ แล้วก็เป็นการเขียน React App นั้นเอง และ Gatsby สร้างให้เป็น static web site ทำให้เราสามารถเอาไป deploy บน web host ธรรมดาได้เลย

อ้างอิง

Creating a Blog with Gatsby