Jekyll Chirpy 테마로 TIL 블로그 제작하기
본 포스팅은 MAC 환경에서 Jekyll Chirpy 테마를 사용하여 Github pages로 호스팅 되는 블로그를 개설하는 것에 대해 다루고 있습니다.
로컬 편집 툴은 VScode를 사용했으며, 위 조건이 다른 경우 설치 방법이 달라질 수 있습니다.
사전 준비 사항
1) 미리 설치할 것
Jekyll Docs 및 The fastest and easiest way to install Ruby on a Mac in 2022 페이지를 참고하여 아래의 필요 사항을 설치해두어야 합니다.
대부분의 경우 아래 커맨드를 터미널에 순서대로 입력한다면 이상 없이 설치 될 것입니다.
Homebrew설치:
1
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Chruby및Ruby-install설치:
1
brew install chruby ruby-install xz
Ruby및RubyGems설치:
1
ruby-install ruby
RubyGems는 Ruby와 함께 설치된다.
Ruby설치 확인:
1
ruby --v
Jekyll설치:
1
gem install jekyll
Bundler설치:
1
gem install bundler
Git설치:
1
brew install git
- VScode
1
brew install --cask visual-studio-code
2) 진행 절차 미리보기
- Chirpy Repository Fork 하기
- Local 환경으로 Clone 하기
- Local 환경에서 Test 하기
- 원격 저장소로 Local 변경사항 push 하기
- Github pages 배포 확인하기
앞으로 어떤 절차가 예정되어 있는지 미리 알고있으면 예상치 못하게 절차가 꼬이는 문제를 예방할 수 있다.
Chirpy 테마로 Jekyll 블로그 설치
Stetp 1. Chirpy Repository Fork
Chirpy theme Github Repo에서 내 원격 저장소로 Chirpy 테마 파일을 복사해서 가져옵니다. 저장소 우측 상단의 Fork > Create a new fork 클릭 해줍시다.
Repository name을 <Github username>.github.io로 변경후 Fork 완료 해줍니다.
- 저장소 이름을 github username으로 변경하는 것은 github pages를 사용해서 우리의 블로그를 호스팅 하기 위해서 입니다.
- 별도의 호스팅을 사용할 경우 원하는 이름을 사용할 수 있습니다.
- 저장소의 이름은 추후 Setting에서 언제든지 변경할 수 있습니다.
Stetp 2. Local 환경으로 Clone 하기
앞으로 이것저것 많은 것들을 수정하게 될텐데 Github에 올라가있는 상태로는 소스코드의 편집이 쉽지 않습니다.
VScode로 소스코드를 편리하게 편집하기 위해서 원격 저장소에 Fork한 저장소를 Local 환경으로 Clone 해서 가져올 예정입니다.
Fork 해온 저장소에서 Code > REPO_URL 복사해줍니다.
터미널에 아래의 명령어를 입력하면 Clone을 실행할 수 있습니다. <REPO_URL> 위치에 위의 이미지에서 복사한 URL을, <DIR> 위치에 원하는 작업 위치를 입력합니다.
1
git clone <REPO_URL> <DIR>
<DIR>는 생략할 수 있습니다. 생략시 현재 위치에서 실행
ex) 변수 예시
<REPO_URL>→ https://github.com/pjh1821/pjh1821.github.io.git<DIR>→ C:\Users\Documents
Stetp 3. Chirpy theme 파일 초기화 하기
Clone 받은 소스코드 Root 위치에서 터미널에 아래 커맨드를 입력하면 몇가지 파일이 삭제됩니다. 제작자가 DEMO로 넣어둔 내용 등을 삭제해서 바로 사용할 수 있도록 하는 명령어인 것 같습니다.
1
bash tools/init.sh
이상태에서 일단 한번 커밋해줍니다.
1
2
git add .
git commit -m "Create TIL blog powered by jekyll Chirpy theme"
Stetp 4. 로컬 환경에서 TEST 하기
변경된 Local 파일이 서버에서 제대로 구동되는지 확인하기 위해서 아래의 명령어를 실행해줍니다.
1
2
bundle
jekyll serve
아래와 같이 출력된다면 정상 동작 되고 있는 것입니다. 표시된 IP 주소를 웹 브라우저에 입력하면 생성된 블로그를 확인 할 수 있습니다.
Stetp 5. Local 변경사항 Github 저장소로 PUSH 하기
로컬에서 문제없이 잘 동작하는 것을 확인했으니 원격 저장소로 변경사항을 업로드 합니다.
1
git push origin master
- github는 master 브랜치를 main으로 변경했습니다.
하지만 Chirpy 테마는 master를 사용하고 있어서 master 브랜치를 사용합니다.- main으로 브랜치 명을 변경할 수 있지만 원본 변경사항을 merge 할 때 문제가 발생할 수 있을 것 같아서 손대지 않았어요.
clone 해서 생성된 프로젝트는 remote 명령어를 사용하지 않아도 이미 원격 저장소가 지정되어 있습니다.
Stetp 6. github.io로 변경사항 반영 및 배포 확인하기
원격 저장소로 변경사항 업로드가 완료되었다면 잠시 후 pages를 통해서 확인 가능합니다. <username>.github.io 를 웹 브라우저에 입력 후 제대로 출력되는지 확인할 수 있습니다.
위의 이미지와 같이 텅빈 페이지가 출력되었나요? 축하합니다.
Jekyll Chirpy 테마 및 Github pages를 활용하여 블로그 생성이 완료되었습니다.