Github pages+Jekyllでホームページ作成

Jekyll (静的サイトのジェネレータ) と組みあわせることによって、ローカルで書いたMarkdownのコンテンツを、HTMLに変換したサイトを作成することができる。これと、Github pagesと組みあわせることによって、サイトのバージョン管理を容易におこなうことができる。

日本語の資料としては、「Jekyllいつやるの？ジキやルの？今でしょ！」が、ていねいに書いてあってわかりやすい。

1. 準備

まず、ローカルにJekyllの環境をととのえる。Rubyを用意してから、gemでJekyllをインストールする。しかし、Using Jekyll with Pagesと、Jekyllのページで若干内容が違う。gemは、github-pagesか、jekyllかどっちが正しいのだろう？

2. Jekyllサイトの作成

サイトのフォルダは、Jekyllでつくるか、テンプレートをダウンロード、展開して使う。

ここでは、Jekyll themesで紹介されている中から、Lagomを使用している。

wget https://github.com/swanson/lagom/archive/master.zip
unzip master.zip
mv lagom-master/ USERNAME.github.com

ここで、USERNAMEは自分のgithubアカウントの名前にすること。

3. サイトの設定

_config.yml にYAML形式で記述する。

フォルダ構成

4. 記事の作成とビルド

記事は_postフォルダにMarkdown形式で書く。そして、

jekyll build

とするとブログがHTMLに変換される。

###5. githubとの接続 githubにはSERNAME.github.ioの名前のリポジトリを作成しておく。これは特殊な名前となり、github pageと認識される。

git init
git add .
git commit -m "First commit"
git remote add origin git@github.com:USERNAME/USERNAME.github.io.git
git push -u origin master

以下はその他のもろもろのメモ。

Jekyll Bootstrap

Jekyll Bootstrapは、Jeklyll 1.0に未対応のようであるが、Bootstrap対応にするのはそれほどむずかしくはないだろう。

Scrivenerとの連携（失敗）

Scrivernerと連携すると便利だと思ったのだがうまくいかなかった。Scrivenerはフォルダと連携するときにファイル名にバージョン管理のための連番をつけてしまう。これがJekyllでビルドするときにうまくいかなかった。

ブログからのインポート

記事をブログサイトから移行することが可能であるらしいが、実際にやっていないのでうまくいくかは不明である。

インポート用のgemをインストールする。

gem install jekyll-import --pre

Tumblrからのインポート

$ irb
> require "jekyll/jekyll-import/tumblr"
=> true
> url = "http://toshiukii.tumblr.com/"
"http://toshiukii.tumblr.com/"
> format = "md"
"md"
> grab_images = true
=> true
> add_highlights = true
=> true
> rewrite_urls = true
=> true
> JekyllImport::Tumblr.process(url, format, grab_images, add_highlights, rewrite_urls)

#github #SSG #静的サイトジェネレーター