Supporting AMP for Hugo templates

Istio v0.8がリリースされたので更新内容についての記事を書こうとしていたら,いつのまにかテンプレートのAMP対応をしていた.

作業の流れ

  1. ざっと公式ページを見る
  2. ひたすら使えないタグやjsをampに対応したものに置き換える
  3. chromeのアドレスバーに#development=1を追加してconsoleにvalidation errorが出ていないかチェック
  4. ひたすら直す

変えたポイント

  • amp用の識別子たちを追加
  • cssファイルをconvertしてhtmlに吐き出し
  • jsを全て取り払う
    • hilightjsはgist pluginに変更
    • menuはsidebar, accordion pluginに変更
    • jump to top buttonはanimation, position pluginに変更
    • disqusをiframeに変更 (まだ表示されない原因が分からない
  • imgタグをamp-imgに変換

所感

テンプレは3つだけなので,思っていたよりは楽だった.しかしページ数が多かったり,jsを使ったスタイリッシュなサイトは辛そうだなという感じ.表示は以前より大幅に早くなったのでしあわせ.ページごとのmeta情報の生成は面倒でやっていない.

references