[Gatsby] 깃헙 블로그 시작하기

Gatsby로 개인 블로그 만들어보자.

Gatsby?

React와 Graphql을 사용하는 정적페이지 생성기입니다. GatsbyJS는 여러 Data Sources(CMSs, Markdown, Data-APIs, Databases, YAML, JSON, CSV, etc.)에서 가져와서 빌드 시점에서 정적 페이지를 만들어 내고 있습니다. 배포 시점에서 페이지 정보들이 만들어지기 때문에 앱서버가 따로 필요하지 않다는 장점이 있습니다.

Why Gatsby?

지금까지 정말 많은 블로그를 전전해봤는데요...

일단 아직까지도 고민이긴 합니다.

Tistory은 아무래도 시작하기가 편하고, 검색이 잘 되고 광고 플러그인을 달기도 간편해서 수익 올리기가 상대적으로 간편한 점이 있습니다.

Medium은 세계적으로 유명한 블로그인만큼 영어로 포스팅을 할 경우 Global하게 Posting을 할 수 있다는 점이 매력적이고, 원래 유료 서비스이기 때문에 수익도 올릴 수 있지만 한국에서는 등록이 어려워서 많이 사용하지 않고 있죠. 저같은 경우는 나중에 좀 더 깔끔하게 기술 블로그를 작성할 수 있을 때 영어로 포스팅을 도전해볼 생각입니다.

Velog는 깔끔한 UI와 마크다운을 지원하지만

HTML과

업데이트인지 일시오류였는지 모르겠지만 이제 HTML태그로 이미지 사이즈 조절이 가능해졌네요! 일부 마크다운 표가 어그러져서 매번 이미지로 올려야하는 부분적인 불편함을 느꼈어요. 물론 그래도 지금까지 중에서는 가장 편리해서 잘 쓰고 있습니다.

그렇지만 역시 개발자로서 자존심을 채우기 위해(?) 그리고 만들면서 개발 지식을 배울 수도 있다는 점에서 Github 블로그를 만들어보려고 합니다. 용량 10G의 제한이 있다는 점을 잘 인지하고, 적당히 글을 아카이빙 하면서 활용한다면 충분히 오랫동안 운영할 수 있지 않을까 싶어요.

github 블로그 생성기도 정말 여러가지가 있죠. 대표적으로 가장 유명한 Jekyll을 생각해봤는데요, 아무래도 ruby로 작성되어 있다보니 제가 익숙하지 않아 커스터마이징하기 어려울 것이란 생각이 들더군요. Hexo로도 만들어 봤는데, 템플릿 코드 작성에서 여러모로 불편함을 많이 느꼈습니다...

React를 배워야 하기도 하고, 최신 프론트엔드 기술의 거의 집합체라고 할 수 있는 Gatsby를 그래서 선택했습니다!

0. Set Up Your Developement Environment

Gatsby를 사용해 블로그를 만들기 앞서 환경설정해야 할 부분이 있습니다.

Node.js 설치

일단 저는 윈도우에 설치를 해야하니, 윈도우용 Node.js를 홈페이지에서 다운받아 설치합니다.

설치가 완료되고 버전 확인을 해봅니다.

PS C:\Users\Ha> node --version
v12.15.0
PS C:\Users\Ha> npm --version
6.13.4

Git 설치

각 운영체제마다 Git 설치하는 법이 다릅니다. 튜토리얼을 보고 설치해보세요.

• Install Git on Windows

저같은 경우는 Git bash를 설치해서 사용하고 있습니다.

Gatsby CLI

이제 shell에서 gatsby cli를 사용하기 위해 다운받아볼까요.

npm install -g gatsby-cli

1. Gatsby Theme 고르고 적용하기

바닥부터 만들어가도 좋지만 저는 처음 만들어보는 것이기도 하고, 시간을 절약하기 위해서라도 여러 Gastby Starter 중에서 하나를 선택해서 커스터마이징 하려고 합니다. 사람마다 스타일이 다를 테니 원하시는 방향으로 선택해서 진행해보세요.

저는 gatsby-starter-blog 를 사용해서 시작합니다.

git clone https://github.com/gatsbyjs/Gatsby-starter-blog.git blog
cd blog

git repo를 클론해오고 나서 npm install 를 해주어야 디펜던시들을 설치할 수 있습니다.

npm i

clone 해온 git 파일에 대한 정보를 삭제하고 본인의 git repo를 하나 생성해서 push 합니다.

rm -rf .git
git init 
git add .
git commit -m "Init blog project"

git remote add origin https://github.com/YourID/YourGitRepoName.git
git push -u origin master 

develop을 시작합니다.

npm run start

이제 해당 사이트가 http://localhost:8000에서 돌아가고 있는 것을 확인하실 수 있어요!

2. Config 정보 수정해서 커스터마이징하기

gatsby-config.js

...
  siteMetadata: {
    title: `Blog Name`,
    author: `Your Name`,
    description: `Something about you.`,
    siteUrl: `https://YourURLNAME.netlify.com/`,
    social: {
          twitter: `yourID`
    },
...

src/components/bio.js

자기소개 글을 써줍니다. 저는 트위터를 사용하지 않아서 주석처리 했어요.

...
      <p>
        Written by <strong>{author}</strong> who lives and works in Seoul 
        building useful things.
        {` `}
        {/* <a href={`https://twitter.com/${social.twitter}`}>
          You should follow him on Twitter
        </a> */}
      </p>
...

3. 호스팅 서비스를 이용해 배포해보기

Github에서 블로그를 배포하면 편리한 이유 중에 하나가 Netlify를 활용할 수 있어서이기도 하죠.

github ID로 간단하게 가입하고 repo와 연결해서 netlify site로 배포해줄 수 있습니다.

New site from Git 으로 git repo를 가져와서 배포를 시작하고, Domain settings 를 이용해 이름을 바꿔줄 수 있어요. 여기까지 했으면 일단 첫걸음은 뗐습니다.

Reference

• Gatsby, https://www.gatsbyjs.org/tutorial/