HugoでAmazonアソシエイトのリンクを作成する
Hugoで作ったサイトにAmazonアソシエイトの広告を設置する方法をまとめました。
前提条件
このブログはNetlifyにデプロイしているのでその前提で以下解説します。Netlify functionsはいわゆるFaaSというもので、他のサイトから呼び出してもかまわないのでそのあたりは応用が効くと思います。
Hugo本を読んでみた
Hugo公式サイトのドキュメントを見ながらとりあえずブログを作ってみたものの、もう少し深く、体系的に学べる本が無いかと探してみました。WordPressやNext.jsのようにメジャーではないのかあまり数多くなさそうですが、多分、その道では有名であろう2冊（ともに英語！）を読んでみました。
Hugo: imgタグにwidth, height属性を追加
Hugoで記事を作成する際に、Markdown Render Hooksを使ってimgタグにLazy Loading属性を追加する方法を書きましたが、今回は画像のサイズを取得してwidth属性とheight属性を追加してみます。
Hugo: 画像の遅延読込み(Lazy Loading)
ブログなどで画像を多用する場合、一度に画像を全部ダウンロードするとページの読み込みが遅くなってしまいます。最近のブラウザには解決策としてLasy Loadingという機能があります。ブラウザの表示範囲外の画像はダウンロードを保留し、ユーザーがページをスクロールして画像のところまで来たらダウンロード、表示することでページの表示速度を向上させます。
記事のアイキャッチ画像(Featured Image)を表示する
HugoのAnankeテーマでアイキャッチ画像を設定する方法を解説します。
アイキャッチ画像とは
ブログの記事一覧ページや、記事ページの先頭にその記事と関連性のある画像を表示させることがあります。これをアイキャッチ画像とか、英語では Featured Image や Hero Image などと言ったりします。
NetlifyのサイトをGoogle Domainsのサブドメインを使って運用する
Netlifyは簡単に静的サイトを構築できる便利なサービスです。流行りのJamstackでブログを運用できたらと思いこのサイトを作りました。
一通りHugo, Githubの設定をして記事を書けるようになりましたが、ドメインが “jamblog.netlify.app” です。これはこれでシンプルなので悪くないと思っていましたがやはり独自ドメインで運用したいもの。
Hugoで関連記事を表示する
Hugoでブログを作ろうと奮闘中です。一通り設定を行いNetlifyでブログを公開できましたが、今回は関連記事の表示について書いてみたいと思います。テーマはanankeを使っています。
Hugoで記事のサマリーが全文表示されてしまうときの対処法
Hugoを使い静的サイトでブログを構築しています。数記事描いたところでトップページで記事一覧を表示したところ、各記事が全文表示されて非常に見にくい状態になってしまいました。記事始めの数十文字を表示させる方法を説明します。
Hugo+NetlifyでJamstackブログの作り方 (3) Netlifyでホスティング
Hugoでブログ記事を作成しGitHubへアップロードしました。最後にNetlifyでブログをホスティングします。
記事をドラフト(draft)から正式版にする
Hugo+NetlifyでJamstackブログの作り方 (1)事前準備で記事を作成しましたが、quick-start.mdの最初の数行、ヘッダー行(fromt matter というみたいです)にdraft: trueと書かれた行があります。trueだとドラフト状態なのでHugoで-Dオプションを付けないとHTMLファイルが作成されません。この行をdraft: falseに変更します。
Hugo+NetlifyでJamstackブログの作り方 (2) GitHubへアップロード
Hugo+NetlifyでJamstackブログの作り方 (1)事前準備でHugoでドラフト記事を作成し、ローカルサーバーで表示してみました。次はGitHubへのアップロードです。
GitHubのアカウント登録
GitHubのアカウントを持っていない場合は、GitHubへアクセスして右上のボタンからSign upします。