Hugoで作ったサイトにAmazonアソシエイトの広告を設置する方法をまとめました。

前提条件

このブログはNetlifyにデプロイしているのでその前提で以下解説します。Netlify functionsはいわゆるFaaSというもので、他のサイトから呼び出してもかまわないのでそのあたりは応用が効くと思います。

Hugo公式サイトのドキュメントを見ながらとりあえずブログを作ってみたものの、もう少し深く、体系的に学べる本が無いかと探してみました。WordPressやNext.jsのようにメジャーではないのかあまり数多くなさそうですが、多分、その道では有名であろう2冊（ともに英語！）を読んでみました。

Hugoで記事を作成する際に、Markdown Render Hooksを使ってimgタグにLazy Loading属性を追加する方法を書きましたが、今回は画像のサイズを取得してwidth属性とheight属性を追加してみます。

ブログなどで画像を多用する場合、一度に画像を全部ダウンロードするとページの読み込みが遅くなってしまいます。最近のブラウザには解決策としてLasy Loadingという機能があります。ブラウザの表示範囲外の画像はダウンロードを保留し、ユーザーがページをスクロールして画像のところまで来たらダウンロード、表示することでページの表示速度を向上させます。

HugoのAnankeテーマでアイキャッチ画像を設定する方法を解説します。

アイキャッチ画像とは

ブログの記事一覧ページや、記事ページの先頭にその記事と関連性のある画像を表示させることがあります。これをアイキャッチ画像とか、英語では Featured Image や Hero Image などと言ったりします。

Netlifyは簡単に静的サイトを構築できる便利なサービスです。流行りのJamstackでブログを運用できたらと思いこのサイトを作りました。

一通りHugo, Githubの設定をして記事を書けるようになりましたが、ドメインが “jamblog.netlify.app” です。これはこれでシンプルなので悪くないと思っていましたがやはり独自ドメインで運用したいもの。

Hugoでブログを作ろうと奮闘中です。一通り設定を行いNetlifyでブログを公開できましたが、今回は関連記事の表示について書いてみたいと思います。テーマはanankeを使っています。

Hugoを使い静的サイトでブログを構築しています。数記事描いたところでトップページで記事一覧を表示したところ、各記事が全文表示されて非常に見にくい状態になってしまいました。記事始めの数十文字を表示させる方法を説明します。

Hugoでブログ記事を作成しGitHubへアップロードしました。最後にNetlifyでブログをホスティングします。

記事をドラフト(draft)から正式版にする

Hugo+NetlifyでJamstackブログの作り方 (1)事前準備で記事を作成しましたが、quick-start.mdの最初の数行、ヘッダー行(fromt matter というみたいです)にdraft: trueと書かれた行があります。trueだとドラフト状態なのでHugoで-Dオプションを付けないとHTMLファイルが作成されません。この行をdraft: falseに変更します。

Hugo+NetlifyでJamstackブログの作り方 (1)事前準備でHugoでドラフト記事を作成し、ローカルサーバーで表示してみました。次はGitHubへのアップロードです。

GitHubのアカウント登録

GitHubのアカウントを持っていない場合は、GitHubへアクセスして右上のボタンからSign upします。

今までGoogleのサービス、Bloggerでブログを書いていましたがカスタマイズに制約を感じ、レスポンスも遅くGoogleのUX指標Core Web Vitalはかなり低い状態でした。Blogger自体もここ数年ほとんど更新されていなくてBloggerのテンプレート書式を覚えてガリガリカスタマイズするのも何だかなあと思っていました。