GitHub Pages + Jekyll(지킬)을 이용하여 페이지 만들기

예를들어 자신의 정보와 참여한 프로젝트를 정리하고자 함에 웹사이트를 제작하는 방법은 여러가지가 있습니다.

대표적으로 호스팅 서버를 이용하여 무료로 혹은 비용을 지불하는 것입니다.

비용 아까워 무료로 사용하자니 제한사항이 많은데 GitHub Pages는 코드 저장소와 호스팅이 모두 제한된 자원안에서 무료로 사용이 가능하기에 이 글을 작성합니다.

---

가장 먼저 레포지토리를 생성합니다.

유의할 점은 레포지토리의 이름을 아래와 같이 자신의 '계정명.github.io'로 해주시는 것입니다.

 

Jekyll은 Ruby라는 언어를 바탕으로하므로 Ruby를 설치하여 줍니다.

터미널을 열고 아래의 명령어를 입력하여 줍니다.

brew install chruby ruby-install

#원하는 버전 선택
ruby-install ruby 3.3.5

#필자는 zsh를 이용하기에 zshrc 되어있습니다.
#세팅에 따라서 달라질 수 있으므로 유의해주시기바랍니다.
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.3.5" >> ~/.zshrc

source ~./zshrc

gem install jekyll

 

아래 링크를 통해 더욱 자세한, 다양한 내용을 확인할 수 있습니다.

https://jekyllrb.com/docs/installation/macos

Jekyll on macOS

---

위 설치 명령어를 실행 시킨 후 생성할 페이지의 테마를 선택하는 것입니다.

혹은 처음부터 직접 세팅하는 것 또한 가능하지만 해당 글에서는 테마로 제작을 해보겠습니다.

아래 사이트에서 느긋히 원하는 테마를 선택해주세요.

• https://jamstackthemes.dev
• http://jekyllthemes.org
• https://jekyllthemes.io
• https://jekyll-themes.com

저는 2번째 사이트에서 포트폴리오 템플릿을 선택하였습니다.

 

Demo 버튼을 눌러서 페이지를 탐방할 수 있으므로 마음에 드시는 템플릿을 선택하시면 됩니다.

또한 Hompage버튼을 눌러 Github Repository 페이지로 이동하여 fork 후 pages로 페이지 생성 또한 하나의 방법입니다.

필자는 모든 파일을 다운로드 받은 후 수정작업을 진행하였습니다.

 

 

다운로드한 파일을 수정 또는 테스트를 위해 자신의 레포지토리에 압축해제한 뒤 즉시 업로드 후

Settings 탭의 사이드 메뉴 중 Pages 페이지로 이동합니다.

 

Pages세팅은 아래와 같이 선택 하시면 됩니다.

---

이제 위에서 진행한 설치 명령어가 모두 실행되었을 것입니다.

다운로드한 테마 파일의 압축을 해제한 후 사용중이신 IDE에서 열어줍니다.

열자마자 일단 프로젝트 루트 경로에서 아래 명령어를 입렵합니다.

bundle install

 

아래 명령어로 프로젝트를 로컬에서 실행시킬 수 있으며 수정한 내용은 새로고침하여 적용되었는지 확인 하면서 진행하시면 됩니다.

jekyll serve

명령어를 실행시킨다면 http://127.0.0.1:4000 으로 실행됩니다.

 

필자와 같이 만약 위 명령어에서 오류가 발생한다면 "Gemfile.lock"파일을 삭제하여 다시 "bundle install"명령어를 실행하여 프로젝트를 다시 실행하면 해결 가능할 것으로 보입니다.

 

---

수정을 하셨다면 이제 GitHub Actions 탭으로 이동하여 페이지 생성 진행을 확인할 수 있습니다.

 

이제 다시 Pages 페이지로 이동하면 아래와 같이 생성된 페이지를 확인 가능합니다.