[Jekyll] jekyll로 github.io 블로그 만드는 방법

---

layout: post

title: jekyll로 github.io 블로그 만드는 방법

date: 2020-12-26

Author: soreal

tags: [Jekyll, Blog, LOFFER]

comments: true

toc : true

pinned : true

---

Jekyll을 사용해 github.io 블로그를 생성하기로 결심한 당신! 당신이 해야할 일들을 간략하게 알아보자.

 

(로 쓰고 깃헙으로 블로그를 생성하기까지 내가 했던 일들을 알아보자.)

<!-- more -->

 

* * *

 

### 요약

 

1. Jekyll 테마 정하기

2. Git Repository 생성 및 연결

3. 기본 설정

1. 닉네임, 주소

2. 설정 파일 정리

3. 댓글 설정 disqus/gitalk

 

4. Hello blog

 

5. 기타 설정들

1. 언어 설정

2. 구글 Anaytics 연결

3. VScode 사용시 유용한 확장 프로그램

 

+ 번외

 

* * *

 

## 1. Jekyll 테마 정하기

 

깃 허브에서 블로그를 `[nickname].github.io` 를 만들기로 했다면 보통 `Jekyll` 이 검색 상위에 노출되고 선택하게 된다.

 

블로그를 만들기 위해 가장 먼저 할 일은 어떤 테마를 사용할 것인가, 즉 내 블로그의 껍데기를 고르는 것이다. 개발이랑 똑같다. 기획이랑 디자인.

 

가장 간단한 방법은 jekyll이라고 github에 검색해서 Star를 많이 받은 프로젝트를 선택해도 된다. 보통 상위 노출 프로젝트들은 이미 README.md에 설명서를 나름대로 잘 적어놓았다. 그대로 따라하면 내 블로그를 볼 필요도 없을 것이다. (그치만 보통 영어다 ^^. 나 같은 경우엔 중국어였다.)

 

Jeykll 테마들을 Live Demo로 한 눈에 볼 수 있는 사이트도 있다.

 

<https://jamstackthemes.dev/#ssg=jekyll>

 

JAMstack Themes 라는 곳인데 우리는 Jeykll을 사용할 것이므로 관련 템플릿 중에 마음에 드는 것을 고르면 된다.

## 2. Git Repository 생성 및 연결

 

Git 리포지토리 만들고 IDLE에 연결한다.

 

본인이 Git 계정이 없다면 Git 계정부터 만들고, 계정이 있다면 Repository를 만드는데 `[사용할닉].github.io` 라고 Repository 명을 따면 굳이 다른 설정을 안해도 해당 URL로 바로 연결되는 GigPage가 생성된다.

 

이 부분은 사실 다른 블로그에도 잘 나와있고 모든 지킬 테마 Repository에도 상세히 설명이 나와있다.

 

그리고 본인이 사용할 테마 Repository를 fork해온다. 그럼 그게 다다.

 

특히 내가 사용하는 이 LOFTER 라는 프로젝트의 주인 분은 정말 비개발자도 손쉽게 생성할 수 있도록 가이드를 다 만들어 두셨고 프로젝트 README.md에 올려두셨다. (다만 중국어다.)

 

구글 번역이 아주 잘 되어 있으니 가서 그걸 보고 따라해도 좋겠다.

 

<https://fromendworld.github.io/LOFFER/document>

 

IDLE은 어떤것을 사용해도 상관없으나 보통 VScode를 사용할 것이라고 본다.

이미 깔려있으면 git repository 주소를 clone 해와서 pull 받고 연결 하면 된다.

안 깔려 있다면 가볍고 블로그 에디팅 용으로 괜찮으니 VScode를 까는 것도 추천한다. (본인도 Intellij, Pycharm을 쓰면서 가볍게 편집하는건 VScode를 쓴다.)

 

<https://code.visualstudio.com> 다운로드 주소는 여기.

## 3. 기본 설정

 

### 1. 닉네임, 주소

 

사실 2번에서 이미 당신은 repository를 만들면서 했다. 주소 정할때 그거. 아니 사실 블로그를 만들기 전에 이미 한 사항이다. 디자인을 정하기 전에 보통 기획부터 하니까. 기획단계에서 뭘 쓸지, 내 닉네임은 뭘 할지 대충 그런걸 구상 해뒀을 것 아닌가? 그거다.

여기선 위에서 블로그 생성하고 연결 잘 되었는지 확인 정도 하면 될 것 같다.

 

### 2. 설정 파일 정리

 

여기가 가장 보편적으로 막히고, 어렵고, 손이 가는 부분이라 하겠다.

사실 테마별로 config 파일이나 기본으로 설정되어있는 부수 프로젝트 파일들이 각자 다르기 때문에 일률적으로 설명할 수는 없고 내가 fork 해온 LOFTER를 기준으로 설명한다.

 

먼저 `READMD.md` 파일은 보통 해당 블로그 테마를 어떻게 사용하는지나 업데이트 릴리즈 내용으로 차있을 것이다. 그걸 자기 블로그 소개나 본인이 읽어줬으면 하는 걸로 바뀌면 된다. 이건 블로그에 나오는게 아니라 git repository 첫 화면에 나오는 것이다.

 

