깃허브로 블로그 만들기

개발을 시작하고 나서부터 여러 사람에게 블로그가 좋다는 소리를 들었지만
나는 멀티캠퍼스에서 진행한 git 특강 때 TIL(Today I Learned)를 이용해 하루하루 배운 내용을 정리하고 작성하면 될 줄 알았다.

➡️ nickhealthy_TIL 구경하기

하지만 점점 길쭉하게 늘어만 가는 TIL과 테이블 표도 가독성이 떨어지기 시작했고
내가 작성한 글임에도 불구하고 나 조차 다시 원하는 내용을 찾아볼 때 찾기가 쉽지 않았다.

그래서!! 멀티캠퍼스의 모든 교육이 끝나고 이번 기회에 블로그도 만들어보고 복습하는 차원에서 새로 정리하기로 마음 먹었다!
Wix, Velog, 티스토리 등 좋은 블로그들이 많지만 개인적으로 github blog가 좀 더 개발자스러운 블로그 같아서 github blog를 이용하게 되었다.

처음에는 Jekyll를 이용한 블로그를 만들었었다. Jekyll는 오픈소스로 다양한 테마를 제공해준다.
하지만 내 스타일에 맞는 테마를 찾지 못해 여러 테마들을 적용하다가 gatsby를 발견!

➡️ Jekyll
➡️ Gatsby Starter

사용 방법은 각 테마마다 다를 수 있으므로 해당 테마의 설명서를 잘 읽어봐야한다.

※ 해당 글은 Gatsby를 이용한 블로그 생성에 대해서 작성

1️⃣ 초기 세팅

1. git 설치
2. node.js 설치

npm install --global gatsby-cli

2️⃣ Gatsby 테마 가져오기

원하는 테마의 github repo를 방문해 clone을 진행한다.
clone의 명령어는 gatsby를 이용

gatsby new "만들고 싶은 폴더 이름" "원하는 테마의 github 주소"

위의 명령어를 쳤을 때 해당 repo를 clone 하면서 자동으로 의존성 패키지들을 설치해 준다.

위의 내용에서 "" 큰 따옴표는 빼야한다.

3️⃣ 로컬에서 테스트해보기

cd "만들고 싶은 폴더 이름"

위에서 내가 지정한 폴더 이름으로 진입

npm start

코드와 포스팅을 한 후 github page에서 배포된 걸 확인하는 작업은
시간이 오래 걸리기 때문에 로컬에서 테스트할 수 있는 환경이 꼭! 필요하다.

4️⃣ 배포할 github repo 만들기

your_github_id를 기준으로 repo를 생성한다.
이렇게하면 ”https://your_github_id.github.io” 형식의 블로그 주소가 만들어진다.

또한 Settings ➡️ Options ➡️ GitHub Pages에서 master로 바꿔주어 배포를 진행한다.

5️⃣ github page에 배포하기

npm deploy 명령어를 사용하기 위해서는 package.json에 밑의 한줄을 추가해야 한다.

"scripts": {
    "deploy": "gatsby build && gh-pages -d public -b master"
}

⤴️ 위의 명령어 추가 후 커맨드 창에서 ⤵️ 입력!

npm deploy

현재 사용하고 있는 테마를 기준으로 작성한 것이라
다른 테마를 적용하고 싶다면 위에서 말했듯 해당 테마의 설명서를 읽어봐야 한다.

정상적으로 배포가 되었다면 커맨드 창에서 Done를 확인하고 github repo를 확인해보면 된다. https://your_github_id.github.io 형식의 사이트 주소로 들어가서 확인이 가능

6️⃣ Branch 만들기

npm deploy 명령어를 통해 배포를 진행하였다면
github repo에 기존에 있던 파일들이 아닌 이상한 파일들이 올라갔을 것이다.

이건 배포를 위한 컴파일 된 파일들이라고 생각하고 있다. (정확하지 않음)

그래서 새로운 브랜치를 만들어 해당 repo에 push하는 방식을 생각했다.

git branch develop
git checkout develop

== git checkout -b develop

이렇게해서 정상적인 배포와 commit를 모두 완성시켰다!
이제 좋은 내용으로 블로그를 포스팅하면서 배운 내용을 되새김질 하는 일만 남았다!

⭐ 별첨 Customizing

내 입맛대로 블로그를 운영하기 위해선 해당 테마의 설명서를 읽고 커스터마이징을 해야한다.

참고 사이트

https://yeri-kim.github.io/posts/how-to-install-gatsby/