하나씩 알아가는 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.6Gatsby 설치
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맨마지막 코드를 실행하면 로컬에서 블로그를 확인할 수 있다.
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으로 바꿔주면 깔끔해진다.