`_config.yml` 이라는 파일이라 비슷하게 config 라는 말이 들어가있는 파일이 있다면 해당 파일이 핵심이다. 이건 테마마다 너무나도 다양하게 옵션을 제공할 것이기 때문에 해당 테마의 문서를 봐야한다. 그게 아니면 주석으로 다 설명해놨따. LOFTER의 경우 중국어로 되어있는걸 내가 번역해놨다.

 

[_config.yml 예제](https://github.com/soreal13/soreal13.github.io/blob/master/_config.yml)

 

대충 이러한 파일이고 이런 것들을 설정한다고 보면 된다.

 

그외에 about.md나 index.html 이나 소스들이 있는데 개발자들이 보면 간단한 소스 fragment 들이 있고 (테마에 따라 간단하지 않을 수도 있다 ^_^...) 거기서 본인이 이름 같은 걸 수정하고 싶으면 수정하면 된다. 나같은 경우에는 about.md는 자기 소개 페이지인데 2020-12-25기준 아직 작성을 안했고 index.html 파일 등이나 기타 파일에서 중국어를 모두 영어나 한국어로 바꿔주는 작업을 했다.

 

다음으로 폴더다.

 

보통 `_posts`, `_layouts`, `_includes`, `_sass`, `images` 폴더 등이 존재하고 그 외에 게시판 카테고리 별로? 폴더가 두어개 더 존재하는 것 같다. LOFTER의 경우 archive와 tags.

 

`_posts` 폴더는 진짜 포스트 글들이 들어가 있는 폴더다. 보통 샘플로 포스트가 몇 개 있을 것이다. 싹 날려도 되고 조금 있다가 본인이 작성할 포스트를 위해 하나 정도 남겨놓고 날리면 된다.

 

`_layouts` 폴더는 소스 보면 알겠지만 블로그 프레임? 이라 해야하나 틀 같은 것을 만들어주는 소스다. 커스텀 할 부분이 있지 않은 이상 놔두면 되겠다.

 

`_includes` 에는 건드려줘야 할 것들이 좀 포함 되어 있는(것 처럼 보이는) 편이다. analytics나 disqus(댓글)이나 head니 meta니 html 파일 등등이 들어있을텐데 나는 중국어로 메뉴 표시되는 걸 바꿔주기 위해서 건드려 줬을 뿐 보통은 건들 필요 없이 이것도 _layout 폴더와 같이 세부 뼈대? 를 만들어 주는 소스와 같다.

 

사실 _layouts, _includes 이 두개를 얼마나 안 건드냐에 따라 편의성이 갈리는 것 같다. LOFTER은 거의 건들 필요가 없었다.

 

`_sass` 폴더는 폴더 이름에서 몇몇 분들은 감이 올텐데 sass 관련 그러니까 CSS 퍼블 관련 소스 들이다. 나는 역시나 또 중국어 번역을 위해 건드렸는데 그냥 여긴 블로그 테마와 보이는 것들을 설정해둔 곳이라고 보면 된다. 즉 건들 필요 없음.

 

`images` 폴더도 보통 테마 별로 다 있는 거 같은데 그건 guide를 쓸때 이미지가 필요해서, 기본 설정 이미지 favicon등을 위해서 몇 개 세팅해서 넣는 것 같다.

개인적으로 앞으로 포스팅을 쓸때 이미지 폴더에 이미지를 올리고 써도 되지만 나는 안 그럴거라서... (다른 방법을 찾아볼 예정이다.) 아무튼 블로그의 이미지파일이 있는 곳이다.

옛날에 뭐 제로보드나 php나 나모웹이라도 잠깐 건들여봤던 분들이라면 아주 간단하게 적응이 가능할 것이라고 본다!

### 3. 댓글 설정

 

소통을 위해 댓글 기능을 붙이고 싶을 때 아 물론 정말 진정한 개발자 분들이나 일부 테마에서는 자체 뎁스를 활용한 게시판 커뮤니티 댓글 기능을 넣을 수도 있겠지만...

보통 `disqus`나 `gitalk`이라는 서비스를 쓰는 것 같다.

걍 계정 생성하고 블로그 설정파일 (_config.yml)에 세팅하면 알아서 붙는다.

(disqus 붙였다가 안예뻐서 gitalk으로 변경.)

 

역시 LOFTER 주인장 분이 아주 세세하게 적어두셨으므로 그거 보면 잘된다.

 

<https://fromendworld.github.io/LOFFER/document/>

 

다시 등장한 그 주소.

## 4. Hello blog

 

첫 포스팅 글을 올려본다. 다만 여기서도 아주 기본적으로 github.io를 사용하기로 했다면.. 그러니까 굳이 다음블로그나 네이버 블로그가 아닌 편집기를 활용한 블로그를 사용하기로 한 당신이라면 알아야 할 사항이 두 가지 정도가 있다.

 

1. 마크다운 문법을 알아야 함.

2. 깃 스테이징 커밋 푸시에 대해 기본적인 개념은 알고 있어야 함.

 

마크다운 문법에 관해서는 내 블로그에 원래 LOFTER 테마의 제작자가 중국어 가이드를 가져와서 요약한 걸 다시 한국어로 요약 번역(!)한 글이 있다.

 

[Markdown 활용 소개 (번역)](https://soreal13.github.io/soreal13.github.io/chinese-tokorean-markdown-cheatsheet "markdown guide")

 

사실 마크다운에 관해서는 구글이나 네이버나 아무데서나 치면 아주 상세히 소상히 친절하게 보기 좋게 더 좋은 글 많이 나오니 그걸 참고하셔도 됩니다.

 

아까 `_post` 폴더에서 날리지 않고 한 개 남겨둔 글이 있다면 그걸 참고해서 써보는 것도 추천한다!

 

깃의 사용법에 대해서는 리누스 토발즈의 천재성에 대해 일단 감탄과 박수부터......

 

아무튼 깃이란 건 약간 기록 덕후들 히스토리 관리를 위한 건데요...

 

정말 라이트한 사용자 분들은 github의 repository의 화면에서 수정하기 눌러서 거기 편집창에서 사실 포스트를 써도 되긴 할 것 같지만 많이 불편할 것이다.

 

git 사용법 이라는 단어를 구글에 치면 또 무궁무진한 좋은 가이드들이 있으니 (언제한번 나도 살짝 손가락 하나 올려보려고 하고 있음 추후 추가) 읽어보시면 좋겠다.

 

아무튼 글은 쓰고 스테이징에 올려서 커밋! (네이버 블로그로 치면 자동저장)

 

그다음에 커밋한 것을 깃 repository에 푸시! (글쓰기/수정/삭제 쯤 되겠다. 실제 블로그에 반영되는 일)

 

이렇게 단계가 구성되어있고 기타 로컬이나 원격, revert나 다양한 기능에 대해서는 천천히 필요할 때 배워나가면 되겠다!

## 5. 기타 설정들

 

### 1. 언어 설정 (중국어/영어 등 번역)

 

보통 영어로 되어있을 텐데 Localetime 설정이나 config에 en-UK 등의 설정이 있다면 관련 항목을 살펴보고 필요하다면 한국어 설정으로 바꿔준다. 나같은 경우에는 중국어 설정이 있어서 관련 항목을 한국어로 번역해서 매핑만 해줬다.

 

### 2. 구글 Analytics 연결

 

내 블로그에 누가 왔는지 뭘로 검색해서 왔는지 얼마나 머물렀는지 등등..

analytics.google.com 에서 계정이랑 서비스 생성하고 측정 아이디만 config에 붙여주면 된다!

 

이건 정말 연결이고 관련해서 활용하는 법에 대해서는 추후 나도 공부를 하고 글을 자세하게 써볼 예정이다. 데이터에도 관심이 많아서..

 

일단 이 블로그의 내용이 정리가 잘 되어있으니 추천한다. (config로는 추적코드가 안붙어서 head에 코드 찾아 넣다가 발견한 곳이다.)

 

[GA초보탈출 구글 애널리틱스 메뉴 일단 막 눌러보자](http://logicre.net/ga%ec%b4%88%eb%b3%b4%ed%83%88%ec%b6%9c-%ea%b5%ac%ea%b8%80-%ec%95%a0%eb%84%90%eb%a6%ac%ed%8b%b1%ec%8a%a4-%eb%a9%94%eb%89%b4-%ec%9d%bc%eb%8b%a8-%eb%a7%89-%eb%88%8c%eb%9f%ac%eb%b3%b4%ec%9e%90/)

### 3. VScode 사용시 유용한 확장 프로그램

 

일단 마크다운 미리 보기 프로그램. markdown 이라고 쳐서 인기 높은 걸 사용하면 되겠다.

* * *

 

### 번외

 

- github.io의 장점

- 파릇파릇해질 내 github grass

 

- 대량의 포스트를 단번에 수정하고 올릴 수 있다. (깃 풀 땡겨서 포스트 단위가 아닌 블로그 단위의 수정사항 반영 가능)

 

- 포스트의 모든 컨텐츠를 내가 컴퓨터에 소장할 수 있다.

 

- 단점: 아무래도 네이버 블로그 보단 비개발자에게 문턱이 높다?

 

- 이미지나 영상 파일에 대한 처리가 좀 귀찮아 진다.

 

- 티스토리나 워드프레스에 비해 세세한 설정은 초기에 힘들다. (본인이 모를 수도 있음. 아무튼 더 알아봐야함, 검색어 유입이라던가, 광고 붙이기, 테마를 벗어나서 조작하기 기타 등등.)

 

- 아 방금 생각났는데 수정 사항들이 모두 깃 브랜치로 남는구나... OTL... 장점일수도.. 단점일수도..

 

- 결론: 적당히 간단하고 적당히 커스텀 가능함. 적당히 편하다.

* * *

읽어주셔서 감사합니다.

 

누군가에겐 도움이 되길 바랍니다. !!

* * *

 

* 자체 태그

 

#깃블로그 만들기 #Jekyll 블로그 가이드