[mac] jekyll Chirpy 로 GitHub Pages 만들기 전 세팅

환경 : MacBook Pro 14  M3 macOS 15.1.1
세팅 : 이미 brew, iTerm 설치 세팅 완료된 상태. (여기까진 알아서..)
주의 : 기술 내용은 [포스팅 시점, PC환경]에 따라서 동작하지 않을 수 있음.

 

일단 Why jekyll을 설치하나?

jekyll 설치 후 로컬에서 jekyll로 서버를 돌리고, 로컬에서 원하는 GitHub Page 테마가 제대로 보이는지 확인해야하기 때문.

 

jekyll 공식 홈페이지  

 

 

우측 하단의 Quik-start Instructions 가 오류 없이 동작되어야 한다.

그러기 위해선 명령어 gem, jekyll, bundle 설치해야 한다.

위 명령어들은 rbenv, ruby가 설치되어있어야한다. 뭐를 설치하기 위해서 뭐를 설치하는 행진

 

작성 시점 기준, 로컬 mac의 rbenv, ruby 버전이 3.1.0 이상이어야한다해서,

rbenv, ruby 버전 맞추기를 진행한다. (mac 기준, Win은 모르겠음)

 

iTerm 열기

# Ruby 버전 확인 (둘이 같아야함. 다르다면 환경변수 잡아줘야함)
$ rbenv versions
$ ruby --version

# rbenv 설치
$ brew install rbenv

# Ruby 설치
$ rbenv install 3.1.0

# Ruby 전역 버전 설정
$ rbenv global 3.1.0

# Ruby 버전 다시 확인 (둘이 같아야함. 다르다면 환경변수 잡기)

# .zshrc 파일 경로로 이동해서 편집기 실행. 아무거나 상관X.. 다룰줄만 안다면
$ vi ~/.zshrc
$ nano ~/.zshrc

# .zshrc 파일이 열린다. 난 이미 설정해둔게 많아서 최하단에 아래 환경변수를 넣는다...
eval "$(rbenv init - zsh)"

# 파일 저장하고 닫고 나오기. 수정 내용을 반영.
$ source ~/.zshrc

# Ruby 버전 다시 확인해서 둘 다 3.1.0으로 일치하는 걸 확인

 

 

jekyll 설치 후 테스트 사이트 접속하기 (sudo 안 붙여도 동작한다면 안 붙여도 된다.)

# bundler 설치
$ sudo gem install bundler -v 2.4.22

# jekyll 설치
$ sudo gem install bundler jekyll

# jekyll로 서버 돌릴 테스트 사이트 생성
$ jekyll new my-awesome-site

# 경로 이동
$ cd my-awesome-site

# 서버 실행
$ bundle exec jekyll serve

크롬 브라우저에서 http://localhost:4000 접속 확인

 

 

이러면 맨 처음에 있던 jekyll 공식 사이트의 'Quik-start Instructions'가 성공적으로 끝난 것이다.

 

이 다음에 GitHub Page로 사용하고 싶은 테마를 가져오고, 해당 테마가 로컬에서 어떻게 보이는지 확인하고 싶을 때,

터미널에서 clone해온 테마 프로젝트 경로로 이동하고 jekyll server 가동 후,

크롬 브라우저에서 똑같이 localhost:4000에서 확인하면 된다.

 

---

Why GitHub Desktop을 설치하나?

Terminal에서 git 명령어를 쓰기보단 (완전 모르진 않지만 그냥 본인이 게을러서 그런 듯)

Windows에선 SourceTree, mac에선 Fork로 여러 프로젝트나 브랜치 checkout을 했던지라

mac Fork로  GitHub Pages에 쓸 프로젝트에 commit, push했더니 뭔가 깔끔하게 동작하지 않아보였다.(잘 몰라서 그랬을지도)

(앗. 첨에 안됐었는데 다시 하니까 잘만 된다. 그땐 다른 사유로 안됐었나보다. 기존에 GUI 안 썼던 사람들은 GitHub Desktop 쓰면서 익숙해지면 될 것 같다. 나는 Fork로 돌아간다...후후..)

 

그래서 검색해보니 대다수가 Terminal에서 git 명령어 사용, GitHub Desktop에서 commit push하는 글이 많아서

GitHub Desktop으로 해보니 동작했다.

GitHub Desktop 공식 다운로드 

 

macOS에 따라 잘 다운 받자. ( x64.zip,  arm64.zip 다름)

위에 다운로드 받다가 흠칫 하고 다시 밑의 Apple Silicon을 다운 받았다.

 

GitHub Desktop을 실행한다. 일단 실행만 해본다.

 

이 뒤는 나중에 GitHub Pages에 쓸 테마를 가져와서 clone하고 나면

Add an Existing Repository from your Local...  선택하고

Choose 해서 clone한 경로 열면 된다. 

---

 

주의

 

GitHub Pages를 단순 로컬에서만 돌리는 용도로만 쓰려고 사용하진 않을거다.

GitHub Actions에서 빌드 배포를 해서 서버리스처럼 사용할텐데

이때 Build & Deploy는 실행한 OS platform에 따라서 영향을 많이 받는다.

 

나는 mac Apple Silicon으로 GitHub Pages 진행을 했기 때문에

Linux platform 상이 오류 등이 존재했다.

 

테마 적용 글에도 적어놨지만

동일 mac에서 여러번 Chirpy 테마로 테스트 해본 결과 (다른 경우는 모르겠다.)

clone 하고 파일 추가수정삭제한 후  (여기!)  -> commit, push 하기 전에 꼭!

 

clone project 경로로 이동해서, 아래 명령어로 linux platform을 추가해줘야했다.

  $ bundle lock --add-platform x86_64-linux

 

 

clone한 프로젝트를 삭제했다가, 다시 clone했을 때도 동일하게 추가해줘야했던거로 기억한다(아님 말고 다행이고...)

보통 1번 clone하면 웬만해서 쭉 쓰니까 엄청 귀찮진 않을 것 같다.