GitHub PagesとJekyllで静的サイトを構築する第一歩

備忘録として、GitHub PagesにJekyllでサイトを作成する初歩の手順を書いておきます。以下、環境はUbuntu 14.04です。

 

1. ruby2.0以上をインストールする

% sudo add-apt-repository -y ppa:brightbox/ruby-ng
% sudo apt-get update
% sudo apt-get -y install ruby2.1 ruby2.1-dev

 

2. Jekyllをインストールする

% sudo gem install jekyll

 

3. GitHubに組織とリポジトリを(もしまだ無ければ)作り、cloneする。

組織名を<organization>、リポジトリ名を<organization>.github.ioとします。

 

 

4. 以下のフォルダ構成を作る。

.
├── _config.yml
├── _layouts
│   └── base.html
└── index.md

=== _config.yml ===
auto: true
server: true
markdown: kramdown

=== _layouts/base.html ===
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Test</title>
<p>Hello,</p>
{{ content }}
<p>World.</p>

=== index.md ===
---
layout: base
---
ほげほげ

 

5. ローカル環境で確認する

% jekyll serve

ブラウザで http://localhost:4000/ にアクセスして確認する。「Hello, ほげほげ World.」みたいな感じで表示されていればOKです。

 

 

6. コミットしてpush

% git add .
% git commit -m "Test commit"
% git push origin master

 

7. ブラウザで確認する

https://<organization>.github.io/

 

 

以上で、GitHubが勝手にJekyllを実行してくれて静的なHTMLを生成してくれます。あとは Jekyll • シンプルで、ブログのような、静的サイト などを参考にしながらカスタマイズしていけば良いと思います。

 

なお、Pythonが好きなので本当はPelicanに良かったのですが、GitHub本家がJekyll推しのように見えたのでひとまずJekyllを使ってみることにしました。