GitHub 블로그 만들기 (2) - Jekyll 설치
🧪 Jekyll에 대해 알아보고 설치해 봅니다.
안녕하세요, 해을입니다🦖
이번 글에서는 Jekyll 설치에 대해 알아보겠습니다!
실습 표시 : 🥨
(🥨 표시는 실습 부분임을 뜻합니다)
💡Jekyll이란?
Jekyll은 GitHub Pages에 대한 지원이 내장된 정적 사이트 생성기로, Markdown과 HTML 파일을 사용하여 정적 웹 사이트를 만듭니다.
GitHub에서 추천하는 도구인 Jekyll에는 무료로 제공되는 테마가 많기 때문에 HTML/CSS/JS 삼대장으로 직접 사이트를 구현하지 않아도 쉽고 빠르게 사이트를 만들어 블로그를 운영할 수 있습니다.
그럼 지금부터 블로그 테마 적용을 위해 Jekyll을 설치해 보겠습니다.
다음으로 넘어가기 전에 참고용으로 정적/동적 웹 페이지에 대해 간략하게 설명드리자면 아래와 같습니다.
📌 정적 웹 페이지
웹 서버에 저장되어 있는 파일을 그대로 전달
한 요청에 대해 모든 사용자가 같은 페이지를 전달받음
📌 동적 웹 페이지
서버에 있는 데이터를 스크립트를 통해 가공한 후, 전달
사용자는 요청에 따라 다른 페이지를 전달받음
💡 Jekyll 설치
1. Ruby 설치
🥨 Jekyll 설치에 앞서 먼저 Ruby 설치 여부를 확인합니다.
// Ruby 설치 확인 명령어
ruby -v
Jekyll은 Ruby 기반이기 때문에 Jekyll 먼저 설치하면 오류가 발생하므로 명령어를 사용하여 Ruby의 설치 여부부터 확인합니다.
🥨 Ruby가 없는 경우, 공식 사이트에서 설치 방법을 확인 후, os에 맞게 설치를 진행합니다. 다운로드 페이지에 들어가서 ’=>’ 표시가 있는 Installer를 다운로드한 후, 실행합니다. Select Components 단계에서 체크박스를 모두 선택합니다. Installer가 종료되고 터미널이 실행되면 ‘1’ 입력 후, 엔터를 누릅니다. 설치가 완료된 후, 엔터를 누르면 터미널이 종료됩니다. 터미널을 실행하여 Ruby 설치 확인 명령어를 입력한 후, Ruby 버전이 뜬다면 설치 완료!(Windows 기준) 설치 과정 펼치기
2. Jekyll 설치
① Jekyll 설치
🥨 터미널 실행 후, 명령어를 입력하여 Jekyll을 설치합니다.
gem install jekyll bundler
② 파일 삭제
🥨 index.html과 README.md 파일을 삭제합니다.
③ Jekyll 생성
🥨 파일들을 삭제한 위치에서 터미널을 실행하여 Jekyll을 생성합니다.
jekyll new ./
④ bundle 설치
🥨 bundle을 설치합니다.
bundle install
⑤ 로컬 서버 실행
🥨 로컬 서버를 실행합니다.
bundle exec jekyll serve
저는 이 단계에서 2가지 오류가 발생했고, 아래와 같은 방법으로 해결했습니다.
📌 에러 1) Jekyll 4.2.1 Please append
--traceto theservecommand for any additional information or backtrace.
📌 해결) 명령어 뒤에 –trace 추가
📌 에러 2) C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/jekyll-4.2.1/lib/jekyll/commands/serve/servlet.rb:3:in `require’: cannot load such file – webrick (LoadError)
📌 해결) bundle add webrick 명령어 실행
bundle add webrick
⑥ 로컬 서버 확인
🥨 브라우저에서 로컬 서버 주소를 확인해 봅니다.
⑦ (선택) commit/push
🥨 원격 저장소에 push하면 username.github.io 주소에 반영됩니다.
git add --all
git commit -m "Jekyll 설치"
git push -u origin main
지금 commit/push 하셔도 좋고 테마 적용까지 한 이후에 하셔도 괜찮습니다.
저는 버전 관리 차원에서(테마 적용 중에 잘못된다면 Jekyll 설치 상태로 돌아오기 위해ㅎ) commit만 했습니다!
자! 이렇게 해서 Jekyll을 설치해 봤습니다.
이제 테마를 적용할 생각에 설레네요😝
다음 글에서는 테마 적용하는 법 에 대해서 소개해 드리도록 하겠습니다.
오류 및 오타 지적, 질문, 인사 등 무엇이든 언제나 환영입니다!
읽어주셔서 감사합니다.
끝!🦕
🔗 다음 글 바로가기 GitHub 블로그 만들기 (3) - Jekyll 테마 적용
