GatsbyJS + Contentful로 정적 블로그 구축하기

March 15th, 2020

개요

줄곧 정적 블로그를 만들겠다고 벼르고 있었으나 생각보다 쉽게 개념들을 익히기가 어려웠다. gatsby.js를 사용하기로 마음먹은지도 꽤 오래었고 프로젝트도 파는데 성공했지만 갑자기 contentful이라는 부가 기능에 꽂혀서 이걸 적용하기 위해 다시 삽질을 반복하였다.

기존 gatsby 프로젝트에 contentful 플러그인을 적용해 보려니 생각보다 쉽지가 않았다. 그래서 일단 contentful을 포함한 gatsby starter을 설치해서 하나하나 익혀보자 하는 마음으로 starter를 설치해보았다. 결과는 성공. 근데 생각보다 맘에 들잖아?

연습삼아 만든 프로젝트를 그냥 이걸 내 블로그로 쓰기로 했다-_-ㅋㅋ 오랫동안 삽질한 것에 비하면 구축 자체는 비교적 간단하게 되었다.

좀 허망하긴 하지만 그간 개념을 단련해온 것에 대한 보답이라 생각하고 다른 사람들에게도 간단하게 구축할 수 있는 방법을 공유하려 한다.

우선 Gatsby.js + Contentful을 사용한 블로그 구축의 장점은 다음과 같다.

Gatsby.js와 Contentful의 장단점

  • Gatsby.js

    • 정적 블로그를 제공하는 솔루션
    • 서버 비용이 공짜다 (github.io를 활용하면)
    • 공짜이면서도 리액트 기반으로 커스터마이징이 가능하다.
    • 각종 강력한 플러그인을 추가로 설치할 수 있다.

  • Contentful

    • 정적 블로그 컨텐츠를 기존 파일 기반(md파일)으로 직접 생성하는 GUI 기반으로 생성, 관리할 수 있다.
    • 이미지 삽입 기능을 제공하고 날짜 입력 등 각종 형식 삽입이 편리하다.
    • 방금 안 사실인데 5000 포스트까지만 무료라고 한다 (5000개 쓰기전에 갈아타야지)

설치

터미널에 들어간다.

// gatsby를 글로벌 설치한다.
npm install -g gatsby
// gatsby starter를 이용하여 프로젝트를 생성한다. 프로젝트명 형식을 반드시 지켜주자.
gatsby new 깃허브아이디.github.io https://github.com/contentful-userland/gatsby-contentful-starter

잠시 터미널을 떠나 contentful.com 으로 접속후 회원가입한 뒤 새 공간을 생성한다.

Settings > API_KEYS로 들어가서 접속 토큰 및 관리 토큰을 생성해 준다. 다시 터미널로 돌아가자!

cd 프로젝트_이름
// 아래 명령어를 입력한후 발급한 관리 토큰 및 space id, 접속 토큰을 입력한다
yarn run setup
// 잘 뜨는지 테스트해보자
yarn run dev

localhost:8000으로 접속했을 때 아래처럼 잘 뜬다면 성공한 것이다!

이제 당신의 정적 블로그가 만들어졌다. (첫번째 게시글은 필자가 내용을 수정한 것임) gatsby-localhost-1

필자의 첫번째 게시글 처럼 내용을 수정해 보고 싶다면 contentful.com으로 돌아가서 Content 탭을 누른뒤 원하는 내용을 수정해보자.

다시 yarn run dev를 실행해서 위의 필자의 스크린샷 처럼 변경사항이 잘 반영되는지 테스트.

yarn run dev

간단하게 로컬상에서 정적 블로그를 생성할 수 있게 되었다. 이제 github에 배포해보자.

Github에 배포하기

깃허브에서 새 Repository를 생성한다.

본인 Organization에서 깃허브아이디.github.io 형식(필수)으로 저장소 이름을 입력해준다.

위 형식으로만 정적 사이트를 깃허브에서 호스팅해주는 것 같다.

저 방식 말고도 "깃허브아이디.github.io/서브네임" 형식으로도 구축이 가능하긴 하다고 한다.

github deploy 1

이제 배포를 해보자. 터미널로 이동한다

cd 프로젝트_이름

// git 저장소로 등록
git init

// 원격 저장소와 연결
git remote add origin 깃허브아이디.github.io

// package.json > scripts > deploy 스크립트에 -b master 추가
"deploy": "gatsby build --prefix-paths && gh-pages -d public -b master",

// 현재까지의 변경사항을 develop 브랜치로 푸시한다 (master가 아님)

develop에 푸시하는 이유는 우리의 블로그 빌드 파일이 master 브랜치로 push될 예정이기 때문이다.

터미널로 복귀하자.

// 아래 명령어 실행 후 깃허브 정보 입력
yarn run deploy

이렇게 원격 서버에 배포하는 방법까지 알아보았다.

"깃허브아이디.github.io"로 접속해서 잘 배포된 여러분의 블로그를 확인하자! 끝!