Open Board

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/를 참고합니다.

테마에서 Disqus를 지원하고 있다면 @_config.yml@ 파일에 정보를 기입합니다. 변수명은 해당 코드가 들어가는 페이지를 참고해서 일치 시킵니다.

bq. @{ site.disqus.shortname }@를 설정파일에서 정의하면

<div class="language-yml highlighter-rouge">

<div class="highlight">

bc(highlight).   disqus:

    shortname: { disqus_id }

</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&#45;04&#45;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&#45;factor authentication 사용으로 인한 Authentication failed 2018&#45;03&#45;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&#45;10&#45;29":https://pravusid.github.io/linux/2017/10/29/Ubuntu1710.html

</li>

</ul>

</div>

</div>