Hugo v0.109.0でトップページまでツリーを辿る.AncestorsメソッドがPageに追加された。 これにより、パンくずリストをシンプルに実装できるようになった。 Release v0.109.0 · gohugoio/hugo 以下.Ancestors.Reverseを利用した公式サンプ …

Github Pagesから Cloudflare Pages に移行したときのメモを以下に記す。 目次 背景 Cloudflare Pages側の操作 PagesのCreate a project > Connect to Gitを選択 「Deploy a site from your …

以前、 Optimize your hosted AMP pages - amp.dev を読みながらAMPの最適化を行いました。 AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜 - SIS Lab 今回は、さらに一歩進みAMP OptimizerによるAMPの最適化を試してみまし …

このブログでは、HugoでFull AMPなHTMLを生成し、GitHub Pagesでホストしています。 AMPの最適化を行う際、Lighthouseを利用してWebパフォーマンスを測定しているのですが、PWA Readyになっていないことが気掛かりでした。 個人ブログをPWA化しても自分しか使わ …

ブログメンタリング期間中は、事前に設定したブログKPI（ページビュー数、ユーザ数、Twitterフォロワーなど）を報告するため、毎週日曜日に手動で取得していました。 しかし、ブログメンタリング終了後、報告する必要がなくなるとどうしてもめんどくさいことはやらなくなってしまいます。 そこで、今まで取得し …

2019/12月〜2020/2月の期間で @kakakakakku さんのブログメンタリングを受けて、「ブログを毎週1記事必ず書く」という目標にチャレンジしました。結果としては、 @kakakakakku さんのサポートもあり3か月間毎週1記事以上書くことができ、目標を達成しました。 同じ期間 …

このブログではローカルでAPIサーバ（Express）を動かし、HugoのShortcodesから利用しています（2020/03/13現在）。 HugoでAMP対応のブログカードを作る - SIS Lab そのため、記事を書いてHugoのプレビューを利用する場合は、2つのターミナルで以下のコマンドを …

AMPページをGoogleドメインではなく、自ドメインで表示できる「AMP Real URL」をこのブログにも導入しました。 「AMP Real URL」に関する日本語のページがあまりなかったので、手順をまとめてみました。 AMPの課題とAMP Real URL AMPとは AMPはGoogleが …

このサイトもAMP対応したのだから、LighthouseやPageSpeed Insightsのスコアもきっと高いはずと計測してみたところ、全然スコアが出ていなかったので改善しました。その時のメモを残しておきます。 目次 TL;DR 計測 セルフホストしたAMP Pagesを最適化する 1. 最初の …

ミニマルCSSフレームワーク「 A Responsive CSS Grid for AMP | 1BX 」を試してみました。 目次 TL;DR AMP用のCSSフレームワークに求められること 1BXとは ハマった点 解決方法 参考 TL;DR Hugoで作成するようなブログにおいては 1BX で十 …

GitHub Pagesを利用する上で、公式ドキュメントやいろんな人のブログを読みつつ、自分で試行錯誤した結果を残しておきます。 目次 GitHub Pagesの始め方　個人的なおすすめ 参考 GitHub Pagesの始め方　個人的なおすすめ {user}.github.io …

もっと気軽にアウトプットできる技術ブログサービス「 Qrunch（クランチ） 」では、重複コンテンツの心配をせずにクロス投稿ができることを知りました。 クロス投稿が可能なのは、Canonicalに元のブログURLを指定できるためです。Canonicalに参照元のURLを明示することで、検索エンジンに …