Gatsby 로 Blog 만들기

8 min readFeb 3, 2019

Gatsby JS 란 무엇인가

Gatsby JS 는 정적 HTML 생성기 이다.

일반적인 단순한 페이지는 하나의 HTML 로 만들어 질 수 있다.

사이트가 커지고 페이지 별로 HTML 이 생성되어야 한다면, 페이지에 접근할때 마다 DB 에서 정보를 받아와서 HTML 을 만들어 내는 SSR 방식,
API 로 해당 페이지 정보를 받아와서 HTML 페이지를 만들어내는 CSR 방식,
그리고, 그때마다 페이지를 만들어 내는것이 아닌 페이지를 원하는 시점 빌드 시점마다 만들어내는 방식이 있을 수 있다.

Gatsby JS 는 가공할 정보를 GraphQL 에서 가져와서 빌드 시점에 정적 페이지를 만들어 내는 방식을 취하고 있다.

이미 배포할때 각 페이지 정보들이 모두 배포시점에 만들어져지므로, 따로 앱서버가 필요하지 않다는 장점이 있다.

Gatsby JS 기본 정보

Gatsby CLI 를 이용해서 GatsbyJS를 사용할 수 있다.
이때 Gatsby CLI는 Webpack, Reactjs, React-route 등을 이미 포함하고 있으므로, 이를 간단하게 이용할 수 있게 해준다.

현재 19년 2월을 기준으로 Gatsby 버전은 2.0.107 Gatsby CLI 버전은 2.4.8 이며, 리액트 버전은 16.7.0 이다.

GatsbyJS 는 페이지가 로드되기 전에 GatsbyJS 관련 스크립트를 먼저 다운받고 이후의 페이지에서 필요한 JS와 CSS 정보를 다운 받는다.

5분만에 설치하고 실행하기

1. npm install — global gatsby-cli
2. gatsby new [프로젝트 폴더명]
3. cd [프로젝트 폴더명]
4. gatsby develop // 개발모드로 시작한다.

프로젝트 구조 살펴보기

/.cache
Gatsby의 내부 캐시이다.
/public
gatsby build 의 Output이 들어간다.
/plugins
npm에 들어가지 않은 라이브러리나 플로그인을 넣을 수 있다.
/src
- /pages
파일 이름과 폴더 이름을 경로로 따르는 페이지
- /component
컴포넌트의 모음 폴더
- /images
이미지 모음 폴더
/static
static 폴더에 파일을 저장하면 Webpack 에서 파일을 처리하지 않고 공용 폴더에 복사되는 폴더가 존재한다.

설정 파일 살펴보기

gatsby-config.js
Gatsby 사이트의 기본 구성 파일이다.
여기서 사이트 제목 및 설명, 포함 할 Gatsby 플러그인 등 사이트 (메타 데이터)에 대한 정보를 지정할 수 있다.
gatsby-browser.js
Gatsby 브라우저 API 의 사용이 있는 경우 사용한다.
gatsby-node.js
Gatsby 노드 API 사용이 있을 경우의 사용법을 정의한다.
gatsby-ssr.js
Gatsby 서버 사이드 렌더링 API 사용이 있을 경우의 사용법 정의한다.

Gatsby 로 블로그 만들기

Gatsby는 React를 사용하여 SPA 페이지를 쉽게 구현할 수 있게 해준다.

이를 이용하여, 간단한 예제로 블로그를 만들어 보자.

Gatsby 로 Markdown 블로그 만들기

블로그를 만들때 Post 내용을 Markdown 으로 작성해 두면, 많은 곳에서 재사용하기 쉬우므로, Markdown 문법을 이용해서 블로그를 만들어보자.

Gatsby가 Markdown 파일을 읽기 위해서는 몇가지 세팅이 필요하다.

Gatsby가 Markdown 파일을 읽어서 정적 HTML 파일로 만드는 방법은 아래 순서대로 이루어진다.

1. `gatsby-source-filesystem` 로 마크다운 파일을 읽는다.
2. `gatsby-transformer-remark` 로 마크다운 파일을 해석한다.
3. 해석된 데이터를 GraphQL로 가져져온다.
4. 가져온 정보를 미리 설정한 템플릿에 배치한다.
5. Gatsby의 createPageAPI를 사용하여 데이터와 템플릿을 정적 페이지 만든다.

