자신만의 블로그를 Gatsby를 이용해 만들고, Netlify에 자동배포하여 운영하는 법을 알아봅시다.

Gatsby란?

Gatsby는 웹 또는 앱을 빠르게 빌드할 수 있게 돕는 React 기반, 오픈소스 프레임워크입니다. - Gatsby사이트 공식설명

Gatsby로 정적 웹 사이트를 생성할 수 있습니다. 웹 컨텐츠를 Markdown으로 된 문서나 Contentful, WordPress 같은 CMS (Contents Management System)로 작성하면, 이를 HTML + CSS + JS로 변환하여 사이트를 생성해줍니다.

사이트의 디자인 또한 처음부터 사용자가 모두 조정할 수 있지만, 양질의 테마 또한 제공합니다. 이 글에서는 본 블로그에서도 사용하고 있는 Gatsby starter bee 테마를 이용하여 만들어 보겠습니다. 더욱 다양한 테마를 구경하고 싶다면 아래 링크를 통해 확인해 보세요.

Gatsby Starters

Gatsby 설치

Gatsby를 설치하기 위해서는 npm, yarn같은 node 패키지 매니저가 필요합니다. node js를 설치하면 npm 또한 설치되므로 node js만 설치하시면 됩니다.

Node.js 설치

사이트에 들어가면, LTS (Long Term Support) 버전과 Currnet 버전이 있는데 안정버전인 LTS를 선택해서 설치합시다.

설치 후 cmd나 터미널을 실행하여 node --version 명령어로 해당 nodejs의 버전을 확인해 봅시다. 설치가 잘되었다면 다음과 같이 버전 정보가 표시됩니다.

> node --version
v10.16.0

이제 Gatsby를 설치합니다. 다음 명령어를 입력해주세요.

npm install -g gatsby-cli

npm을 통해 gatsby를 설치합니다. 만약에 접근 권한에 대한 오류가 난다면, Windows의 경우 cmd를 관리자 권한으로 열어주세요. linux 환경에서는 sudo 만 해주시면 됩니다.

이제 gatsby를 사용할 준비가 되었습니다. cd 명령어로 사이트를 관리할 빈 디렉토리로 이동 후 다음 명령어를 실행해 봅시다.

gatsby new blog https://github.com/JaeYeopHan/gatsby-starter-bee

blog의 부분에는 초기 파일을 생성할 디렉토리 명을 입력합니다. 자신이 개설할 사이트의 이름을 사용하는 것이 관리하기 좋겠죠?

여기서 명령에 뒷부분의 링크는 사용할 테마의 주소입니다. 사용할 테마의 파일이 올라와 있는 github에서 clone해 오는 것입니다. 혹시 다른 테마로 생성하고 싶다면 다른 테마의 주소를 넣으면 됩니다.

명령이 완료되면 blog 디렉토리에 다양한 파일이 생성된 것을 확인할 수 있습니다. cd로 해당경로로 이동해주세요. 그 다음에 gatsby develop을 실행하면 로컬 환경에서 생성될 페이지를 미리 볼 수 있습니다.

cd blog
gatsby develop

Compiled successfully가 나올 때 까지 기다렸다가 완료되면 인터넷 창에 http://localhost:8000을 입력하면 다음과 같이 사이트가 표시됩니다.

블로그에 글쓰기

글은 content/blog/아래에 작성하면 됩니다. 해당 경로에 디렉토리를 생성하면 그것이 카테고리가 됩니다. 현재에는 development 경로 안에 글이 작성되어 있습니다. 해당 경로를 지우고 blog 폴더를 생성하여 카테고리를 만들어 봅시다.

그 다음 md 파일을 생성하여 Markdown 문법으로 글을 작성하시면 됩니다. CMS를 통해 작성하는 법은 추후 해본 후에 포스팅 하겠습니다.

본 테마는 간단한 포스트 생성 cli 툴도 제공합니다. npm run post를 입력 후에 지시에 따라 md파일을 생성합니다.

npm run post

> gatsby-starter-bee@0.1.0 post D:\blog
> node ./cli/create-new-post.js

i  info                         Create new post::  2019-07-28 20:07:24
►  start                        Start to process!

? Select a category (Use arrow keys)
? Select a category [[ CREATE NEW CATEGORY ]]
? Enter the customized category blog
? Enter the customized category blog
? Enter the title (New post title) 내 블로그
? Enter the title 내 블로그

√  success                      Success to create new post!
*  note                         /blog/내-블로그.md
---
title: 내 블로그
date: 2019-07-28 20:07:24
category: blog
---

블로그 설정하기

이제 블로그의 메타데이터를 수정해 봅시다. gatsby-meta-config.js 파일을 열면 다음과 같이 되어있습니다.

module.exports = {
  title: `나는 블로거다`,
  description: `블로거의 일상이야기`,
  author: `Blogger`,
  introduction: `일상과 기술 이야기를 적는 블로그`,
  siteUrl: ``, // Your blog site url
  social: {
    twitter: ``, // Your Twitter account
    github: ``, // Your GitHub account
    medium: ``, // Your Medium account
    facebook: ``, // Your Facebook account
  },
  icon: `content/assets/felog.png`, // Add your favicon
  keywords: [`blog`, `tech`],
  comment: {
    disqusShortName: '', // Your disqus-short-name. check disqus.com.
    utterances: '', // Your repository for archive comment
  },
  configs: {
    countOfInitialPost: 10, // Config your initial count of post
  },
  sponsor: {
    buyMeACoffeeId: '',
  },
  share: {
    facebookAppId: '', // Add facebookAppId for using facebook share feature v3.2
  },
  ga: '', // Add your google analytics tranking ID
}

각 항목들에 대해 간단히 설명하겠습니다.

첫 페이지의 프로필 사진은 content/assets/profile.png를 다른 파일로 수정하면 됩니다. 수정할 파일명을 기존과 같게 하면 따로 설정하실 것은 없습니다.

disqus 연동할 때의 short name 얻는 법이나, facebookAppId 얻기, google analytics 연동방법은 다음에 차근히 다뤄보겠습니다.

이제 블로그를 배포할 준비가 되었습니다. 🎉🎉🎉

글이 좀 길어진 관계로 다음 글에서 Netlify에 블로그를 배포하는 법을 알아보겠습니다.