Big Sky :: GitHub Pages が Jekyll 3.0 になり、ますますブログが書きやすくなった。

先日、GitHub Pages が Jekyll 3.0 になりました。

GitHub Pages now faster and simpler with Jekyll 3.0 · GitHub

GitHub Pages is now running the latest major version of Jekyll, Jekyll 3.0 , and with it, many of th...
https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-0

速くなったという事でとても喜ばしいのですが、良い事はそれだけではなかった。GitHub Pages を使ってのブログ作成方法については、これまでこのブログでも幾つか紹介して来ました。

Big Sky :: Jekyllで始める簡単ブログ

GithubのユーザページでJekyllが使われる様になりました。 GitHub Pages Upgraded to Jekyll 0.5.0 - GitHub I just released Jek...
http://mattn.kaoriya.net/software/lang/ruby/20090409185248.htm

Big Sky :: githubとjekyllとoctopressで作る簡単でモダンなブログ

以前、「jekyllで始める簡単ブログ」という記事を書いたのですが Big Sky :: Jekyllで始める簡単ブログ GithubのユーザページでJekyllが使われる様になりました。 GitHu...
http://mattn.kaoriya.net/software/lang/ruby/20111017205717.htm

でも作った後でコードハイライトを導入したりフィードを吐いたりしようと思うと若干手間でしたし、最初は綺麗だったフォルダ構成もだんだんとグチャグチャとして来ていました。でも Jekyll 3.0 になった事でその殆どが解決してしまいました。以前は jekyll-bootstrap を使って https://mattn.github.io を作っていましたが、これを期に全部消し去って一から作り直しました。大変かなーと思ったけど、何も大変な事が無かった。

以下、その手順をご紹介します。既にリポジトリがある方は適当に読み飛ばして下さい。

リポジトリを作る

まず GitHub でリポジトリを作ります。名称は

USERNAME.github.io

という名前で作ります。ちなみに昔は

USERNAME.github.com

だった為、リポジトリ名も com で作ったよという方が多いと思いますが、Settings のページで名前を変えても動作する事を確認しました。

Jekyll でサイトを生成する

ruby をインストールしたあと


$ gem install jekyll

とすれば2016年2月現時点ではバージョン3が入ります。でも「Jekyll のサイトを準備する為だけに ruby を入れて、Jekyll を入れるってちょっと面倒！~~Golang 使わせろよ！~~」って人は Jedie を使うといいです。

Big Sky :: Golang で Jekyll のクローン作った。

普段 vim-jp や色んな所で jekyll を使っているのだけど、どうも遅くて困っていました。 Windows だと ruby 本体の起動も重いのに、たかだか数十ページの生成に十数秒、PCの負荷が...
http://mattn.kaoriya.net/software/lang/go/20131128182642.htm

Jedie は Jekyll と互換性がある為、Jedie を使って生成したサイトはそのまま GitHub Pages に push する事が出来ます。

※ここ重要です。

サイトの生成方法は


$ jedie new /path/to/root

の様に実行して下さい。あとは


$ git add .

$ git commit -a

$ git remote add origin git@github.com:USERNAME/USERNAME.github.io.git

$ git push origin master

USERNAME 部分はご自分のアカウントで差し替えて下さい。

とすれば簡単なサイトが出来上がります。僕もデフォルトのサイトから若干デザインに手をいれて以下のサイトを作りました。

Screw It!

jekyll-bootstrap を使ってたのだけど新規投稿が反映されない問題があったので、一旦全部消して作り直した。使ったのはお手製の jekyll clone、jedie1 jedie new ....
https://mattn.github.io/

なお、ちまちまと Jekyll を使ってマニュアル通り設定したいよ！という方は以下を参照下さい。

Using Jekyll with Pages - User Documentation

Bundler - Bundler is a package manager that makes versioning Ruby software like Jekyll a lot easier ...
https://help.github.com/articles/using-jekyll-with-pages/

Jekyll の拡張を有効にする

Jekyll 3.0 になった一番の良さはこれだと思っています。

Using Jekyll Plugins with GitHub Pages - User Documentation

GitHub Pages currently supports several Jekyll plugins: Jemoji - provides support for emoji within J...
https://help.github.com/articles/using-jekyll-plugins-with-github-pages/

_config.yml に以下の様に追加します。


gems:

    - jemoji

    - jekyll-mentions

    - jekyll-redirect-from

    - jekyll-sitemap

    - jekyll-feed

