Jekyll のサイトを html 整形でぶっこわした話

安易にliquidのページをきれいにしようとするなよ。約束だぞ

Posted by amasuda on November 5, 2017

Ads

何が起きたか

jekyll でいつもどおりブログを作成しており、色々と改善が進んで「よっしゃ、コミットしたろ」と思ったときに事件はおきました。 投稿ページがおかしな見た目になっていたのです。

何を変更したっけ?と確認しようと思っても、変に仕事がはかどりすぎて、変更点が多く容易にチェックできませんでした。 (こまめに commit しておけよという話ですが…)

しかし、過去の commit に戻って色々と差分を見つめていたところ、ふと「そういえば、liquid テンプレートを atom の html 整形できれいにしたな」ということを思い出しました。

改めて、記事のテンプレートである html をのぞいたところ、ファイルの先頭が、

--- layout: default ---

<!-- Post Header -->

一行にされてる!

---
layout: default
---

<!-- Post Header -->

に変更したところ、無事に記事が表示されるように。

ここらへんは、liquid テンプレートの書式のため、注意しないといけないですね。

ちなみに

こうした jekyll に問題が発生したとき、どういう問題解決法がいいのだろうと調べていると、大体、以下のフローで確認するのかなと思いました。

1. jekyll server を起動して表示された html がおかしい

テンプレートを疑いましょう。上記のように、該当箇所の書式が正しいのか、html のタグのミスがないかどうかを確認します。

2. jekyll server 起動時に何かエラーが出ている。そもそも localhost のサイトにアクセスできない

jekyll の処理中に何か問題が発生している可能性が高いです。

エラーメッセージが出ているとは思いますが、さらに詳細を追うのであれば、ログレベル

export JEKYLL_LOG_LEVEL=debug

とコマンドを叩いて、jekyll を debug モードで実行してみましょう。

どういった順番でサイトが生成されているのかわかりますよ。

3. jekyll server 自体が起動できない

ruby や gem, bundler の問題があります。

直すのが難しい場合がありますが、細かに commit して差分を作りつつ、bundle update や ruby のバージョンをアップデートしたりしましょう。

最悪の場合は、ruby や gem, bundler の環境をクリーンにして、一からインストールしたほうが速かったりします。