[mac] jekyll Chirpy 테마로 GitHub Pages 만들기

환경 : 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

---

참고 문헌

Jekyll Chirpy(v6.0.1) 테마를 활용한 Github 블로그 만들기(2023.6 기준) <  Actions - build에서 오류 발생

Jekyll Chirpy 테마 사용하여 블로그 만들기   <  됐다!!! (생각보다 훨씬 간단하고 빠르게 끝나서 허탈..)

 

이미 username.github.io 로 만든 Repository가 있다면, 이름을 임시로 다른거로 바꾼다.

안그러면 지금 Fork로 만들 Repository 이름을  나중에 username.github.io 로 사용 못한다.

(앞에서 chripy-starter로 성공하고 나서 적은거라, 이해가 안되거나 부가설명은 앞의 글을 읽는 걸 추천합니다.)

 

 

제작자 Repository 'jekyll-theme-chirpy' 에서 Fork를 진행한다.

 

Fork로 진행 시, Repository 이름을 다른 거로 하고 그 뒤에 Settings에서 Rename해야만

Actions에서 'pages build and deployment'를 확인할 수 있다. (처음부터 적었더니 안 나타나더라..)

 

나는  탐색기/Finder에  'jekyll' 이라는 폴더를 하나 만들고  그 안에 프로젝트를 clone했다.

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

 

clone하고 나서 해당 경로로 이동한다. 아래 명령어로 chirpy를 초기화한다

프로젝트 내부 경로 > tools/init.sh

 

 

init.sh 파일이 동작하면서 필요없는 파일은 삭제해주는 듯하다.

 

 

 

# Fork 프로젝트에 있는 '의존성이 있는 모듈을 모두 설치'
$ bundle

# 로컬에서 jekyll server 가동
$ jekyll serve

 

 

크롬 브라우저 localhost:4000 으로 이동해서 확인한다.

 

 

추가수정삭제한 파일들을    GitHub 에 commit, push 하기 전에!  linux platform을 추가하자.(mac인 경우)

 

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

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

$ bundle lock --add-platform x86_64-linux

 

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

---

 

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

 

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

 

1. 가장 중요한 url 수정

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

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

 

2. timezone Asia/Seoul 수정

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

 

 

3. 테스트용 md 파일 추가

_posts 하위에 새로 파일을 만든다. 파일명은 컨벤션(규칙)에 맞춰서 작성해야 나중에 브라우저에서 보인다.

컨벤션 관련해서는 제작자 안내가이드나 설명 잘한 글들이 많으니 찾아보면 된다.

 

나는 '2025-01-01-테스트.md' 라고 파일명을 짓고,  다음 파일 소스를 작성했다.

---
title: 테스트
date: 2025-01-07 02:00:00 +09:00
categories: [상위 카테고리, 서브 카테고리]
tags: [test] # TAG names should always be lowercase
---

테스트 내용

 

 

 

---

 

GitHub Desktop으로 commit, push하기 전에

수정한 내용이 제대로 반영됐는지, 로컬에서 jekyll server를 돌려서 확인해보자.

 

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

 

 

이제 GitHub Desktop을 연다.

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

 

 

Add an Exisiting Repository from your Local... 를 선택하고

Choose...를 선택한다.

 

clone한 프로젝트를 열고,  Add Repository 한다.

 

 

이제 clone한 경로의 파일들이 추가수정삭제된 걸 commit,push할 수 있는 준비 끝.

starter 때와 다른 설정이 있다.

 

1. 뭔가 Pull 받아야하는 이력이 있다.

2. commit message에 컨벤션을 지켜서 작성해야한다.

 

1은 나중에 자동 진행될거라서 일단 pass.

2를 보자. commit message에 그냥 first commit 이라고 작성하고 commit하면

 

이런 Error가 뜬다.

⧗   input: first commit
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg script failed (code 1)

 

⧗ 너의 입력은 : first commit이네

✖ (니 입력에)주제 없다 [주제-비어있음]
✖ (니 입력에)타입 없다 [타입-비어있음]
✖   found 2 problems, 0 warnings
ⓘ   Get help: commitlint 깃헙 가서 컨벤션 변경 로그 봐.
husky (가 알려줌) - 커밋 메시지 스크립트가 실패했다.

 

 

대충 이런 의미라서 File에 문제가 생긴 건 아니다. 개인적으로 관리할거면 이 설정을 해제하는 방법도 있지만

웬만해선 커밋 메시지 컨벤션 지키는게 좋기도 하고,

참고 문헌 : 커밋 메세지 작성 가이드라인 - Conventional Commits

 

일단 Fork한 거로 GitHub Pages 정상 동작하는 거 먼저 보고,  해제하는 건 나중에 하자.

아무튼 작성법만 지키면 된단 얘기 아닌가! Get help로 가서 commit message 작성법이 뭔지 본다.

 

Error가 subject, type 없다고 했는데 저렇게 쓰면 되나 보구나..

type은 저기 있는 단어 목록 중에 상황에 골라 쓰고 : 뒤에 쓰고 싶은 커밋 메시지를 쓰면 된다.

feat(blog): first commit   < 이거로 작성해본다.

 

 

넘어갔다. 좌측 하단에 방금 커밋되었다는 걸 볼 수 있다.

이제 1. Pull 받아야한다. (받아야만 방금의 commit과 함께 push 가능)

 

원래는 이런 저런 이유로 Pull 이 안되는 상황도 있지만,

지금은 되니까 Pull origin 진행하고 Push origin 까지 진행한다.

 

Pulling origin...

 

Pushing to origin...

 

 

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

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

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

starter 스샷 가져온거라 다른 부분은 pass

 

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

 

pages build and deployment,  feat (blog): first commit

맨 처음에 있었던 workflow와 동일한 이름과 방금 적었던 commit message까지 2개 갈색 원이 떠있다.

초록 체크로 완료되면 빌드 배포가 성공한 것이다.

 

 

가장 마지막에 성공한 workflow 선택해서 들어가고 deploy 밑의 링크 ( = GitHub Pages 링크)를 누른다.

 

 

이제 starter가 아닌, Chirpy 로  GitHub Pages 를 작성할 수 있게 됨!

 

---

 

의아한 게, 참고 문헌   Jekyll Chirpy 테마 사용하여 블로그 만들기   

이 글은 과거 글인데도 나는 'Settings - GitHub Actions'로 바꾸지 않고도 일단 동작했다. (댓글은 혼란의 장이고 나역시도)

 

프로젝트 내부의 .github/workflows/pages-deploy.yml 가 있어서 GitHub Actions로 바꾸지 않고도 

GitHub Actions에서 'pages build and deployment' workflow로 빌드 배포가 되는건가 싶다.(아닐수도)

 

계속 md 글 작성, css 수정하면서 오류가 나는지 확인해봐야겠지만, 여기까지는  GitHub Actions로 바꾸지 않고

 

GitHub Pages를 Chirpy로 만들기 성공!!!