Github&Jekyll로 블로그 이전하기 1

LinkedIn : devyulbae
Email : devyulbae@gmail.com

안녕하세요. 오늘은 Github Pages와 Jekyll을 이용한 깃허브 블로그로 이전하면서 그 과정을 기록하고자 합니다. Velog나 티스토리 등의 플랫폼에서 Self-Hosting 방법으로 넘어가고자 하시는 분들에게 좋은 참고가 되었으면 좋겠네요.

목차

1. 왜 블로그를 이전하는가?

2. Ruby 및 jekyll설치

3. Github Pages 배포하기

1. 왜 블로그를 이전하는가?

     짧은 기간이지만 Velog를 쓰면서 Velog가 주는 간편함이라는 강력한 장점을 누리고 있었지만, 점점 더 블로그에 시간을 쓰면서 몇가지 큰 단점을 느낄 수 있었습니다.
첫 번째는 UI와 기능이 매우 제한적이라는 점입니다. 어느정도 html코드도 적용이 가능하고, md 기반으로 많은 기능을 제공해주기는 하지만, 내가 원하는대로 사이드바를 만들거나 footer나 header를 조정하는 등의 행동은 어렵습니다.
두 번째로는, Googld Ads를 통한 수익 창출이나, Google Analytics 혹은 방문자의 세부적인 통계를 알 수 없다는 것입니다. 그에 비해 Github Pages와 Jekyll을 이용하여 블로그를 구성하면 다음과 같은 장점들을 얻을 수 있습니다.

1. 높은 자유도의 커스터마이징(직접 html 수정도 가능)
2. 다양한 템플릿과 md 기반의 간편한 포스팅
3. git 연동을 통한 버전 관리와 잔디 심기
4. Github Pages를 통한 간편하고 SEO도 설정 가능한 무료 호스팅
5. 로컬 환경 지원(editor를 통한 미리보기 및 수정이 가능)

2. Ruby 및 Jekyll 설치

!! 주의할 점 !!
mac환경에서 빌드한 것이므로 window와는 세부적인 내용이 다를 수 있습니다.

1) chruby & jekyll 설치

먼저 chruby를 다운로드하겠습니다.
Q) mac은 system 상에서 ruby가 다운로드가 되어있는데, 왜 chruby를 쓰나요?
A) Jekyll 공식 문서에서 추천하기 때문입니다. 정확히는 "mac os가 기본으로 제공하는 system ruby의 사용"을 지양합니다.

1. homebrew를 install합니다.

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

2. chruby와 ruby-install을 install합니다.

brew install chruby ruby-install

3. jekyll이 지원하는, ruby의 stable version을 install합니다.
   (글을 작성하는 25.02.08 jekyll 기준으로는 3.4.1이었습니다.)

ruby-install ruby 3.4.1

4. (중요) shell이 자동으로 chruby를 사용하도록 configure해줍니다.

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.4.1" >> ~/.zshrc # run 'chruby' to see actual version

5. shell을 재시작하고 version을 확인합니다.

ruby -v

이렇게 나오면 정상입니다.

6. 마지막으로, jekyll을 install합니다.

gem install jekyll

2) 템플릿 가져오기

저는 Teddynote 님의 'Minimal Mistakes'라는 템플릿을 가져왔습니다.

먼저, 정해진 템플릿(theme)을 적용하는 방법은 3가지가 있습니다.

1. gem 명령어로 gem-based theme 포맷으로 불러온다.
2. remote theme 포맷으로 불러온다.
3. git repo를 fork한다.

그러나, 이 템플릿은 테디노트 님이 만들어두신 QuickStarter가 있기에 그것을 사용하였습니다.

3. Github Pages 배포하기

먼저, 글을 작성할 때 사용할 md 편집기와, github desktop을 다운로드해주세요. md 편집기는 원래 Typora를 많이 사용하였지만, 유료화되면서 다른 편집기들도 많이 사용되고 있습니다. 대표적으로는 Bear, markdown editor, VSC의 아래의 extension 등이 있습니다. 저는 VSC에서 extension을 사용해서 md 편집기로 세팅하였습니다.

위의 준비가 끝났다면, 이 링크를 이용해서 github repository를 만듭니다. "[username].github.io"로 이름을 지어서 만들어줍니다. github의 유료 플랜 사용자가 아니라면, Public으로 생성해야 합니다.

repository를 만들었다면, reposity의 settings로 들어가서, Pages 탭에서 Deploy from a branch로 배포를 진행합니다.

그렇게 배포가 되었다면, [username].github.io에서 사이트가 배포되어있는지 확인합니다.
(아래는 _config.yml 등을 조금 수정한 모습이라 차이가 있습니다.)

다음 편 예고

다음 편에서는 jekyll의 기본 파일시스템과, _config.yml에 대해서 알아보겠습니다.