#GithubBlog_주말을 활용한 Github Blog 만들기 4편_Jekyll 테마 다운 받아서 적용하기

# Jekyll 테마 다운로드 및 적용하기에 앞서

지금까지 Ruby와 Jekyll을 설치해서 확인한 후, Github에서 저장소(Repository)를 만들어 로컬에 저장했고,  Jekyll 사이트를 생성하는 과정까지 완료했습니다. 이전 포스팅에서 언급한대로, 아직 이 과정을 진행하지 않은 분들은 아래의 포스팅을 순차적으로 진행해주시면 됩니다. 

 

 

#GithubBlog_주말을 활용한 Github Blog 만들기 2편_Ruby와 Jekyll 설치하기

#GithubBlog_주말을 활용한 Github Blog 만들기 2편_Ruby와 Jekyll 설치하기

---

 

#GithubBlog_주말을 활용한 Github Blog 만들기 3편_Github Repository생성부터 로컬 환경에 띄우기까지!

#GithubBlog_주말을 활용한 Github Blog 만들기 3편_Github Repository생성부터 로컬 환경에 띄우기까지!

---

# Jekyll 테마 선택 및 다운로드

이전에 확인한 로컬 서버에서의 사이트는 디자인이 매우 간단하고 퀄리티가 매우 떨어지는 수준이었습니다. 이번에는 Jekyll 테마를 활용하여 블로그에 테마를 적용하여, 보다 전문적이고 개발자다운 느낌을 갖출 것입니다. 바로 Jekyll 테마를 적용해보겠습니다  

 

** Jekyll Themes 사이트 바로가기

Jekyll Themes

 

위에 사이트로 이동하여 Jekyll에서 지원하는 테마를 먼저 선택하고 Download 버튼을 클릭하여 ZIP 파일을 다운로드 합니다. 저의 경우 가장 인기있는 테마인 chirpy를 선택했습니다. 

 

** Jekyll Themes chirpy Design (대략적으로 이런 느낌입니다.)

 

---

** chirpy Download 버튼을 클릭합니다.

 

---

---

** chirpy zip의 다운로드가 완료되면 압축을 해제하고 폴더 안에 있는 파일 전부를 clone 받았던 로컬 Repository에 붙여넣습니다. (이미 같은 이름의 파일은 중복 경고를 무시하고  덮어쓰기를 진행하시면 됩니다.)

 

---

---

# Jekyll 테마 설치

위에 과정이 끝났다면 Jekyll 테마 설치하기에 앞서,  chirpy 개발자가 커스터마이징한 설정파일을 그대로 다운 받았기 때문에 초기화해야합니다. Window에서는 커맨드를 지원하지 않기 때문에 직접 수정해야합니다.

 

• Gemfile.lock 파일 삭제
• .travis.tml 파일 삭제
• _posts 디렉토리 삭제
• docs 디렉토리 삭제
• .github/workflows/pages-deploy.yml.hook 파일을 제외한 나머지 파일 삭제
• .github/workflows/pages-deploy.yml.hook 파일명을 pages-deploy.yml로 변경

 

 위의 과정 진행 중 파일이 없는 것은 건너뛰고 다음 단계로 넘어가면 됩니다. 

---

** VSCode를 실행하고 위치 확인 후 터미널에서 아래 커맨드를 실행합니다. (CMD 혹은 PowerShell에서도 가능합니다. )

bundle install

---

** 실행이 정상적으로 이뤄지면 아래와 같이 진행되고 파일이 추가로 생깁니다. 

 

---

---

# Jekyll 테마 블로그 설정 변경

이제 default로 설정되어 있는 _config.yml 파일을 열어서 기존 코드를 자신의 환경에 맞춰 수정합니다.

 

lang	웹 페이지의 언어를 선택  ko로 수정
timezone	Timezone 설정을 Asia/Seoul로 변경
title	블로그의 타이틀
tagline	블로그의 타이틀 밑에 뜨 서브 타이틀
description	블로그를 소개하는 작성란인데 적용이 안됨 // 확인중..
url	"https://{my_github_username}.github.io" 형식 작성
github_username	자신의 github username을 작성
social_name	자신의 닉네임 작성
social_email	자신의 이메일 주소 작성
social_links	자신의 소셜 링크 주소 작성
avatar	자신의 프로필 사진 링크 설정
paginate	메인화면 한 페이지에 보여줄 게시글 갯수 설정

 

---

** _config.yml 위치는 tools 바로 아래있습니다.

 

---

** 이런 방식으로 설정하면 됩니다. 

 

---

모든 설정이 끝났다면 아래의 커맨드를 통해 로컬 서버를 실행하고 localhost:4000으로 접속하여 테마가 잘 적용되었는지 확인합니다. 

bundle exec jekyll serve

---

---

# 글을 마치며

테마가 적용되면서 완성도가 조금씩 높아지고 있어서 정말 기쁩니다. 분위기가 이전과는 확연히 다르다고 느껴졌고, 이제 나만의 웹사이트가 점점 완성되어 가는 느낌이 듭니다. 

 

앞으로의 작업 중에는 가끔 에러가 발생할 수 있겠지만, 문제는 해결 가능한 범위 내에서 최대한 도와드리겠습니다. 따라와 주신 노력에 감사드리며, 다음 포스팅에서 뵙기를 기대합니다. 고생 많으셨고, 앞으로도 함께 좋은 결과물을 만들어나가길 바랍니다. 감사합니다.