Gatsby로 Github블로그 만들기

먼저 nvm - node - npm 설치가 되어있어야 한다.

👉 설치 참고한 링크

 

💡 gatsby cli 설치

$ npm install -g gatsby-cli

💡 gatsby 블로그 테마 고르기

gatsby starter theme <-블로그 테마 선택

💡 로컬에 블로그 설치하기

마음에 드는 블로그 테마를 선택하면  copy할 코드가 적혀있다.

이를 그대로 터미널에서 실행하면 해당 위치에 'gatsby-blog-mdx' 라는 이름으로 블로그 디렉토리가 생성된다.

# Using npx
$ gatsby new gatsby-blog-mdx https://github.com/EllisMin/gatsby-blog-mdx

 

설치 왼료 후에 아래의 명령어로 gatsby 를 실행시킨다.

$ cd gatsby-starter-minimal-blog
$ gatsby develop

 

설치 완료 후 로컬 주소에서 블로그가 뜨는 것까지 확인한다.

• http://localhost:8000/

💡 Git pages로 배포

git pages를 설치해준다.

BASH

Copy

$ npm install gh-pages --save-dev

 

로컬 블로그 디랙토리 내에 위치해있는 package.json 파일 안에 다음과 같이 추가해준다. deploy는 나중에 원격저장소에 배포할때 사용하는 명령어이다.

script {
(...) ,
"deploy": "gatsby build && gh-pages -d public -b master",
(...)
}

💡 로컬 저장소와 원격 저장소(GitHub) 연결하기

{username}.githyb.io 이름의 레파지토리를 생성해준 다음, 아래의 코드로 로컬에 있는 파일을 원격 저장소와 연결해준다.

 

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

{username}.githyb.io 주소로 들어가보면 블로그가 깃페이지로 배포된 것을 확인할 수 있다.

💡 파일 배포 순서

$ git checkout develop
$ git add .
$ git commit -m “commit message”
$ git push origin develop
$ npm run deploy # 원격 저장소의 메인 브런치에 배포