Gatsby로 만드는 Github 블로그

cogito288·2020년 8월 6일
4

github blog

목록 보기
1/1

하나씩 알아가는 Github Blog + Gatsby

개념 소개는 훌륭한 포스트들이 많으니 넘어가고 실제로 어떻게 만들 수 있는지 하나하나 기록해보자.

Gatsby를 설치해볼까?

아래의 과정은 우분투를 기준으로 Node js 부터 설치한다.

Node js 및 npm 설치

https://nodejs.org/ko/로 설치하거나 아래 명령어로 설치 가능

$ sudo apt update
$ sudo apt -y upgrade

$ sudo apt update
$ sudo apt -y install curl 
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

$ sudo apt -y install nodejs
$ sudo apt -y  install gcc g++ make

$ node --version
v12.18.3
$ npm --version
6.14.6

Gatsby 설치

Gatsby CLI를 설치한다

$ npm install -g gatsby-cli

베이스로 삼을 Gatsby 테마를 고르자

Gatsby starter theme라고 구글에 치면 나오는 아래의 사이트에 가서 테마를 둘러본뒤 마음에 드는 테마를 고르면 된다. 나는 gatsby-starter-minimal-blog를 골랐다.

  • https://www.gatsbyjs.org/starters/?v=2
  • https://www.gatsbyjs.org/starters/LekoArts/gatsby-starter-minimal-blog/

마음에 드는 테마를 클릭하면 아래에 Install this starter locally: 해서 다음와 같은 코드가 보일 것이다. 그 코드를 터미널에서 실행해주자.

$ gatsby new gatsby-starter-minimal-blog https://github.com/LekoArts/gatsby-starter-minimal-blog
$ cd gatsby-starter-minimal-blog
$ gatsby develop

맨마지막 코드를 실행하면 로컬에서 블로그를 확인할 수 있다.

  • http://localhost:8000/

Github Pages에 어떻게 배포할까?

gh-pages를 이용하여 배포해보자. 설치는 다음과 같다.

$ npm install gh-pages --save-dev

여기서는 username.github.io에 배포하는 것을 목표로 하자. 아래의 한줄을 적당한 위치에 (develop 밑에) 추가해주자.

// package.json
"deploy": "gatsby build && gh-pages -d public -b master",

이번엔 Github 이랑 연결해보자!

Github에 들어가서 새로운 repository를 생성해준다. 이때 Repo 이름은 꼭 자신의 username.github.io 일 것!

이렇게 하면 새로운 repository가 생성은 완료되었고, 로컬에 있는 파일과 repository를 연결하는 일만 남았다.

$ git remote add origin https://github.com/cogito288/cogito288.github.io.git
$ git add .
$ git checkout -b develop
$ git commit -m "first commit"
$ npm run deploy

이렇게 하면 username.github.io에 들어가면 홈페이지를 볼 수 있다!

아래와 같은 페이지가 정상적으로 뜰 경우 github blog 만들기 첫걸음은 떼었다.

부디 다음 포스트로 테마를 커스터마이즈하는 걸 올릴 수 있기를 바라며 마침.

+ 보너스.

자신의 github.com/username.github.io에 들어가보면 master 브랜치가 먼저 나타나는데 너무 지져분하다. 위에서 만든 develop이 제일 먼저 나오도록 해보자.
커밋 안되어있다면

$ git add .
$ git commit -m "blog develop"
$ git push origin develop

자기 레포지토리에서 settings - branches 에서 기본 repository를 develop으로 바꿔주면 깔끔해진다.

profile
하나씩 step-by-step으로 알아가보자

0개의 댓글