JekyllをMacにインストールする

JekyllカスタマイズをするのはVPS上のCodeboxでも可能だけど
やっぱり手元のMacにもインストール

Jekyllのインストール

下記を参考にインストール

JekyllをMacで試す(クイックスタート)

インストール

$ gem install jekyll
$ rbenv rehash
$ jekyll -v
Notice: for 10x faster LSI support, please install http://rb-gsl.rubyforge.org/
jekyll 2.2.0

サイト作成、ローカルサーバでサイト起動

--watch 付きで起動してページの追加のされようを確認する

$ jekyll new sample.com
$ cd sample.com/
$ jekyll serve --watch
...
    Server address: http://0.0.0.0:4000/
  Server running... press ctrl-c to stop.

ブラウザでアクセス

ローカルホスト、ポート4000で起動するのでブラウザでアクセスする
http://locahost:4000/

ページを追加する

ルートディレクトリに追加する

$ vi sample.com/root.md
---
layout: page
title: Root
permalink: /root/
---
Root directory.
  • ./_site/root/index.html が生成される
  • サイトヘッダーにリンクが追加される

サブディレクトリに追加する(その１)

$ mkdir sub1
$ vi sample.com/sub1/sub1.md
---
layout: page
title: Sub1
permalink: /sub1/
---
Sub1 directory.
  • ./_site/sub1/index.html が生成される
  • サイトヘッダーにリンクが追加される(site.pagesで引っ張っている)

サブディレクトリに追加する(その２)

$ vi sample.com/sub2.md
---
layout: page
title: Sub1
permalink: /sub/sub2
---
Sub2 directory.
  • ./_site/sub/sub2/index.html が生成される
    • つまり、生成前の構造は関係なく、Front Matterの指定に従ってディレクトリ構造が出来上がる
  • サイトヘッダーにリンクが追加される(site.pagesで引っ張っている)

_postディレクトリに追加する

$ vi sample.com/_posts/2014-09-01-sample-post.md
---
layout: post
title:  "Sample Post"
date:   2014-09-01 12:34:56
categories: post sample
---
Sample Post
  • _postディレクトリにはYEAR-MONTH-DAY-title.MARKUP形式のファイル名で追加する
  • ./_site/post/sample/2014/09/01/sample-post/index.html が生成される
  • インテックスページのコンテンツにリンクが追加される(site.postsで引っ張っている)

サイト終了

ctrl-c

ページタイトルを変える

_config.ymlのtitleを変更するだけだが、 _config.ymlの変更は --watch では反映されない、再起動が必要

$ vi sample.com/_config.yml
$ jekyll serve
tags: ,