jekyll-linkpreviewというJekyll pluginを書いたもののGitHub Pagesで使えなかったので、使えるようにするためにあれこれ格闘した話を書きます。

プラグインを自作しようと思った背景

このブログはGitHub Pagesによってホストされている。GitHub PagesではJekyllという静的サイトジェネレータが使われていて、YAML front matterのついたmarkdownをリポジトリにpushすると自動でビルドされてGitHub Pagesがサーブしてくれるので非常に便利なのだけれど、不満の1つが貼ったURLのプレビューを表示できないことだった。
一応jekyll_preview_tagというプラグインもあるものの、

  • プレビューのデザインがイケてない
  • デザインを直そうにも出力されたHTMLそのものがキャッシュされてしまう
  • gemになっていない

などの問題があったので結局自分で自作することにした。

書いたプラグインはgemとしてリリースしてます。
https://rubygems.org/gems/jekyll-linkpreview

使い方とか特徴とか

プレビューを表示させたいURLを linkpreviewコマンドに渡すと、

https://github.com/ysk24ok/jekyll-linkpreview

ysk24ok/jekyll-linkpreview

Jekyll plugin to generate link preview. Contribute to ysk24ok/jekyll-linkpreview development by creating an account on GitHub.
github.com

のようにプレビューを表示してくれる。

そのページのOpen Graph protocolをfetchしてきてHTMLを出力するので、OGPタグが設定されていないページだとプレビューは表示されない。例えば阿部寛氏の公式HPだと

http://abehiroshi.la.coocan.jp/

とだけ表示される。

jekyll buildのたびにそのページにアクセスしてOGPタグを取ってくると時間がかかるので、OGPタグをキャッシュしておくようにしている。先のプラグインと違って出力されたHTMLではなくOGPタグの値をキャッシュするので、後から出力するHTMLの形式を変えることができる。

しかしGitHub Pagesで使うことができない

いざGitHub Pages上でも使おうとしてプラグインを追加してpushすると、 The tag linkpreview is not a recognized Liquid tag.というエラーがでてビルドできないことが判明。
GitHubのサポートチームに問い合わせてみると、GitHub Pages上ではJekyllのサーバはsafeモードで起動するため利用可能なプラグインが限定されているらしい（利用可能なプラグインの一覧はこちらで確認できる）。

確かに好き勝手にプラグインをインストールできてしまうとセキュリティ的にもまずいよなあと思いつつ、かといって使えないと作った意味がなくなってしまうのでどうしたらいいかサポートの方に聞いてみると、「ビルドした静的ファイルをリポジトリの docsディレクトリに出力するようにして、そのディレクトリをpushするといいよ」と教えてもらった。

上でGitHub Pagesではgit pushしたソースファイルをJekyllが自動でビルドしてくれると先に書いたが、既にビルド済みの静的ファイルをpushしてそのままサーブしてもらうことも可能である。ただしどちらの場合でも置き場所が決められていて、

  • gh-pagesブランチのルートディレクトリ
  • masterブランチのルートディレクトリ
  • masterブランチの docsディレクトリ

の3つのいずれかの場所に置かないといけない。もともと masterのルートディレクトリにソースファイルを置いていてそれがビルドされていたのだが、サポートされていないプラグインを今回新しく入れたためビルドができない。そこでGitHubのサポートの方はローカルでビルドしたファイルを docsディレクトリに出力して、それをGitHub Pagesでサーブさせてはどうかと言ってくれたのだった。このとき、ビルドは必要ないので .nojekyllという名前の空ファイルを docsディレクトリに置く必要がある（こちらを参照）。

しかしサポートの方に教えてもらった方法は問題があって、Org/Userページでは docsディレクトリを使う方法は使えないのだった（Org/Userページが何かについてはこちらを参照）。ビルドもできない+ docsディレクトリも使えないのでルートディレクトリにビルド済みの静的ファイルを置くしかない。。

結局

あれこれ試した結果、最終的に以下のようにした。

  1. もともとルートディレクトリに置いていたソースファイルを src/に移動
  2. _site/以下にビルドされたファイルを出力（ _config.ymlに source: srcを追加しておく ）
  3. _site/以下のファイルをルートディレクトリにコピーしてきてgit pushする

新しくブログ記事を公開するとき、今まではmarkdownファイルをpushするだけでよかったのだが、ローカルであらかじめビルドしてさらにビルドされたファイルをコピーしてくるという手間のかかる感じになってしまった。自作プラグインを使うためにそこまでするかという感じだけど、さすがに自分の作ったものをドッグフーディングできないと直そうという気がなくなってしまうので、意地でも使えるようにした。

サクッとプラグインを書いてサクッとブログに導入するつもりだったのに、Rubyをまともに書くのがほぼ初めてだった+プラグインをブログに導入するのに手こずってしまい、時間をだいぶ溶かしてしまった。。

何はともあれ

Jekyllユーザの方には使ってみていただけると嬉しいです。バグ報告や要望などのフィードバックもこちらでお待ちしております。