[Github] Chirpy 테마로 GitHub Pages 시작하기

저번 블로그 글에서 Github 회원가입에 대하여 간단하게 다루었었다. 이번 글에서는 본격적으로 Jekyll Themes를 사용하여 Github Pages를 만들어보도록 하자.

 

 

1. 사전 설정 (Mac M2 기준)

먼저, Jekyll을 사용하기 위해 필요한 Ruby를 설치해야 한다. Ruby는 프로그래밍 언어이다.

Ruby를 설치하는 방법은 다음과 같다

 

1. 터미널을 열고 Homebrew를 설치한다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

2. Ruby를 설치한다.

brew install ruby

 

3. Ruby가 제대로 설치되었는지 확인한다.

ruby -v

 

 

2. 원하는 테마 선택 및 Fork

Github Pages의 여러 테마들은 Jekyll Themes에서 확인할 수 있다. 나는 여러 테마들 중에서 다음 두 가지 테마가 가장 마음에 들었다:

• chirpy - https://chirpy.cotes.page/
• MatJek - https://shawnteoh.github.io/matjek/

이 중에서 Chirpy를 활용하여 진행해보기로 하였다.

 

1. 소스를 zip으로 다운로드하여 활용

2. Github에서 소스를 fork 받아 사용

3. chirpy starter를 통해 직접 설치

 

3가지 방법 중에서 2번째 방법을 활용하여 진행해보겠다.

 

테마를 Fork하는 방법

1. Chirpy 테마를 방문하여 우측 상단의 "Fork" 버튼을 클릭하여 자신의 Github 계정으로 복사한다.
2. 복사된 repository의 이름을 <username>.github.io로 변경한다. (예: yourusername.github.io)

 

3. Github Repository 설정

Fork한 repository를 사용하여 Github Pages를 설정한다:

1. Github의 Repository 페이지로 이동하여 "Settings" 탭을 클릭한다.
2. "Pages" 메뉴로 이동하여, "Source" 섹션에서 브랜치를 main으로 설정한다.

 

4. 로컬에서 작업하기

이제 로컬 환경에서 Jekyll 블로그를 설정하고 실행해보자.

1. Repository를 로컬로 Clone

터미널을 열고 다음 명령어를 입력하여 Fork한 repository를 로컬로 클론한다:

git clone https://github.com/<username>/<username>.github.io.git

 

2. 필요 패키지 설치

클론한 디렉토리로 이동한 후, Jekyll 및 Bundler를 설치한다:

cd <username>.github.io
gem install bundler
bundle install

 

3. Chirpy 초기화

터미널 디렉토리를 클론해 온 저장소로 이동하여 아래 명령을 사용하여 Chirpy를 초기화 한다:

tools/init.sh

 

위의 명령을 수행하면 다음 파일들이 삭제된다:

• .travis.yml
• _posts 폴더 하위의 파일들
• docs 폴더

 

4. 로컬 서버 실행

Jekyll 블로그를 로컬에서 실행하여 설정을 확인해보자:

 jekyll serve

 

브라우저 주소창에 http://127.0.0.1:4000/ 을 입력하여 Chirpy 스타일을 확인할 수 있다.

 

 

5. 테스트 포스트 만들기

Jekyll 블로그는 Markdown 문법을 사용한다. 터미널에서 저장소 폴더 내 _posts로 이동한다. 이 폴더에는 이제부터 게시할 Markdown 형식의 포스트들이 위치하게 된다. 포스트할 마크다운 파일의 이름은 항상 YYYY-MM-DD-포스트제목.md 형식으로 해 주어야 한다.

 

포스트 작성 예시

1. 파일 형식: yyyy-mm-dd-제목.md
2. 파일 이름 규칙:
   • 년 4자리, 월 2자리, 일 2자리와 제목을 넣음
   • 확장자는 .md 또는 .markdown
   • 작성한 파일은 _posts 디렉토리에 넣음
   • 중간에 공백을 넣지 않음

예시

cd _posts
nano 2024-06-11-first-post.md

 

 

다음 markdown 문법을 활용하여 태그를 지정할 수도 있다

---
title: "2024-06-11-TIL"
author:
  name: 서빈
  link: https://github.com/leeseobin00
date: 2024-06-11 04:15:00 +0900
categories: [Seobin, TIL]
tags: [Seobin, TIL]
---

 

 

6. Git Push

로컬에서 작업한 내용을 Github에 푸시하여 블로그를 업데이트한다:

git add -A
git commit -m "first commit"
git push

 

정상적으로 푸시되었다면, Github의 Actions 탭에서 작업이 성공했는지 확인하고, 블로그 주소 username.github.io를 입력하여 제대로 만들어졌는지 확인한다.

완료!

 

 

7. 오류 해결

Ruby 버전 오류

Jekyll 테마가 요구하는 Ruby 버전이 3.0 이상일 때, 오류가 발생할 수 있다. Ruby 버전을 업그레이드하는 방법은 다음과 같다:

Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "ruby":
  In Gemfile:
    ruby

    jekyll-theme-chirpy was resolved to 7.0.1, which depends on
      ruby (>= 3.0)

Could not find gem 'ruby (>= 3.0)', which is required by gem
'jekyll-theme-chirpy', in any of the relevant sources:
  the local ruby installation

 

 

1. Homebrew를 사용하여 rbenv와 ruby-build를 설치:

brew install rbenv
brew install ruby-build

 

 

2. rbenv 초기화를 수행

rbenv init

 

3. benv를 사용하여 Ruby 3.0 이상 버전 설치:

 

rbenv install 3.1.2

 

4. 새로 설치한 Ruby 버전을 전역으로 설정:

 

rbenv global 3.1.2

 

하지만 업그레이드 한 후에도 적용이 되지 않는 오류가 났다.

MacBook-Pro ~ % rbenv versions
  system
* 3.1.2 (set by /Users/seobi/.rbenv/version)
MacBook-Pro ~ % rbenv versions
  system
* 3.1.2 (set by /Users/seobi/.rbenv/version)
MacBook-Pro ~ % ruby -v
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin23]

 

5. ~/.zshrc 파일을 편집하여 rbenv 초기화 설정 추가:

 

nano ~/.zshrc

 

파일에 다음 줄을 추가

eval "$(rbenv init - zsh)"
export PATH="$HOME/.rbenv/shims:$PATH"

 

6. 변경 사항을 저장한 후 파일을 다시 로드:

 

source ~/.zshrc

 

이 과정을 거친 후 Ruby 버전을 확인해보았더니 올바르게 나왔다

ruby -v

 

결과

MacBook-Pro Today-l-Learn.github.io % ruby -v      
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [arm64-darwin23]

 

 

Github Actions 오류

첫 commit 이후 Github Actions가 동작하지 않는 문제를 해결하기 위해 첫 commit으로 reset 한 후 다시 commit하여 정상 동작하였다..

git reset ~~
git push origin +main

 

---

 

이번 글을 통해 Jekyll Themes를 사용하여 간편하게 Github Pages 블로그를 만드는 방법을 알아보았다. 직접 해보니 생각보다 간편하고 편리했다. 앞으로 이 블로그를 활용하여 TIL(Today I Learned) 포스트를 꾸준히 작성하며 나만의 지식 저장소를 만들어가야겠다.