Gatsby คืออะไร? + เริ่มต้นเขียน Gatsby กันดีกว่า

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

ซึ่งบันทึกการย้ายมา Gatsby ผมเคยเขียนโพสไว้นี้ครับ บันทึกการทำบล็อกด้วย Gatsby บนเว็บ Devahoy

Gatsby คืออะไร?

Gatsby ถ้าความหมายตามต้นฉบับเลย เขียนไว้ว่า

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

ซึ่ง Gatsby เป็น Static Web Generator ตัวนึงครับ ที่สุดท้ายแล้ว Build ออกมาเป็น Static Web (HTML/CSS/JavaScript) นั่นแหละ เพียงแต่ว่า ตอนขั้นตอนพัฒนา หรือ development flow นั้น จะใช้ Stack คือ React และ GraphQL ครับ

ให้เห็นภาพง่ายๆ ก็คือเวลาเราพัฒนา นะ

1. เราใช้ React และ GraphQL ในการพัฒนาบนเครื่องเรา จนทำเว็บเสร็จแล้ว
2. Build ไฟล์ จาก Gatsby จนได้ HTML/CSS/JS (ที่มี index.html)
3. Deploy ลง Hosting เหมือนเว็บปกติเลยครับ เรียบร้อย

ใครใช้ Gatsby มั่งนะ?

บล็อกที่ท่านอ่านอยู่นี่เลยครับ 😂จริงๆก็ใช่ครับ แต่ว่าก็ยังมีอีกหลายเว็บครับที่ใช้ ถ้าหากเข้าเว็บไซต์ Gatsby และดูที่หัวข้อ Gatsby showcases เราจะเห็นรายชื่อเว็บไซต์ที่ใช้ Gatsby มากมาย ที่ดังๆ ก็คือเว็บไซต์ React.js ก็ใช้ Gatsby ครับ แถมมี Source Code ให้ดูด้วย

Prerequisite

นิดนึงครับ สำหรับคนจะเขียน Gatsby ควรจะเคยเขียน React มาบ้างเน้อ พื้นฐานก็ได้ครับ แบบพออ่านโค๊ดเข้าใจ พอรู้ function component หรือ GraphQL เอาแค่พอรู้ syntax query ได้ก็โอเคละครับ

• NodeJS & NPM
• Basic React.js
• Basic GraphQL

เริ่มต้น Gatsby

เริ่มต้นทำการติดตั้ง gatsby-cli ซึ่งเป็นตัว Command Line Tool ที่ช่วยให้เราสามารถสร้างโปรเจ็คด้วย Gatsby ได้

ก่อนเริ่มต้นเขียน Gatsby เราต้องแน่ใจเครื่องเราพร้อมนะครับ คือต้องมี Node.js และ NPM ก่อน ใครไม่มี ไปดาวน์โหลดที่ Node.js ได้เลยครับ

ติดตั้งผ่าน NPM

npm install gatsby-cli

ติดตั้งผ่าน Yarn

yarn add gatsby-cli

หลังจากติดตั้ง Gatsby CLI แล้ว เราสามารถลองพิมพ์ gatsby --help เพื่อดู command ทั้งหมด ที่สามารถใช้ได้ครับ

$ gatsby --help

Usage: gatsby <command> [options]

Commands:
  gatsby develop                   Start development server. Watches files, rebuilds, and hot reloads if something changes
  gatsby build                     Build a Gatsby project.
  gatsby serve                     Serve previously built Gatsby site.
  gatsby info                      Get environment information for debugging and issue reporting
  gatsby repl                      Get a node repl with context of Gatsby environment, see (add docs link here)
  gatsby new [rootPath] [starter]  Create new Gatsby project.

ต่อมาทำการสร้างโปรเจ็คด้วย Gatsby Cli กันครับ เริ่มทำเว็บแรกกันเลยดีกว่า

gatsby new ahoy-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-world

โดยเราจะตั้งชื่อโปรเจ็คว่า ahoy-gatsby โดยใช้ตัว Starter hello world ของ Gatsby ครับ (จริงๆมีแค่ไฟล์ src/pages/index.js และ gatsby-config.js ให้ครับ)

จากนั้นลองเปิดโฟลเดอร์ ahoy-gatsby ขึ้นมาครับ แล้วสั่ง Start server ด้วย

npm start

# หรือ
gatsby develop

จะเห็น Hello World แสดงที่หน้าเว็บเราครับ http://localhost:8000/

ลองทดสอบเล็กๆน้อย แก้ไขไฟล์ src/pages/index.js เป็นแบบนี้

1
import React from 'react'
2

3
export default () => {
4
  return (
5
    <div>
6
      <h2>Ahoy!</h2>
7
      <p>This site is running on Gatsby.</p>
8
    </div>
9
  )
10
}

หน้าเว็บก็จะเปลี่ยนตามครับ

ต่อมา ลองเพิ่มหน้าใหม่ อีกหน้าเป็น /about ก็แค่สร้างไฟล์ใหม่ชื่อ about.js ที่ src/pages นั่นเอง

1
import React from 'react'
2