Jemoji

拡張子が md (markdown) の場合、GitHub 上で使える絵文字が使える様になります。例えば :+1: であればという画像に置き換わります。以下はその例

Jedieでサイトを作り直した。 - Screw It!

Screw It! Jedieでサイトを作り直した。 jekyll-bootstrap を使ってたのだけど新規投稿が反映されない問題があったので、一旦全部消して作り直した。使ったのはお手製の jek...
http://mattn.github.io/2016/02/14/site-with-jedie.html

jekyll-mentions

記事内で @mattn という表記を使うと、GitHub アカウントへのリンクが作られます。上記の記事内で @mattn がリンクになっているのを確認下さい。

jekyll-redirect-from

GitHub Pages は markdown で書くのですが、デフォルトではファイル名がタイトルになります。もちろん以下の様に書くことでタイトルは置き換えられるのですが


---

layout: post

title:  Jedieでサイトを作り直した。

---

jekyll-bootstrap を使ってたのだけど新規投稿が反映されない問題があったので、一旦全部消して作り直した。



使ったのはお手製の jekyll clone、[jedie](https://github.com/mattn/jedie)



```shell

$ jedie new .

$ vim _posts/2016-02-15-rebuild-site-with-jedie.md

$ git add .

$ git commit -a

$ git push origin master

```



jedie 便利。 :+1:



@mattn ++

ファイル名の先頭に付く日付を変えてしまったり、ファイル名そのものを変えてしまうと URL が変わってしまいます。この拡張を有効にしておくと、そういった場合でも古い URL から新しい URL の自動転送が有効になります。

jekyll-sitemap

この拡張を導入すると、それだけでサイトマップが自動生成されます。

jekyll-feed

これも以前は無かった機能です。以前は RSS フィードを吐き出すのに以下の様なファイルを自前で作る必要がありましたが


---

layout: nil

---

<?xml version="1.0" encoding="utf-8" ?>

<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">

  <channel>

    <title>{{ site.title | xml_escape }}</title>

    <link>{{ site.baseurl | xml_escape }}</link>

    <atom:link rel="self" type="application/rss+xml" href="{{ page.url | xml_escape}}" />

    <pubDate>{{ site.time | date: "%a, %d %b %Y %H:%M:%S +0900" }}</pubDate>

    <lastBuildDate>{{ site.time | date: "%a, %d %b %Y %H:%M:%S +0900" }}</lastBuildDate>

    {% for post in site.posts %}

    <item>

      <title>{{ post.title | xml_escape }}</title>

      <link>{{ post.url | xml_escape }}</link>

      <guid isPermaLink="false">tag:mattn,{{ post.date | date: "%Y/%m/%d" }}:{{ post.url | xml_escape }},rev:1</guid>

      <pubDate>{{ post.date | date: "%a, %d %b %Y %H:%M:%S +0900" }}</pubDate>

      <author>mattn.jp@gmail.com (mattn)</author>

      <description>{{ post.content | xml_escape }}</description>

    </item>

    {% endfor %}

  </channel> 

</rss>

この拡張を入れるだけでフィードが自動生成されます。何それすげー便利じゃん。

あとはレイアウトファイルの head 部分を以下の様に書くだけで link タグが生成されます。


<head>

  <meta charset="UTF-8">

  <title>{{ site.title }}</title>

  {% feed_meta %}

</head>

Jekyll 3.0 でコードハイライトがデフォルトになった

以前はコードをハイライトさせる為には Google Code Prettify を使うハックが必要でした。しかし Jekyll 3.0 では rouge という highlighter がデフォルトになった為、ユーザは css ファイルだけ用意すれば良くなりました。以下は僕が使っているハイライト用の css です。


.highlight { 

  background-color: #efefef;

  padding: 7px 7px 7px 10px;

  border: 1px solid #ddd;

  -moz-box-shadow: 3px 3px rgba(0,0,0,0.1);

  -webkit-box-shadow: 3px 3px rgba(0,0,0,0.1);

  box-shadow: 3px 3px rgba(0,0,0,0.1);

  margin: 20px 0 20px 0;

  overflow: hidden;

}

 

code {

  font-family:'Bitstream Vera Sans Mono','Courier', monospace;

}

 

.highlight .c { color: #586E75 } /* Comment */

.highlight .err { color: #93A1A1 } /* Error */

.highlight .g { color: #93A1A1 } /* Generic */

.highlight .k { color: #859900 } /* Keyword */

.highlight .l { color: #93A1A1 } /* Literal */

.highlight .n { color: #93A1A1 } /* Name */

.highlight .o { color: #859900 } /* Operator */

.highlight .x { color: #CB4B16 } /* Other */

.highlight .p { color: #93A1A1 } /* Punctuation */

.highlight .cm { color: #586E75 } /* Comment.Multiline */

.highlight .cp { color: #859900 } /* Comment.Preproc */

.highlight .c1 { color: #586E75 } /* Comment.Single */

.highlight .cs { color: #859900 } /* Comment.Special */

.highlight .gd { color: #2AA198 } /* Generic.Deleted */

.highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */

.highlight .gr { color: #DC322F } /* Generic.Error */

.highlight .gh { color: #CB4B16 } /* Generic.Heading */

.highlight .gi { color: #859900 } /* Generic.Inserted */

.highlight .go { color: #93A1A1 } /* Generic.Output */

.highlight .gp { color: #93A1A1 } /* Generic.Prompt */

.highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */

.highlight .gu { color: #CB4B16 } /* Generic.Subheading */

.highlight .gt { color: #93A1A1 } /* Generic.Traceback */

.highlight .kc { color: #CB4B16 } /* Keyword.Constant */

.highlight .kd { color: #268BD2 } /* Keyword.Declaration */

.highlight .kn { color: #859900 } /* Keyword.Namespace */

.highlight .kp { color: #859900 } /* Keyword.Pseudo */

.highlight .kr { color: #268BD2 } /* Keyword.Reserved */

.highlight .kt { color: #DC322F } /* Keyword.Type */

.highlight .ld { color: #93A1A1 } /* Literal.Date */

.highlight .m { color: #2AA198 } /* Literal.Number */

.highlight .s { color: #2AA198 } /* Literal.String */

.highlight .na { color: #93A1A1 } /* Name.Attribute */

.highlight .nb { color: #B58900 } /* Name.Builtin */

.highlight .nc { color: #268BD2 } /* Name.Class */

.highlight .no { color: #CB4B16 } /* Name.Constant */

.highlight .nd { color: #268BD2 } /* Name.Decorator */

.highlight .ni { color: #CB4B16 } /* Name.Entity */

.highlight .ne { color: #CB4B16 } /* Name.Exception */

.highlight .nf { color: #268BD2 } /* Name.Function */

.highlight .nl { color: #93A1A1 } /* Name.Label */

.highlight .nn { color: #93A1A1 } /* Name.Namespace */

.highlight .nx { color: #555 } /* Name.Other */

.highlight .py { color: #93A1A1 } /* Name.Property */

.highlight .nt { color: #268BD2 } /* Name.Tag */

.highlight .nv { color: #268BD2 } /* Name.Variable */

.highlight .ow { color: #859900 } /* Operator.Word */

.highlight .w { color: #93A1A1 } /* Text.Whitespace */

.highlight .mf { color: #2AA198 } /* Literal.Number.Float */

.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */

.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */

.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */

.highlight .sb { color: #586E75 } /* Literal.String.Backtick */

.highlight .sc { color: #2AA198 } /* Literal.String.Char */

.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */

.highlight .s2 { color: #2AA198 } /* Literal.String.Double */

.highlight .se { color: #CB4B16 } /* Literal.String.Escape */

.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */

.highlight .si { color: #2AA198 } /* Literal.String.Interpol */

.highlight .sx { color: #2AA198 } /* Literal.String.Other */

.highlight .sr { color: #DC322F } /* Literal.String.Regex */

.highlight .s1 { color: #2AA198 } /* Literal.String.Single */

.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */

.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */

.highlight .vc { color: #268BD2 } /* Name.Variable.Class */

.highlight .vg { color: #268BD2 } /* Name.Variable.Global */

.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */

.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */

見た目はこんな感じになります。

以前はハックを行う為にいろいろなファイルを assets に入れていましたが、Jekyll 3.0 対応を行った後はめちゃくちゃシンプルになってとても見通しが良くなりました。

GitHub - mattn/mattn.github.io: mattn.github.io

You signed in with another tab or window. Reload to refresh your session. You signed out in another ...
https://github.com/mattn/mattn.github.io

皆さんもぜひ、Jekyll 3.0 対応を行ってみてはどうでしょうか。