처음 사용해보는 jekyll 블로그

05 Apr 2020

사실 jekyll 을 이용한 블로그를 시도한 게 처음은 아니다. ~~아마 한….. 5번쯤?~~ 이런저런 우여곡절 끝에 이제야 jekyll 과 github.io 저장소가 동작하는 것에 대해 이해가 돼서 이렇게 첫 글을 게시하고 있다.

지금까지 아주 기본적인 지금의 상황을 만들기까지 어떠한 삽질을 해왔는지 이야길 해볼까 한다.

늘 그렇듯 처음 뭔가 해보려 할 때엔 쉬울 것 같고 하면 다 될 것 같다.

먼저 ruby 를 설치하고 jekyll 을 설치하는 건 어느 개발자라도 쉽게 할 수 있을 것이다.

Imgur

https://rubyinstaller.org/ 에 접속해서 설치하면 끝!

그다음

Imgur

다음과 같이 루비가 설치가 되면 루비 프롬프트를 열 수 있다

프롬프트를 열고 지킬을 설치 해주면 된다. gem install jekyll 명령어로 지킬을 설치해 주면 끝!

Imgur

다음과 같이 뜬다면 성공

여기까지는 5번의 시도 모두 통과한? 큰 어려움 없는 작업이다.

Imgur

자신의 깃 허브에 add repository 를 눌러 Repository name * 에다가 아래와 같이 자신의 이름을 넣고 저장소를 생성하면 완료!! 간단하다!!

Imgur

위와 같이 생성하면 끝!

문제는 테마를 적용하기까지의 과정이 약간 나에겐 고된 작업이었다.

내가 사용한 테마는 lanyon 심플하고 간단하게 보이는 테마를 골랐다.

Imgur

해당 테마의 깃 주소로 들어가서 우측의 Fork 버튼을 눌러 다운 받으면 된다. ~~(star 눌리는 건 예의겠죠??)~~

* 여기서 각 테마마다 설정 방법과 적용하는 방법이 각기 다를 수 있으니 해당 저장소의 README.md 파일을 꼼꼼하게 읽고 사용하시길 바랍니다!! *

Fork 를 하고 clone을 하면 디렉토리는 다음과 같다.

Imgur

간단하게 설명을 붙이면

글을 작성할 때 해당 디렉토리에 md 파일을 생성해서 글을 쓴다.

제목을 쓸 때는 YYYY-MM-DD-post-name.md 형식으로 작성하면 된다.

public
- /css
- /js
- apple-touch-icon-precomposed.png & favicon.ico
  
  로고
_config.yml

jekyll이 동작하기 위한 여러 설정값들이 있는 중요한 파일!!
.editorconfig 에디터의 설정을 정해주는 파일로 charset, indent_style 등 파일의 일관성을 유지할 수 있게 도와준다.
.gitignore

깃 저장소에 올리지 말아야 할 데이터나 (key 값) 불필요한 데이터 (cache 데이터) 들이 git 저장소에서 무시하게 설정하는 파일
404.md

존재하지않는 주소로 들어올 경우 표시되는 md 파일
about.md

layout이 page 로 sidebar에 표시, 해당 링크를 누르면 about.html 이 불려오면서 md 파일에 적어둔 글이 보이게 된다.
atom.xml

RSS 와 비슷한 기능을 하는 파일로 구독을 한 사람에게 Feed 하기 위한 파일
index.html

baseurl 로 들어가면 표시되는 화면으로, home 화면으로 title이 잡혀있다
LICENSE.md

라이센스 관련한 md 파일
README.md

깃허브 저장소에 프로젝트 README 파일
_site

jekyll serve 명령어를 실행하면 해당 디렉토리를 만들어 로컬 호스트로 변경사항을 확인할 수 있게 도와준다. 다만 .html 파일이나 .md 파일이 변경되었을 때 바로바로 적용이 되며 config.yml 파일 같은 경우는 jekyll 서버를 껐다가 다시 가동해 확인해야 한다.

_site 디렉토리를 다시 만들고 싶다면 jekyll build 명령어를 실행시키면 된다.