zoomkoding-gatsby-blog 테마로 github.io 블로그 만들기

github.io 블로그 만들기

개발 블로그로 티스토리를 사용하면서 티스토리도 스킨을 직접 고를 수 있고, 수정이 가능하지만 뭔가가 부족한 느낌이 들었다.
그래서 지난달에 포스팅할 때마다 커밋도 같이 되고, 조금 더 나만의 페이지 느낌이 나는 깃허브 블로그를 만들었다.
코딩을 배우기 시작하면서부터 언젠가는 나도 github.io로 된 블로그를 가지고 싶었는데 직접 만들어보니 조금 복잡해도 재밌었지만 구글 검색엔진에 노출시키기 위해서 따로 Google Search Console에 등록도 해줘야 하고, Github Pages 트래픽 제한이 있다 보니 생각보다 자주 이용하지 않게 됐다...
그래서 다시 티스토리로 복귀했지만 github.io로 블로그를 생성하면서 배웠던 점들은 기록해두려 한다!

 

어쩌다 보니 개발자 블로그로 유명한 3가지를 모두 써봤는데 좋은 경험했다고 생각하기로 했다 😂

zoomkoding-gatsby-blog 적용하기

줌코딩님의 gatsby 테마를 github.io에 적용하는 방법은 Gatsby 테마로 GitHub Blog 만들기에 상세하게 나와있어서 그대로 따라 하면 된다.

대신 나는 설치하는 과정에서 에러가 나서 그 부분에 대해서 기록해두려고 한다.

 

나는 npm install 부터 에러가 났는데 맨 처음엔 npm이 설치되어 있지 않다고 해서 따로 설치해줬다.

M1 / zsh: command not found: npm 이 글을 참고해서 그냥 brew install npm만 하면 되는 줄 알았더니

 

이번에는 또

Error: No developer tools installed. 
Install the Command Line Tools: xcode-select --install

라고 떴다.

 

그래서 시키는 대로 xcode-select --install를 실행하고 다시 brew install npm을 했더니 이번에는 잘 설치됐다.

근데 그 이후부터가 고난이었음.

npm install을 하니까 계속 에러가 났는데 node의 버전이 안 맞아서 그런 것 같았다.

 

그래서 터미널에서 시키는 대로 npm install --force도 해보고, npm install --legacy-peer-deps도 해봤는데 계속 에러가 났다.

(이 둘의 차이가 궁금하다면 npm install --force and --legacy-peer-deps 차이점 참고)

 

혹시나 하고 zoomkoding-gatsby-blog 깃허브 레포의 Issues 페이지에 들어갔다가 해결방법을 찾았다!

 

npm install 에러 해결법에 나와있는 것 그대로 진행했다.

 

node_modules 폴더를 삭제한 후에 npm을 재설치하는 방법으로 해결하셨는데
[Repository 주소] / node_modules 폴더 삭제 부분은 How to uninstall all npm packages with one command를 참고해서

rm -rf node_modules
rm package-lock.json

로 삭제했다.

 

package-lock.json 파일을 삭제하고 Gatsby 테마로 GitHub Blog 만들기에 나와있는 그대로 다시 npm install부터 쭉 진행하니 해결됐다!

 

배포에 성공하고 내 github.io 주소로 들어갔더니 리드미 페이지만 구현되어 있길래 내가 잘못 설치해서 그런 건 줄 알았는데
알고 보니 배포 후에 완전히 다 구현될 때까지 시간이 좀 걸려서 그런 거였다..!

배포 완료 후 블로그가 완성될 때까지 조금 기다리기 😅