[mac] jekyll Chirpy-starter 로 GitHub Pages 만들기2

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

 

테마 : Chirpy

제작자 공식 GitHub :  [Official] cotes2020 (Cotes Chung)

제작자 공식 안내 가이드 : [Official] Getting Started | Chirpy

제작자 Repository 'jekyll-theme-chirpy'   < Fork

제작자 Repository 'chirpy-starter'  < Use this template

---

 

본인 GitHub Repository의 Actions Tab으로 간다.

나는 Repository 생성 시 이름을 바로 username으로 했더니, 이미 build deploy 이력이 있다.

 

Settings - Pages - Build and deployment에서 GitHub Actions로 바꾼다.

Default로 정해둔 branch에 push 하면

GitHub이 변동을 감지하고 ✌️웬만해선✌️ 자동으로 알아서 build & deploy 해준다.

(원랜 workflow file에 build & deploy 되게하는 설정 넣고 한땀한땀... )

 

---

 

참고 문헌

Github 페이지 Chirpy 테마 적용 방법 (ver. 2023)

 

처음에 chirpy-starter가 아닌 jekyll-theme-chirpy로 했을 때 여러 시행착오가 있었는데

GitHub Actions로 바꿔도,   _config.yml을 수정해도,   GitHub Desktop으로 commit해도

 

'—layout: home # Index page —' 가 뜬다는 거였다.

 

내 쪽에서의 문제는 'OS platform 상이'...

 

 

iTerm을 연다.

clone한 경로로 이동해서 Gemfile이 있는 곳에서!

아래 bundle 명령어로 Linux platform을 추가한다.

 

  $ bundle lock --add-platform x86_64-linux

 

 

 

 

 

linux platform을 꼭 추가한 후!!! > (추가수정삭제된 파일들을) GitHub Desktop으로 commit push해야만

GitHub Actions의 build deploy 에서 오류가 안난다.

 

 

이제 파일 추가, 수정하러 가보자.

---

 

추가수정삭제는 메모장, 편집기, 뭐로 수정하든 상관없다. 어차피 상태에 따른 '형상 관리'가 중요한 거라.

 

나는 Visual Studio Code로 clone한 Folder를 열었다. 

 

1. 가장 중요한 url 수정

위에 복사해서 밑에 그대로 넣고 username만 수정하면 된다.

url: "https://<username>.github.io"

 

2. timezone Asia/Seoul 수정

주석의 링크에 들어가면 현재 위치한 지역의 timezone에 대해서 나오는걸 복사해서 넣으면 된다.

 

3. locales/ko-KR 언어 반영 (starter 기준)

starter 프로젝트는 기본 기능만 있어서 다국어 파일이 없다. 풀 버전 프로젝트에서 가져오자.

제작자 jekyll-theme-chirpy의 _data/locales/ko-KR.yml 경로   < 여기로 바로 이동해서 ko-KR.yml 파일만 다운로드 받는다.

 

 

내 mac에 clone한 프로젝트에서 _data 경로 하위에 'locales' 폴더를 새로 만들고 그 하위에 다운로드한 ko-KR.yml 파일을 넣고

 _config.yml의 lang에 파일명  ko-KR을 넣는다. (다른 언어도 이런식으로 설정하면 된다.)

 

 

그 외 _config.yml에서 필수 고정 내용 말고

사용자 입장에서 수정하고 싶은게 있다면 수정한다.

 

---

 

GitHub Desktop으로 commit, push하기 전에

수정한 내용이 제대로 반영됐는지, 로컬에서 jekyll server를 돌려서 확인해보자. (방법은 1에 있음)

 

언어, 수정 내용이 로컬에서 잘 보이는 걸 확인.

 

 

이제 GitHub Desktop으로 commit, push하러간다.

('[mac] jekyll Chirpy 로 GitHub Pages 만들기 전 세팅' 되어있어야함.)

 

commit은 변경이력을 콕콕 찍어서 남기는 거라 보면 되고, (commit 했다고 GitHub Repository에 최종 반영X)

push는 그 commit 이력들을 push 밀어넣는다고 보면 된다. 일반인이 볼 때 이정도만..

 

 

GitHub Desktop 실행.

파일 별로 추가수정삭제한 내용에 문제가 없는지 확인하고

어떤 것이 바뀌었는지 commit message 에 작성하고, 'Commit to main' 버튼을 누르면 commit이 된거다.

 

commit 했다고 GitHub Repository에 변경 내용이 반영되는게 아니다.

Push origin까지 누른다.

 

 

이제 빨리 본인의 Repository - github.io로 가보자.

빨간 부분은 가장 마지막 최신 commit push의 commit message를 보여주고

그 옆은 갈색 원은 build & deploy의 상태를 보여주는 부분이다. 완료되면 초록 체크로 바뀐다.

또 빠르게 Actions 탭으로  이동한다.

 

commit message에 적힌 무언가 run 하고 있다. 눌러서 들어간다.

 

선택한 Build and Deploy 내용을 볼 수 있다.

10초만에 build가 끝나고 deploy를 하고 있는거다. deploy까지 초록체크로 완료되면 이제 GitHub Pages를 확인한다.

 

크롬 브라우저에

https://<username>.github.io 로 이동하면,  아까 로컬에서 보이던 화면과 동일하게 보인다.(동일해야함!!!)

시크릿 모드에서 해도 잘 열린다.

 

 

 

 

이제 카테고리에 글 추가하는 건 .md(markdown) 파일 작성하고, 넣을 위치 찾아서 넣으면 된다.

저 화면에서 바로바로 '글 작성', '글 수정', '글 삭제' 이런 기능이 있는게 아니다!!!

직접 파일을 추가하고 수정해서 commit, push해야하는 것이다.

 

일반인 입장에선 번거롭게 느껴질 수도 있지만 가장 중요포인트는 

✌️서버비 돈 안내고 공짜✌️ 인거다. 물론 GitHub Pages말고 사용자 입장에서의 서버리스 서비스는 많다.

(Vercel, Netlify 등 조건은 다르지만 아무튼)

 

- Vercel, Netlify - 

 

프론트하는 친구한테 듣기만 하고 해보고 싶다했지만 다른 공부할 게 많아서 눈여겨만 봄

 

 

markdown 작성해서 올리는 건 다음 글에...