jekyll 테마를 이용한 Github Blog 만들기
간단한줄 알았지만 생각보다 많은 삽질을 했던 Github 블로그 만들기.. 앞으로 블로그에 공부하고 배워나가는 과정을 꾸준히 기록하는것이 목표이다! 일단 첫 포스트는 블로그를 개설한 과정을 작성하고자 한다. 우선 나는 fork를 이용해 아주 쉽게 만들어 보았다.
Jekyll
아주 심플하고 블로그 지향적인 정적사이트 생성기. Markdown 형식으로 글을 작성하고 Liquid 언어를 통해 블로그를 커스터마이징 할 수 있다는 장점이 있다.
지킬 테마 고르기
- 지킬테마 사이트에서 원하는 테마를 고른다. 나는 kiko-now라는 테마를 선택했다. 원하는 테마를 고른 후, Homepage에 들어간다. 그럼 해당 테마의 저장소로 이동하게 된다.
-
Fork를 클릭해 프로젝트를 자신의 저장소로 복제한다. 잠시후 자신의 저장소로 들어가면 fork가 완료된걸 확인할 수 있다.
-
자신의 저장소에서 ‘Settings’로 이동하고 저장소 이름을 변경해준다.
[username].github.io로 바꿔주자! 그리고 Rename 클릭. - 변경한 주소로 접속하면 블로그 완성!
CSS가 적용이 안되었을 때
가끔 fork를 이용할 때 css가 적용되지 않을 때가 있는것 같다. 약간의 수정만 해주자.
- 자신의 블로그 저장소에서
_config.yml파일로 이동한다. 이 파일은 깃허브 블로그의 환경설정 옵셥들을 담아둔 파일이다. - config.yml 파일을 열고
baseurl:을 살펴보면 원본 github repo주소로 되어있는걸 알 수 있다. 이 때문에 css,js 등이 제대로 적용되지 못한 것이다. baserurl:을 자신의 github블로그 주소나 빈공란으로 수정한다. - 다시 블로그 주소로 접속해서 확인하면 css가 적용된걸 확인!
Jekyll 디렉토리 구조
- _config.yml 환경설정 정보를 담고 있다. head에 넣는 메타 정보3와 비슷한 정보를 담기도 하고 baseurl, url 등도 설정할 수 있다.
- _drafts 아직 게시하지 않은, 날짜 정보가 없는 Post를 보관할 수 있는 디렉터리이다.
- _includes 재사용할 수 있는 부분적으로 만들어진 html 파일을 보관할 수 있는 폴더이다. 예를 들면 header나 footer는 모든 곳에서 반복적으로 사용하기 때문에 include 폴더에 만들어놓고 가져다 쓰면 편하다. liquid 태그로 _include 안에 html을 소환할 수 있다.
- _layouts default.html 은 최상위 Jekyll Blog 구성을 담고 있는 파일이라고 볼 수 있다. _include 폴더 안에 부분적인 html 들이 소환되어 있다. post.html 은 Post의 형태를 정의해놓은 html 파일이다.
- _posts 날짜별로 정렬되는 형태의 아이템이 모여있는 폴더이다. 파일명은 반드시 2018-01-28-title.md 형태를 띠어야 한다.
- _data 블로그에 사용할 수 있는 데이터를 모아놓을 수 있는 폴더이다. 확장자가 .yml, .yaml, .json, .csv 일 경우 자동으로 읽어 들여서 site.data 변수를 써서 불러올 수 있다.
- _site Jekyll이 다른 디렉터리에 있는 모든 파일을 활용해서 Site로 자동 변환 작업을 마치면 그 파일들이 저장되는 폴더이다. _site 폴더 내 파일은 건드리면 안 된다.
- index.html 블로그에 접속했을 때 제일 먼저 자동으로 보여주는 파일이다.
참조
지킬공식웹사이트 https://jekyllrb.com
블로그 참조 http://jihyeleee.com/blog/third-designer-can-make-jekyll-blog/