Github 블로그 만들기 (2)

1장에서는 github page 전용 repository를 생성하였고, 취향껏 테마를 선택하였으며, ruby와 jekyll, bundler를 설치했다.

이제 본격적으로 블로그 테마를 자신의 입맛에 맞게 설정할 차례이다.

2. 블로그 설정하기

2.1. bundle 설치하기

테마에 따라 다소 차이가 있지만, 대체로 jekyll 테마 내에는 빌드에 필요한 Gemfile이 포함되어 있다. Gemfile은 파일 내에 설정된 각종 플러그인의 의존성을 관리하고, 필요한 경우 설치하거나 업데이트해 주는 ruby bundler의 설정 파일이다. (maven의 pom.xml과 유사하다.)

테마를 받으면 꼭 보게 되는 파일이 몇 가지 있다. _config.yml(테마 설정 파일) , Gemfile (ruby 의존성 설정 파일), index.html (자세한 설명은 생략한다), LICENSE (라이센스. jekyll 테마는 대체로 MIT 라이센스이다.) 등등..

• (note) Gemfile이 존재하지 않을 경우, bundle init 등의 명령어를 사용하여 초기화와 의존성 설정 과정을 별도로 진행해야 한다. 이 부분은 튜토리얼에서 다루지 않는다.

Gemfile이 잘 보인다면, 터미널에서 파일이 저장된 경로를 열고 bundle install 명령어를 입력하자. Gemfile에 설정된 각종 플러그인이 설치되는 것을 볼 수 있다. (테마마다 설치되는 요소는 다르다.)

2.2. jekyll 로컬 서버 실행하기

번들 설치가 잘 되었다면, bundle exec jekyll serve 명령어를 입력하여 jekyll 로컬 서버를 구동해 보자.

그림과 같은 결과가 나온다면 성공.

• (note) 로컬 서버가 정상적으로 실행되지 않는다면, 다음 몇 가지를 체크해 보자.

1. 명령어로 jekyll serve만 입력한 경우 (Gem:LoadError)
   ▷ 설치되어 있는 ruby 플러그인이 이 페이지를 불러오기 위한 플러그인 버전과 맞지 않아 실행에 실패하는 경우가 있다. 명령어 앞에 bundle exec를 추가해 주자.

2. 불러오려는 파일과 터미널 인코딩이 맞지 않는 경우
   ▷ 윈도우 cmd의 경우, chcp 65001 명령어를 입력하여 명령 프롬프트를 utf-8 인코딩으로 바꿔 주자.

3. 파일 경로에 한글이 포함되어 있는 경우 (SyntaxError)
   ▷ 한글이 포함되어 있지 않은 경로로 파일을 이동시켜 주자.

정상적으로 로컬 서버가 실행되었다면, 드디어 적용된 테마의 형태를 확인할 수 있게 된다.
웹브라우저에 http://127.0.0.1:4000을 입력해 보자.

이력서 형태의 테마 🔗(resume-template)를 설치한 뒤 지킬 서버를 통해 확인.

2.3. 블로그 요소 구성하기

2.3.1. _config.yml 수정하기

테마 내에는 사용자가 직접 지정할 수 있는 다양한 요소가 배치되어 있다. 앞서 확인한 이력서 테마의 경우 이름, 직책, 설명글, SNS 아이콘 유무, 연결되어 있는 메일 주소 등을 자신이 원하는 대로 커스터마이징해야 할 것이다.

이러한 블로그 구성을 바꾸려면 _config.yml 파일을 수정해야 한다. 메모장이나 코딩 도구로 파일을 열고, 어느 부분을 수정해야 원하는 부분이 영향을 받을지 유추해 보자. 테마 제작자가 작성한 설명서를 참고하는 것이 좋다.

_config.yml파일을 열어 테마 속 내용물과 비교해 보자. 느낌 오지?

_config.yml 파일을 수정하여 일부 내용을 변경한 모습.

2.3.2. 나머지 요소 수정하기

테마마다 조금씩 커스터마이징 가능한 영역이 다르다. _config.yml 파일에서 모든 영역을 수정할 수 없는 경우도 많다. 자기 취향껏 테마 레이아웃 일부를 고치고 싶을 때도 있다.

나머지 부분을 마저 수정하기 위해서는, jekyll 테마 내의 다른 파일에서 원하는 부분을 찾을 필요가 있다.

자신이 고치고자 하는 텍스트가 어느 파일에 저장되어 있는지, 어떤 부분을 수정했을 때 원하는 디자인이 나올지.. 이쪽은 테마마다 천차만별이라 하나의 튜토리얼로 설명하기 어렵다. 그러나, 다음 링크를 참고하여 사이트 구성, 폴더와 파일 구조를 이해한다면 보다 쉽게 커스터마이징에 성공할 수 있을 것이다.

🔗 jekyll 테마의 디렉토리 구조
🔗 레이아웃

본 튜토리얼에서 선택한 이력서 테마의 경우, 프로필 사진은 ./layouts/resume.html에서, 상세 내용은 ./_data/*.yml에서 수정할 수 있었다.

나머지 커스터마이징을 마친 모습.

포스트를 업로드하거나, 페이지 내부의 다른 탭에 연결할 *.md 파일 또는 *.html을 필요로 하는 테마도 많다. 포스트 작성과 기타 파일 활용법은 위쪽에 게시한 디렉토리 구조 가이드 (🔗)를 참고하도록 하자.

페이지 레이아웃이나 디자인 등을 수정하고 싶다면, 주요 구성 파일을 파악한 뒤 css, html 코딩에 도전하면 되겠다.

3. 게시하기

모든 커스터마이징을 마쳤다면, 이제 웹 공간에 띄울 일만 남았다.

📌1.1.장에서 생성한 깃허브 저장소에, 모든 테마 파일을 업로드하도록 하자. 병합, 애드, 커밋, 푸쉬!

작성한 페이지가 zawook.github.io 주소에 잘 올라간 것을 확인.

남은 이야기

처음 테마를 고르고 적용할 때, 일부 테마는 제대로 jekyll 로컬 서버가 구동되고 일부 테마는 안 되는 현상이 있어 한참을 헤맸다. 검색해도 안 나오는 이슈에 대해서는 직접 에러코드와 실행한 구문에 파고들어 원인을 추정해야 하는데, 그 탐색이 생각보다 오래 걸려서 예상보다 하루 늦게 완성하게 되었다. 언제나 그랬듯 이유는 별 것 아니었다. 사용자 폴더 경로에 한글이 있어서 생긴 문제였던 것.

이력서 형식을 띤 포트폴리오 페이지를 만든다는 당초의 목적은 꽤 훌륭하게 이루어졌다. 깃허브에서 많이들 이용하는 아이콘 생성 사이트 https://shields.io/ 를 발견하고 이용할 수 있게 된 것도 작은 수확. 재미있었다.