gatsby-config.js 에 필요한 정보 설정하기

Gatsby 로 마크다운을 읽기 위해서는 gatsby-source-filesystem 플로그인과 마크다운을 필요한 정보로 해석하기 위한 gatsby-transformer-remark 이 필요하다.

해당 내용을 gatsby-config.js 에 세팅해야 한다.

// gatsby-config.js
plugins: [
 {
 resolve: `gatsby-source-filesystem`,
 options: {
 name: `markdown-pages`,
 path: `${__dirname}/src/마크다운 파일이 위치할 폴더이름`,
 },
 },
 `gatsby-transformer-remark`,
]

마크다운을 Html로 변경하기 위한 템플릿 만들기

Gatsby는 GraphQL 를 이용해서 Markdown 데이터 정보를 가져온다.

가져온 정보는 Template 에게 주어지며, 정의한 곳에 세팅된다.

// markdown-template.js
import React from "react"
import { graphql } from "gatsby"

export default function Template({data}) {
  const { markdownRemark: { frontmatter, html } } = data;
  return (
    <div>
        <h1>{frontmatter.title}</h1>
        <h2>{frontmatter.date}</h2>
        <div
          dangerouslySetInnerHTML={{ __html: html }}
        />
    </div>
  )
}

export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        date(formatString: "YYYY년 MM월 DD일 ")
        path
        title
      }
    }
  }
`

템플릿을 정적 HTML로 만들기

Gatsby는 Node.js API 으로 정적페이지를 만들어 낸다.
이를 사용하기 위해서는 gatsby-node.js 에 세팅해야 한다.

GraphQL 의 allMarkdownRemark 가 읽어온 모든 마크다운을 가져온다.

edges에 각각의 node ( markdown ) 정보가 들어 있는데 이 정보와 위해서 작성한 Template 을 합성하여 createPage 에서 실제 정적 파일을 만들어 낸다.

// gatsby-node.js
const path = require("path")

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions

  const blogPostTemplate = path.resolve(`템플릿 파일`)

  return graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      return Promise.reject(result.errors)
    }

    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.frontmatter.path,
        component: blogPostTemplate,
        context: {},
      })
    })
  })
}

첫 포스트 작성해보기

markdown post 를 작성할 때 중요한점은 GraphQL 에게 해당 파일의 정보를 알려줘야 한다는 점이다.

---
path: "url 정보"
date: "생성 일자"
title: "타이틀 정보"
---
마크다운 내용

- 과 -사이에 path 정보를 작성하여야 GraphQL 에서 frontmatter 으로 해당 파일 정보를 처리할 수 있게 된다.

이전 markdown-template.js 에서 작성한 graphql 에서 현재 Path와 마크다운에서 존재하는 Path를 비교하여 필요한 정보를 Post에 표현하게 된다.

Gatsby 를 Netlify 에 배포하기

이제 작성한 Gatsby를 실제 접속 가능한 사이트로 배포해 보자.

Netlify 란 무엇인가

Netlift는 정적 페이지를 무료로 빌드 및 배포할 수 있게 도와주는 사이트 이다.

특징은 HTTPS 를 제공하며, Github 의 특정 Repo 의 특정 브랜치가 Push 될때 마다 자동 빌드 배포를 도와 준다는 점이다.

Netlify 시작하기

아래순으로 진행하면된다.

1. 가입한다.
2. GitHub, GitLab, Bitbucket 중에서 연결할 서비스를 선택한다.
3. 선택한 서비스의 특정 Repo를 선택한다.
4. 선택된 Repo의 Branch를 선택한다.
5. 빌드 될 스크립트 ( 예시 gatsby build ) 를 입력한다.
6. 빌드된 폴더 ( 예시 /public ) 를 입력한다.
7. 빌드와 배포되는것을 지켜본다.

이제 해당 브랜치에 push 할때마다, netlify 에서 자동으로 해당 내역을 빌드 배포한다.

추가적으로 나중에 필요한 도메인이 있다면 설정 할 수 있다.