August 29, 2016

Github PagesとJekyll Nowでブログを作成する。

作成の経緯

数年前から自分のブログを作りたいなーと思っていたんですが、wordpressをちまちまいじっては飽きる、を繰り返し、なかなかブログ公開まで至っていませんでした。 レンタルサーバやドメインの契約も手間もかかるし、なんとなくブログを作るにはやはりそれなりの時間とコストがかかりますよね。

だったらどっかのブログサービスでいいじゃんとも思いましたが、私自身Webエンジニアだし、やはり自分の手で作りたい。 何かほかに良いアプローチはないかなーと探していたところ、Github PagesとJekyll Nowという組み合わせにたどり着きました。

Github PagesとJekyll Now、それぞれの特徴

まずはそれぞれどんなものか、簡単にまとめ。

Github Pages

Github Pagesは、GitHubが提供するホスティングサービス。無料で使うことができ、自身のGitHubアカウント上に usernam.github.io という名でリポジトリを作成すると、Webサイトとして「https://usernam.github.io」にアクセスできるようになる。

これだけ。シンプルですねー。

あとはリポジトリにサイトリソースをpushしていけば、Webサイトを更新していけます。 通常サイトを作成するとなると、サーバの用意→ドメイン設定→FTPアップロードとなり、初めてインターネット上でサイトとして閲覧できますが、それに比べるとGitHub Pagesはとてもスピーディ。そして0円なり。

ただし基本的にサイトとして機能するのは静的コンテンツのみらしいです。phpとか、htaccessとかサーバサイドのプログラムは動かないのかな?

Jekyll Now

Jekyllをベースに作られた、サイトジェネレータ。公式では「Create your blog in 30 seconds!」とおっしゃっていますが、実際まじで30秒でブログの土台ができます。恐ろしい子。

私はJekyll Nowのリポジトリから直接folkしてきました。 ちなみにJekyllを利用するにあたり、Windows環境では以下の物をインストールする必要がありました。

  • Ruby
  • bundle

若干の手間はかかりますが、数分で終わりますね。

大まかな流れ

  1. Githubアカウントを作成。
  2. Jekyll Nowのリポジトリをfolk。
  3. リポジトリ名をGitHub Pagesとして機能するよう変更

これだけで最低限の機能を持ったブログとして公開できちゃいます。 細かい手順に関しては、公式やわかりやすく書いてくれている方がたくさんいらっしゃるので、そちらを参考にしてください。

Jekyllテンプレートのカスタマイズ

先の工程を踏めば「最低限の機能」はできるのですが、実際にゴリゴリとブログを書くには少し物足りない点があります。 私が物足りないと感じた点は以下の点です。

  • SNS対応(OGP・シェアボタン)が不完全
  • 記事のカテゴリ、タグ一覧のページがない
  • 記事一覧ページにサムネイル・カテゴリ・タグの関連付けがない

私はこれらを解消するために様々な記事を読み漁ってカスタマイズを施し、現在の形に至りました。 さらにデザイン・マークアップに関してもデフォルトのものにかなり手を加えたため、Jekyll Nowの原型はほぼないに等しい状態ですw まだまだ改善したい点はあるのですが、カスタマイズに関してはキリがないので一旦はこのままいこうと思ってます。

カスタマイズの際に参考にさせて頂いた記事

あとはJekyllの公式Tipsドキュメントを参考にしています。

感想

一連の作業を終えて、「すごくギークなブログ構築だなあ」と思いましたw

記事を書く際の型はMarkdown、投稿するにはgit commit → pushですからね。 エンジニアにはかなり馴染みのあるやり方で運用していけるので、ギークな運用がしたい方にはおすすめです。

あとは、ある程度しっかりした作りのブログにしたかったら、やはりそれなりに時間がかかるということ。この点はWordpressとかをカスタマイズするのと同じですね。こだわり始めると終わらないカスタマイズ。笑

この記事をSNSで共有するにはこちら