[GitHub Pages 2] Jekyll 테마 적용 (feat.Hyde)

이전 포스팅에서는 GitHub의 계정과 Repository를 만들어서 기본 페이지를 웹 브라우저에 띄우는 것 까지 진행해봤는데
블로그로 활용하기 위해서는 정형화된 테마가 필요한데 Jekyll을 이용해서 테마를 적용해볼 예정이다.
선택한 테마는 다를 수 있으나 적용 방법에는 큰 차이가 없으니 도움이 되길 바라며 작성해보겠다.

환경 : Windows 10 Pro

1. Ruby + DevKit 설치

Jekyll을 활용한 블로그를 로컬에서 구동하기 위해서 Ruby는 필수 요소이다. 필자 Ruby 활용해본 적이 없어서 조금 무서웠다.
하지만 Ruby 문법을 이용해서 대단한 알고리즘을 만들어낸다거나 하는 일은 없으니 안심해도 된다. (그렇다 한들 하면 된다. 할 수 있다.)

1) https://rubyinstaller.org/downloads/ 접속

• WITH DEVKIT이라고 적혀있는 단락에서 자신의 시스템에 맞는 최신 버전을 다운로드
• 

2) Ruby Installer 설치

• 별다른 선택 없이 Next 버튼과 OK 버튼의 조합으로 설치
• 

2. Jekyll 설치 및 구동

1) Start Command Prompt with Ruby 실행

• 시작 버튼을 누르면 보이는 Start Command Prompt with Ruby 실행
• 

2) 설치

• Ruby와 짝꿍인 gem 명령어를 활용해서 Jekyll을 설치한다

gem install jekyll

• 

3) 기본 소스코드 생성 및 확인

• Jekyll 명령어를 활용해서 기본 소스코드를 생성한다. (git clone 디렉토리에서 진행)
• --force는 붙이지 않아도 된다는 글이 많았지만 필자의 경우 empty 관련 오류가 발생해서 붙여주었더니 해결이 되었다

jekyll new ./ --force

 

• 
• 기본 소스코드 생성 후 디렉토리
• 

4) 로컬 서버 구동

• bundle 명령어를 활용해서 테마에 포함된 필수 플러그인을 설치하고 로컬 서버를 구동한다.
• 실행시 빨간색 오류가 발생할 수 있지만 아래와 같은 주소가 표시되면 성공

bundle install
bundle exec jekyll serve

 

•  
• 
• cmd에 표시된 http://127.0.0.1에 브라우저에서 접속하면 드디어 기본 테마가 출력된다.
• 

3. Jekyll 테마 선택 및 적용

1) 테마 선택

• 구글이나 github에서 'jekyll theme'를 검색하면 아주 다양한 테마들을 만날 수 있다.
• 필자가 선택한 테마는 Hyde라는 테마이다. (이름이 찰떡이라 선택했다 : Jekyll and Hyde)
• 테마를 선택한 후 테마의 github repository에 들어가서 Code 버튼을 눌러 압축파일을 다운로드한다.
• 

2) 테마 적용

• 다운로드한 테마의 소스를 작업중인 디렉토리로 덮어쓰기한다.
• 
• 파란색으로 선택된 파일을 모두 삭제한다.
• 

3) 로컬 서버 구동

• 기본 테마를 적용할 때와 같은 명령어를 활용
• bundle install bundle exec jekyll serve
• 마찬가지로 cmd에 표시된 http://127.0.0.1에 브라우저에서 접속하면 드디어 Hyde 테마가 적용되었다
• CSS를 이용해서 화면을 변경하거나 플러그인을 추가하는 등 다양한 커스텀이 가능하다
• 

4. 운영 서버 적용

1) Repository에 소스 업로드하기

• git 명령어를 사용해서 GitHub Repository에 소스를 push한다

git add --all
git commit -m "테스트 페이지 제작"
git push origin main

 

• 

2) 정상 확인

• 자신의 블로그 주소로 접속해서 정상 반영 확인 (기본적인 커스텀을 마친 후의 모습)
• 

이번 포스팅에서는 깃허브 블로그에 Jekyll을 이용한 테마를 적용해는데
다음은 고맙게 찾아준 여러분과 소통할 수 있는 댓글 기능을 만들어봐야겠다.