企業サイトがGitHub Pages+Jekyllで出来た!

以前、Artisan Edgeで契約していたVPSを解約した。もう、VPSは契約しない!と宣言したいという記事を書きました。

いままで、Artisan EdgeのサイトはさくらのVPS上でWordPressを動かして作っていたのですが、こういう宣言をした以上は・・・ということで、GitHub Pagesに移転させました。
そして、GitHub PagesではWordPressは動作しないので、ここはJekyllで。

Artisanedge site

これが完成したサイトですが、どうですか。いままでのWordPressでのサイトとデザインはほぼ同じ、コンテンツ的にも同等で、GitHub PagesとJekyllのパワーが十分分かる出来ではないかと思います。

GitHub Pagesとは

ここでGitHub Pagesについて少し説明しておきます。

GitHubが提供するサービスの一つがPagesで、私のGitHubでのアカウントがinoccuなので、inoccu.github.io(あるいはinoccu.github.com)というリポジトリを作って、そこにHTMLファイル等をプッシュすると、http://inoccu.github.ioというURLで公開されるというものです。独自ドメインにも対応しています。

Artisan Edgeでは、artisanedgeという名前のOrganization(組織用)アカウントをGitHubで持っていて、OrganizationでもPagesは使えるので、上記Artisan Edgeの公式サイトは、artisanedge.github.comというリポジトリで管理され、http://artisanedge.jpというドメインでアクセスできるように設定しているわけです。

ところで、Pagesは静的なサイトしかホストできないという特徴があります。例えばPHPが動くといったサービスではないので、WordPressをホストしようと思ってもそれは無理です。
ただ、Pages自体がJekyllというツールで出来ているので、Jekyllで作ったサイトをホストすることは出来ます。

Jekyllとは

JekyllはRubyで出来た静的サイトの生成ツールです。
WordPressなどの動的なCMSは、MySQLなどのDBに保存された記事データを、「リクエストの度にテンプレートと組み合わせてHTMLページを作成」し、レスポンスするという構造です。
Jekyllは、テキストファイルとして保存された記事データを、「あらかじめテンプレートと組み合わせてHTMLページを作成しておき」、それをホストにアップしておきます。MovableTypeと同じ方式と言っても良いですね。

で、GitHub Pagesは、記事データのテキストファイルとテンプレートをリポジトリとしてGitHubにプッシュしておけば、HTMLページの作成(MovableTypeでいう再構築)は、Pages側で自動的にやってくれます。

GitHub Pages+Jekyllのメリット

  • 完全に無料で出来る(必要なのはドメイン代くらい)
  • 記事をテキストファイルで管理するので好きなエディタを使える
  • 記事でMarkdown書式を使うことができる
  • 静的ページなので、レスポンスが速い(GitHub Pagesとの兼ね合いだけど)
  • Gitは優れたソースコード管理ツールなので、記事やテンプレートの履歴管理が完璧
  • WordPressのカスタム投稿タイプのようなことが容易に実現出来る
  • Rubyが書ければ機能追加も容易

GitHub Pages+Jekyllのデメリット

  • ITエンジニアでないと導入が難しい
  • ITエンジニアでないと運用が難しい
  • 静的サイトの生成を行うので再構築の時間がかかる

おそらく、Jekyllの使いこなしは、ユーザがITエンジニアか否かによって大きく変わると思います。新しい記事を投稿するためには、テキストエディタでMarkdownやHTMLで記事を書いて、ローカルのGitでコミットして、GitHubにプッシュするという作業が必要です。

コミットとかプッシュなんて、ITエンジニアなら日常茶飯事の作業なので問題ないというか、むしろいつもの作業の延長線上で出来るので便利なくらいですが、ITエンジニア以外の人には全く経験のない作業だと思います。

再構築の時間は記事が増えてくると気になりますが、GitHub Pagesでホストしていれば再構築はPages側でやるので、あまり気にならないかもしれません。

Jekyll、Jekyll Bootstrap、Octopress

Jekyllはそれ自身だと(特にブログを作るには)機能が貧弱なので、それを補うためにサードパーティの派生ツールが出ています。Jekyll BootstrapとOctopressが著名です。

Jekyll

公式サイト http://jekyllrb.com/

まずは元祖Jekyll。ローカルPCにgemでインストールして、サイトのディレクトリツリーもすべて自分で作る必要があります。
ちなみに、Artisan EdgeのサイトはJekyllをそのまま使っています。ブログじゃないので。結局、素のままのJekyllの方が自由が効いたりするものです。デザインはTwitter Bootstrapを使っています。

Jekyll Bootstrap

公式サイト http://jekyllbootstrap.com/

Jekyll+Twitter Bootstrap+ブログ用の機能追加といった構成です。
Jekyllをgemでインストールする必要がありますが、それ以外はJekyll BootstrapのGitをcloneしてくれば一通りのサイトが出来るというお手軽仕様です。
導入方法は公式サイトで懇切丁寧に説明されているので、ある程度RubyとGitHubを使ったことのあるユーザなら迷うことはないでしょう。

Octopress

公式サイト http://octopress.org/

Jekyllを完全にブログ仕様に拡張したのがOctopressです。
GitHub Pagesでブログを運用し始めた人の多くがOctopressを使っているような印象を受けます。
こちらも導入方法は公式サイトで説明されているので、Jekyll Bootstrapと同じように簡単です。

まとめ

ということで、Jekyll自体が、もっと手軽にサイトが作りたいという「ITエンジニアの思い」から出来たものらしいので、ITエンジニアにとっては実に便利、そうでない人にはちょっと勧められないというツールではあります。
Octopressのキャッチフレーズが、”A blogging framework for hackers.” だということが、それを何よりも雄弁に物語っているのかもしれません。

でもまぁ、やっぱり私のような人間には便利なもので、企業サイト的なものも作れましたよということで。

この記事を書いた人

井上 研一

株式会社ビビンコ代表取締役、ITエンジニア/経済産業省推進資格ITコーディネータ。AI・IoTに強いITコーディネータとして活動。2018年、株式会社ビビンコを北九州市に創業。IoTソリューションの開発・導入や、画像認識モデルを活用したアプリの開発などを行っている。近著に「使ってわかった AWSのAI」、「ワトソンで体感する人工知能」。日本全国でセミナー・研修講師としての登壇も多数。