3
const About = () => <p>About Page</p>
4

5
export default About

ส่วนการ import Component ก็ทำเหมือนเขียน React จะส่ง Props จัดการ State ปกติเลยครับ

Link และ Routing

ใน Gatsby เราเขียนด้วย React ฉะนั้นเวลาจะทำ Routing หรือการ Link ไปแต่ละหน้า เราจะจัดการที่ฝั่ง Client ก็เลยใช้ Library ครับ เป็น Plugin ของ Gatsby แต่ on-top บน @reach/router อีกทีครับ อาจจะแตกต่างจาก React Router นิดหน่อย (แต่อนาคต React Router v5 น่าจะเขียนคล้ายๆกัน)

ลองแก้ไขไฟล์ src/pages/index.js โดยการเพิ่ม Link ไปยังหน้า About แบบนี้

1
import React from 'react'
2
import { Link } from 'gatsby'
3

4
export default () => {
5
  return (
6
    <div>
7
      <h2>Ahoy!</h2>
8
      <p>This site is running on Gatsby.</p>
9

10
      <Link to="/about">Go to About Page</Link>
11
    </div>
12
  )
13
}

Gatsby with GraphQL

GraphQL ใน Gatsby เป็น Data layer นั่นเอง โดยปกติ จะใช้ GraphQL มา query ข้อมูล แล้วใช้ createPages() API เพื่อสร้างหน้า html หรือดึงข้อมูลจาก Data files (XML, JSON, YML) ก็ได้เช่นกันครับ

ซึ่งการอ่านพวกไฟล์ ต่างๆ เราจำเป็นต้องใช้พวก Plugins ครับ ในหัวข้อถัดไป

แต่ตอนนี้ เราลอง GraphQL ง่ายๆ ก่อน โดยอ่านค่าจากไฟล์ config ที่เราจะเพิ่มไว้ใน gatsby-config.js กันครับ ลองเพิ่ม siteMetadata ลงไปดู แบบนี้

เวลาแก้ไขไฟล์ gatsby-config.js อย่าลืม restart server ใหม่นะครับ เพื่อให้ Gatsby build และ generate ไฟล์ใหม่

1
module.exports = {
2
  /* Your site config here */
3
  siteMetadata: {
4
    title: 'Getting started with Gatsby'
5
  }
6
}

จากนั้น ไฟล์ src/pages/index.js เพิ่มนี้ลงไปครับ

1
import React from 'react'
2
import { Link, graphql } from 'gatsby'
3

4
export default ({ data }) => {
5
  return (
6
    <div>
7
      <h2>Ahoy!</h2>
8
      <p>{data.site.siteMetadata.title}</p>
9
      <p>This site is running on Gatsby.</p>
10

11
      <Link to="/about">Go to About Page</Link>
12
    </div>
13
  )
14
}
15

16
export const query = graphql`
17
  query {
18
    site {
19
      siteMetadata {
20
        title
21
      }
22
    }
23
  }
24
`

ซึ่งแบบนี้ คือการใช้แบบ Page Query เราสามารถเรียก graphql ได้ทุกไฟล์ที่อยู่ในโฟลเดอร์ src/pages ข้อมูลจาก query ที่ได้ จะกลายเป็น props.data สามารถใช้ได้ภายใน Component เลยครับ

ส่วน Query อีกแบบคือการใช้ StaticQuery กรณีที่เราไม่ได้ใช้ Page Component ก็คือกรณีที่เราทำ Component ขึ้นมาเอง แล้วเราอยาก Query ข้อมูล เราจะใช้แบบนี้ครับ

สมมติผมสร้าง Component Header ขึ้นมาแบบง่ายๆเลย

1
import React from 'react'
2

3
const MyHeader = () => {
4
  return (
5
    <div>
6
      <p>This is my header</p>
7
    </div>
8
  )
9
}
10

11
export default MyHeader

เราใช้ useStaticQuery แบบ Hook ได้เลย ส่วน query ก็ใช้อันเดิมได้ แบบนี้

1
import React from 'react'
2
import { useStaticQuery, graphql } from 'gatsby'
3

4
const MyHeader = () => {
5
  const data = useStaticQuery(query)
6

7
  return (
8
    <div>
9
      <p>{data.site.siteMetadata.title}</p>
10
    </div>
11
  )
12
}
13

14
const query = graphql`
15
  query {
16
    site {
17
      siteMetadata {
18
        title
19
      }
20
    }
21
  }
22
`
23

24
export default MyHeader

ส่วน Gatsby ยังมี Graphiql เอาไว้ให้เราได้ลอง Query ด้วยนะครับ http://localhost:8000/\_\_\_graphql มีทั้งส่วน Explorer แบบ Click เพื่อ Query และก็ Code Explorer เรียกว่าสะดวกสำหรับคนไม่แม่น GraphQL เลยแหละ

Gatsby Starter

ต่อมา Gatsby Starter จริงๆเป็น Starter Project ที่มีคนทำ Template ของ Gatsby ไว้ให้แล้ว เราสามารถสร้างเว็บจาก template เหล่านั้นได้เลย ข้อดีคือ บาง starter ทำพวก SEO, Google Analytics ใส่ Disqus comment ใส่ Tags, Categories ทำ RSS Feeds หรือ Offline ไว้ให้เราแล้ว เช่น

