Dev

Gatsby로 웹사이트 제작 (+ Github Pages = Github Actions)

Joo 2019. 12. 24. 15:02

Github Pages가 나온 뒤로 수많은 정적 사이트 생성기가 나왔다. github가 처음에 ruby로 만들어지다보니 pages도 jekyll이라는 ruby 기반의 생성기로 소개되었다. 나도... 지금까지 jekyll만 사용해 봤었다. 하지만 모두가 알다시피 jekyll은 절로 욕이 나올 정도로 느렸고 사용방법도 복잡하다. ruby를 주로 사용하는 사람들이야 귀찮지 않겠지만 나에게는 ruby 개발환경을 만드는 것도 귀찮다.

Gatsby는 React, Graphql 이라는 핫한 기술을 사용한 사이트 생성기다. 처음에는 정적 사이트를 React랑 graphql로 어떻게 만든다는 건지 잘 상상이 되지 않았다. 실제로 demo를 봐도 동적으로 페이지를 만드는데 이게 무슨 정적 사이트인가 했다.

이후에 구글 봇이 브라우저처럼 사이트를 모두 렌더링한다는 것을 알고서야 그럴수도 있구나 생각은 했다. 하지만 여전히 graphql은 무슨 수로 사용을 하는건가 괜히 핫한 프로젝트 이름만 붙여놓은 이상한 프로젝트 아닌가 했다. 그냥 미리 data를 json 파일로 만들어놓고 불러오는 거를 너무 대단히 포장하는 거라고 생각했다.

그런데 이상하게도 next.js, nuxt.js, hugo 등의 더 다양한 생성기가 나오고 있어서 대체 뭐길래 이렇게 자꾸 프로젝트가 나오는건지 궁금해졌다. 그래서 가장 먼저 관심을 가졌었던 gatsby를 한번 끝까지 알아보기로 했다.

Gatsby 기본 동작 구조

gatsby는 내가 예상했던대로 data json파일을 미리 생성해서 필요할때 불러다 쓴다. 페이지 렌더링은 react로 하고 상태관리는 redux를 사용한다. (이건 에러메시지 보다가 발견했는데 소스코드보니 사용하고 있었다) 물론 모든 것을 react로 처리하지는 않는다. 모든 진입점에 대한 html파일도 만들어둔다. build 과정에서 데이터를 모두 불러와서 json, html을 만든다.

결국 gatsby는 seo를 지원하는 웹사이트 생성과 데이터의 json 변환을 쉽게 해주는 toolkit이라고 할 수 있다.

Gatsby 시작하기

Gatsby는 시작하기 쉽게 튜토리얼을 제공한다. 환경설정부터 스타일, 데이터 생성, url 커스텀, 사이트 배포까지 따라해볼 수 있다. 아마도 나처럼 react, redux, router, webpack, babel에 대한 경험이 있다면 따라하면서 비교적 쉽게 (;;;) 이해할 수 있다.

이런 튜토리얼 대신 편하게 사이트를 만들고자 한다면 theme를 사용할 수도 있다. blog theme는 하라는대로 디렉토리에 파일만 넣어두면 블로그를 만들어준다. docz theme도 역시 디렉토리에 파일만 넣어두면 docz 문서 사이트를 만들 수 있다.

이렇게 만든 사이트는 build를 하면 public 디렉토리에 사이트가 만들어지는데 이걸 github pages로 만들거나 이걸로 원하는 곳에 배포를 할 수 있다.

Github Actions로 Github Pages생성

surge.sh, netlify.com등 테스트를 해볼 수 있는 곳이 있지만 가장 쉬운 것은 아무래도 github pages다. 앞서 말했다시피 public 디렉토리를 pages root로 지정하면 build 후 git push만 하면 된다.

문제는 이것이다. 컨텐츠를 변경할 때마다 매번 build를 하고 build한 것을 모두 push해야하다니. 귀찮기도 하고 commit도 복잡해진다. 이럴 때 쓰라고 github actions가 있다.

name: Gatsby Publish

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - name: build
        run: |
          npm ci
          npm run build -- --prefix-paths
      - uses: peaceiris/actions-gh-pages@v2
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          PUBLISH_BRANCH: gh-pages
          PUBLISH_DIR: ./public

peaceiris/actions-gh-pages를 사용하면 간단히 옵션을 지정하는 것 만으로 gh-pages 브랜치를 만들고 빌드 결과물인 public 디렉토리 내용을 브랜치에 넣을 수 있다. 나는 이제 컨텐츠에 대해서만 commit하고 push하면 된다.

미리 이걸 알았다면 지원이 종료되어버린 gitbook같은 거 안써도 됐을텐데 늦게서야 이걸 알아본 걸 반성한다. 이젠 뭐가 나오면 일단 해보고 공부해본 후에 사용할지말지를 결정해야겠다.

많이들 이걸로 블로그를 만들던데 사실 나는 그닥 하고 싶지는 않다. 이미지도 별도로 다 파일로 만들어서 넣어놔야하지, 미리보기를 하려면 서버실행해서 확인해야하지, 여러모로 좋기도 하지만 귀찮은 일도 많은 것 같다. 티스토리나 텀블러가 이미 괜찮긴 하지만 좀 더 발전해주면 훨씬 더 좋은 블로그 툴인 것 같다.

반응형