Jekyll 기본 사항 » 이력 » 버전 4
버전 3 (Jinwuk Admin, 2018/07/11 16:08) → 버전 4/8 (Jinwuk Admin, 2018/07/11 16:09)
h1. Jekyll 기본 사항
다음 페이지에 있는 내용을 textile로 변환하였다.
Github Page에 Jekyll 기반의 블로그를 만들면서 적용한 내용을 기록하려고 합니다.
h2(#직접-작성). 직접 작성
https://jekyllrb-ko.github.io/ 페이지를 방문하면 지킬을 설치해서 빠른 시작을 할 수 있습니다. 여러모로 손이 많이 가기 때문에 이미 만들어져 있는 테마를 활용하기로 합니다.
h2(#테마-선택). 테마 선택
http://jekyllthemes.org/ 에 방문해서 지킬 테마를 찾습니다.
MIT, Creative Commons, GPL가 많이 보이고 대다수가 "MIT 라이선스":https://ko.wikipedia.org/wiki/MIT_%ED%97%88%EA%B0%80%EC%84%9C 입니다.
Github Page를 이용하면 소스를 자연스럽게 공개하게 되지만, 복잡하게 생각하지 않으려고 MIT 라이선스가 적용된 테마를 선택했습니다. 해당 테마의 github 저장소를 Fork 한 뒤 가져온 저장소 이름을 @{github_id}.github.io@로 변경하면 생성이 완료됩니다.
h2(#설정). 설정
h3(#검색엔진-등록). 검색엔진 등록
Github Page를 생성하는 것 만으로는 검색엔진에 노출되기 어렵습니다. 다음 과정을 통해서 외부 노출설정을 합니다.
* robots.txt : 검색엔진의 웹 크롤러가 방문하면 참고하는 정책을 명시합니다
<pre>User-agent: *
Allow: /
Disallow: /about.html
Sitemap: http://{github_id}.github.io/sitemap.xml
</pre>
* feed.xml, sitemap.xml : RSS Feed, Sitemap 생성
_config.yml에 plugin을 추가합니다
<pre>
plugins:
- jekyll-feed
- jekyll-sitemap
</pre>
* Google Search Console
* robots.txt, feed, sitemap 설정이 끝났다면 google console에 블로그를 등록 합니다.
* 메뉴의 크롤링 -> Sitemaps를 클릭하여 위에서 생성한 sitemap.xml 파일을 등록합니다.
h3(#disqus-추가). Disqus 추가
Jekyll은 ruby기반의 정적 웹사이트이므로 댓글을 넣기위해서 Disqus를 사용합니다.
우선 "Disqus":https://www.disqus.com/를 방문해서 가입합니다.
우상단의 설정을 누른 뒤 (톱니바퀴) Admin > Start > Installing Disqus > Create a Site 메뉴를 순서대로 클릭해서 블로그를 등록합니다.
상당수의 지킬 테마에서 Disqus를 지원하고 있지만, 현재 사용중인 테마에 관련 코드가 없다면 https://disqus.com/admin/universalcode/를 "$":https://disqus.com/admin/universalcode/를 참고합니다.
테마에서 Disqus를 지원하고 있다면 @_config.yml@ 파일에 정보를 기입합니다. 변수명은 해당 코드가 들어가는 페이지를 참고해서 일치 시킵니다.
bq. @{ site.disqus.shortname }@를 설정파일에서 정의하면
<div class="language-yml highlighter-rouge">
<pre>
<div class="highlight">
bc(highlight). disqus:
shortname: { disqus_id }
</pre>
</div>
</div>
h3(#_configyml). @_config.yml@
최종적으로 루트의 @_config.yml@ 파일에 정의되어 있는 블로그 정보를 수정합니다.
h2(#포스트-작성). 포스트 작성
@/_posts@ 폴더 아래에 @yyyy-mm-dd-title.md@ 형식의 포스트를 작성합니다. 하위 폴더를 만들어서 계층적으로 작성도 가능합니다. 파일 최상단에 포스트 Meta 정보("YAML Front Matter":https://jekyllrb.com/docs/frontmatter/)를 입력합니다.
<div class="language-md highlighter-rouge">
<div class="highlight">
bc(highlight). ---
layout: post
title: { 제목 }
categories:
- { 카테고리 }
tags:
- { 태그 }
last_modified_at: 2017-01-01T10:30+09:00
comments: true
---
</div>
</div>
h2(#블로그-업데이트). 블로그 업데이트
변경된 사항을 origin/master로 push하면 자동으로 github page에 업데이트 됩니다. 뿐만 아니라 @_config.yml@에 플러그인을 추가, 변경을 적용하면 자동으로 빌드까지 이루어지는 것으로 보입니다.
<div class="post-tags">
github page
jekyll
블로그
</div>
</div>
<div class="section comments">
h2(#comments). Comments
<div id="disqus_thread">
</div>
Please enable JavaScript to view the "https://disqus.com/?ref_noscript":%3Ca%20class=">comments powered by Disqus.
</div>
<div class="section related">
h2(#related-posts). Related Posts
<ul>
<li>h3(#구글-한글-웹폰트-2018-04-24). "구글 한글 웹폰트 2018-04-24":https://pravusid.github.io/lifelog/2018/04/24/Google_hangul_fonts.html
</li>
<li>h3(#github-two-factor-authentication-사용으로-인한-authentication-failed-2018-03-27). "Github Two-factor authentication 사용으로 인한 Authentication failed 2018-03-27":https://pravusid.github.io/git/2018/03/27/Github-Two-factor-authentication.html
</li>
<li>h3(#우분투-17.10-설치-후기-2017-10-29). "우분투 17.10 설치 후기 2017-10-29":https://pravusid.github.io/linux/2017/10/29/Ubuntu1710.html
</li>
</ul>
</div>
</div>
다음 페이지에 있는 내용을 textile로 변환하였다.
Github Page에 Jekyll 기반의 블로그를 만들면서 적용한 내용을 기록하려고 합니다.
h2(#직접-작성). 직접 작성
https://jekyllrb-ko.github.io/ 페이지를 방문하면 지킬을 설치해서 빠른 시작을 할 수 있습니다. 여러모로 손이 많이 가기 때문에 이미 만들어져 있는 테마를 활용하기로 합니다.
h2(#테마-선택). 테마 선택
http://jekyllthemes.org/ 에 방문해서 지킬 테마를 찾습니다.
MIT, Creative Commons, GPL가 많이 보이고 대다수가 "MIT 라이선스":https://ko.wikipedia.org/wiki/MIT_%ED%97%88%EA%B0%80%EC%84%9C 입니다.
Github Page를 이용하면 소스를 자연스럽게 공개하게 되지만, 복잡하게 생각하지 않으려고 MIT 라이선스가 적용된 테마를 선택했습니다. 해당 테마의 github 저장소를 Fork 한 뒤 가져온 저장소 이름을 @{github_id}.github.io@로 변경하면 생성이 완료됩니다.
h2(#설정). 설정
h3(#검색엔진-등록). 검색엔진 등록
Github Page를 생성하는 것 만으로는 검색엔진에 노출되기 어렵습니다. 다음 과정을 통해서 외부 노출설정을 합니다.
* robots.txt : 검색엔진의 웹 크롤러가 방문하면 참고하는 정책을 명시합니다
<pre>User-agent: *
Allow: /
Disallow: /about.html
Sitemap: http://{github_id}.github.io/sitemap.xml
</pre>
* feed.xml, sitemap.xml : RSS Feed, Sitemap 생성
_config.yml에 plugin을 추가합니다
<pre>
plugins:
- jekyll-feed
- jekyll-sitemap
</pre>
* Google Search Console
* robots.txt, feed, sitemap 설정이 끝났다면 google console에 블로그를 등록 합니다.
* 메뉴의 크롤링 -> Sitemaps를 클릭하여 위에서 생성한 sitemap.xml 파일을 등록합니다.
h3(#disqus-추가). Disqus 추가
Jekyll은 ruby기반의 정적 웹사이트이므로 댓글을 넣기위해서 Disqus를 사용합니다.
우선 "Disqus":https://www.disqus.com/를 방문해서 가입합니다.
우상단의 설정을 누른 뒤 (톱니바퀴) Admin > Start > Installing Disqus > Create a Site 메뉴를 순서대로 클릭해서 블로그를 등록합니다.
상당수의 지킬 테마에서 Disqus를 지원하고 있지만, 현재 사용중인 테마에 관련 코드가 없다면 https://disqus.com/admin/universalcode/를 "$":https://disqus.com/admin/universalcode/를 참고합니다.
테마에서 Disqus를 지원하고 있다면 @_config.yml@ 파일에 정보를 기입합니다. 변수명은 해당 코드가 들어가는 페이지를 참고해서 일치 시킵니다.
bq. @{ site.disqus.shortname }@를 설정파일에서 정의하면
<div class="language-yml highlighter-rouge">
<pre>
<div class="highlight">
bc(highlight). disqus:
shortname: { disqus_id }
</pre>
</div>
</div>
h3(#_configyml). @_config.yml@
최종적으로 루트의 @_config.yml@ 파일에 정의되어 있는 블로그 정보를 수정합니다.
h2(#포스트-작성). 포스트 작성
@/_posts@ 폴더 아래에 @yyyy-mm-dd-title.md@ 형식의 포스트를 작성합니다. 하위 폴더를 만들어서 계층적으로 작성도 가능합니다. 파일 최상단에 포스트 Meta 정보("YAML Front Matter":https://jekyllrb.com/docs/frontmatter/)를 입력합니다.
<div class="language-md highlighter-rouge">
<div class="highlight">
bc(highlight). ---
layout: post
title: { 제목 }
categories:
- { 카테고리 }
tags:
- { 태그 }
last_modified_at: 2017-01-01T10:30+09:00
comments: true
---
</div>
</div>
h2(#블로그-업데이트). 블로그 업데이트
변경된 사항을 origin/master로 push하면 자동으로 github page에 업데이트 됩니다. 뿐만 아니라 @_config.yml@에 플러그인을 추가, 변경을 적용하면 자동으로 빌드까지 이루어지는 것으로 보입니다.
<div class="post-tags">
github page
jekyll
블로그
</div>
</div>
<div class="section comments">
h2(#comments). Comments
<div id="disqus_thread">
</div>
Please enable JavaScript to view the "https://disqus.com/?ref_noscript":%3Ca%20class=">comments powered by Disqus.
</div>
<div class="section related">
h2(#related-posts). Related Posts
<ul>
<li>h3(#구글-한글-웹폰트-2018-04-24). "구글 한글 웹폰트 2018-04-24":https://pravusid.github.io/lifelog/2018/04/24/Google_hangul_fonts.html
</li>
<li>h3(#github-two-factor-authentication-사용으로-인한-authentication-failed-2018-03-27). "Github Two-factor authentication 사용으로 인한 Authentication failed 2018-03-27":https://pravusid.github.io/git/2018/03/27/Github-Two-factor-authentication.html
</li>
<li>h3(#우분투-17.10-설치-후기-2017-10-29). "우분투 17.10 설치 후기 2017-10-29":https://pravusid.github.io/linux/2017/10/29/Ubuntu1710.html
</li>
</ul>
</div>
</div>