ボクココ

個人開発に関するテックブログ

Jekyll と Github Pages で CMS を構築する

Jekyll の特徴

近頃、 Jekyll という静的サイトジェネレータを利用し始めている。言わばWordPressのようなCMSのような使い方が可能だが、それらとは全く違う点が データベースやプログラムを利用しない というところがある。記事とかは全て静的サイトとして作成するのでDBアクセスが発生しない。

これにより圧倒的なサイトアクセスのスピードと、DBを用意しないことによる運用コスト削減が可能だ。また Ruby で機能拡張もできるし、プラグインが豊富に提供されているので気軽に利用することができる。

さらに、Github Pages のサポートがあるので、 Github にレポジトリと記事を丸々プッシュすることで、それだけでブログが出来上がる! もちろんGithub Pages はカスタムドメインも対応しているので、独自ドメインのCMSを構築することが可能だ。

記事作成などは自前で管理ページを持つ必要がない。それらは Web の Github 上で編集し、変更を反映すれば記事が動的に追加される。画像アップロードは Github Issue を使えばアップローダーとして利用することが可能だ。記事を書く人はGithubアカウントを作成してもらい、そのリポジトリにコミッターとして招待すればよい。

ここまで書いておいて恐縮だが、私はWordPressを使ったことがない。 PHPという時点でもう拒絶反応を起こす。代替を探していたら素晴らしいものに出会うことがた。そのためWPとの比較などはこのくらいしかできないし、WPの利点をそこまで理解していないことを承知していただきたい。

Jekyll の学習

以下のサイトだけで大枠は理解できる。大変参考になった。

Jekyllいつやるの?ジキやルの?今でしょ!

Jekyll テンプレート集

Jekyll Themes

Jekyll の使い方を学べば、これらテンプレートをたやすく利用することができるだろう。 Github 上で Fork し、 _config.xml を自分のブログ用に書き換えるだけで良い。

Github Pages での問題点

Github Pages では、 https://{account}.github.io/{repository} というURL構成になっている。Jekyll ではデフォルトではルートのindex.htmlがある想定なので、ローカルではうまくパスやURLが通っていても、Github Pages に上げたらパスが通っていないという現象に遭遇する。

そのため、ローカルでも本番でもどちらでも動くように設定を変える必要がある。

_config.yml の設定

_config.yml に baseurl をセットする。

baseurl: "/myblog"

ローカルではmyblogのようなサブディレクトリがなく、ルートで実行するので、以下のように指定する。

jekyll serve --baseurl ''

そして読み込むJavaScript や CSS、リンクなどを以下のように書き直せば良い。

<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/main.css">
<script type="text/javascript" src='{{ site.baseurl }}/js/jquery.min.js'></script>

~~~

<a href='{{ site.baseurl }}{{post.url}}'><h1 class='post-title'>{{post.title}}</h1></a>