• Gatsby starter blog - ไว้สำหรับทำบล็อกโดยเฉพาะ
• Gatsby Advanced starter

ก็สามารถไปลองใช้ Starter ได้ครับ ประหยัดเวลา ไปได้เยอะเลย จะเลือกแบบ web ธรรมดา แบบ blog แบบ e commerce ก็มีให้เลือกครับ

Gatsby Plugin

ต่อมาพูดถึง Starter ก็ต้องพูดถึง Plugins ต่อกันเลย ซึ่งจุดดีอีกเรื่องของ Gatsby คือ Plugins นั่นเองครับ มีทั้ง Official Plugins และแบบ Developers driven ช่วยๆกันสร้างครับ

Plugins แบ่งหลักๆคือ

1. Source Plugins - คือ Plugins จำพวก APIs, Database หรือพวก local file data ของเราต่างๆ นั่นเอง
2. Transform Plugins - คือ Plugins ที่เอาไว้อ่านไฟล์ และแปลงเป็นข้อมูลครับ ตัวอย่างที่เห็นชัดเจนคือ Markdown จะถูก transform จนเป็น graphql schema ที่เราสามารถ query มาแสดงบนหน้าเว็บได้นั่นเอง

ลองใช้ Source Plugins เพื่ออ่านไฟล์ดูครับ เราใช้ gatsby-source-filesystem ติดตั้งผ่าน npm เลย

npm install gatsby-source-filesystem

จากนั้นเพิ่มนี้ลงไปที่ไฟล์ gatsby-config.js ตัว source-filesystem ตั้งค่า คืออ่าน source จาก path /src/pages นั่นเอง ไฟล์อื่นๆไม่อ่าน

1
module.exports = {
2
  siteMetadata: {
3
    title: 'Getting started with Gatsby'
4
  },
5
  plugins: [
6
    {
7
      resolve: `gatsby-source-filesystem`,
8
      options: {
9
        name: `src`,
10
        path: `${__dirname}/src/`
11
      }
12
    }
13
  ]
14
}

เมื่อเรา Start gatsby อีกรอบ และเข้าไปดู graphiql เราจะเห็น

Credit ภาพจาก Gatsby ครับ https://www.gatsbyjs.org/tutorial/part-five/

ลอง query ดูข้อมูล files ของเราใน src/pages/index.js ดู

1
import React from 'react'
2
import { Link, graphql } from 'gatsby'
3
import MyHeader from '../components/MyHeader'
4

5
export default ({ data }) => {
6
  return (
7
    <div>
8
      <MyHeader />
9
      <h2>Ahoy!</h2>
10
      <p>{data.site.siteMetadata.title}</p>
11
      <p>This site is running on Gatsby.</p>
12

13
      <Link to="/about">Go to About Page</Link>
14

15
      {data.allFile.edges.map(({ node }, index) => (
16
        <p key={index}>
17
          <strong>{node.relativePath}</strong> <span>({node.prettySize})</span>
18
        </p>
19
      ))}
20
    </div>
21
  )
22
}
23

24
export const query = graphql`
25
  query {
26
    site {
27
      siteMetadata {
28
        title
29
      }
30
    }
31
    allFile {
32
      edges {
33
        node {
34
          relativePath
35
          prettySize
36
          extension
37
          birthTime(fromNow: true)
38
        }
39
      }
40
    }
41
  }
42
`

ส่วน remark transform ที่เอาไว้อ่าน Markdown เป็น Graphql ก็ทำแบบเดียวกันครับ คือลง Plugin แล้วไปเพิ่มใน gatsby-config.js จากนั้นก็จะสามารถ Query ได้ ลองดูใน graphiql ประกอบครับ มี field allMarkdownRemark เพิ่มมา นั่นเอง

Deploy

สุดท้ายการ Deploy เราจะใช้ Netlify เพราะว่ามันง่ายสุดๆเลยครับ แบบง่ายสุดคือ จับโยนโฟลเดอร์ลงไปเลย

ซึ่งก่อน deploy เราก็แค่ build production ครับด้วยคำสั่ง

npm run build

ก็จะได้โฟลเดอร์ public ไป deploy ได้เลยครับ (จับโยนลง Netlify)

หรือจะ Deploy ผ่าน Git ก็ได้ครับ Github/Gitlab/Bitbucket รองรับหมดเลย

เลือก Provider และ Git repo ของเราได้เลย เป็นอันเรียบร้อย

สุดท้าย Gatsby ก็ยังมีอะไรให้ลองเล่น ลองศึกษาอีกเยอะครับ หวังว่าบทความนี้จะเป็นบทความจุดประกาย หรือเป็นแนวทางให้ใครหลายๆคน ลองเอา Gatsby ไปทำเว็บ ไปทำบล็อกตัวเองกันนะครับ

ขอบคุณครับ

Happy Coding ❤️

Reference

• Gatsby Tutorial