背景 #
最初の記事ということで簡単な自己紹介です。 普段はクラウド系のエンジニアをしています。
仕事柄、新しい技術に触れることが多いので、アウトプットの習慣化と自分用のメモをストックする場所を作りたいと考えて、ブログを始めてみることにしました。
技術的な話とか、そのときどきで関心を持ったものなども適当に書いていく予定です。
なぜHugoを選んだのか #
最初はWordPressも検討しましたが、個人ブログでサーバーの運用コストをかけ続けるのはもったいないなと。今更ながらではありますが、SSG（静的サイトジェネレーター）とCDNを組み合わせた軽量な構成にしました。
新規で静的サイトジェネレーターを導入するのは、表示速度や管理の面で大きなメリットがあります。 テーマは、デザインがかわいらしくて直感的に気に入った Blowfish を選択。カスタマイズ性できそうなので、少しずつ自分好みに設定をいじってみようと思います。
今回は、高速かつモダンなテーマ「Blowfish」を使用したHugoの導入手順を記録します。
Hugo導入のステップ #
1. Hugoのインストール #
まずはローカル環境にHugoをインストールします。
# macOS (Homebrew)
brew install hugo2. サイトの新規作成 #
任意のディレクトリで以下のコマンドを実行し、サイトの雛形を作ります。
hugo new site my-blog3. テーマ「Blowfish」の導入 #
今回はデザイン性と機能性に優れた Blowfish をサブモジュールとして追加します。
cd my-blog
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish4. 記事の作成 #
以下のコマンドで新しい記事（Markdownファイル）を作成します。
hugo new posts/first-post.md5. ローカルで確認 #
以下のコマンドでローカルサーバを起動させる。
hugo serverブラウザから以下にアクセスできることを確認する。
localhost:1313初期カスタマイズ：faviconを表示させる #
サイトの骨組みができたらアイコン（favicon）を設定したいところですが、Blowfishの公式ドキュメント（Partials | Blowfish）に記載されている標準的な方法を試行したところ、自分の環境では上手くいかずハマってしまいました。
テーマ本体のテンプレート構造を崩さず、確実に指定した画像をサイト全体に反映させる手順をまとめました。
設定の仕組み #
Blowfishには、独自のコードを <head> タグ内に追加するためのファイル extend-head.html が用意されています。この拡張ファイルに直接タグを記述することで、指定した画像ファイルを優先的に読み込ませることが可能です。
設定の手順 #
以下の2つのステップで進めます。
1. 画像ファイルを「static」フォルダへ配置 #
使用したい画像を準備します。PNG形式に加え、ブラウザの自動検出やXML（サイトマップ）表示用にICO形式も用意しておくとより確実です。
- 画像を favicon.png および favicon.ico という名前で用意します。
- それらのファイルを、プロジェクトのルートにある static/ フォルダの直下に配置します。
- パス:
(プロジェクトルート)/static/favicon.png - パス:
(プロジェクトルート)/static/favicon.ico
static 直下に置かれたファイルは、Hugoのビルド時にルートディレクトリへそのままコピーされます。特に favicon.ico は、多くのブラウザが自動的に探しに行く基本ファイルとなるため、配置しておくだけで解決する場合も多いです。
2. 「extend-head.html」を作成・編集 #
次に、ブラウザに対してfaviconの場所を明示的に指定します。
- layouts/partials/ ディレクトリ内に、extend-head.html という名前のファイルを作成します。
- パス:
(プロジェクトルート)/layouts/partials/extend-head.html
- パス:
- 作成した
extend-head.htmlに、以下のコードを記述して保存します。
<link rel="icon" href="/favicon.png" type="image/png">これでテーマ本体のテンプレート構造を崩すことなく、faviconの設定を埋め込むことができました。
反映の確認とキャッシュの注意点 #
設定を保存・デプロイしても表示が変わらない場合は、以下の3点を確認してください。
- 再起動・再ビルド: ローカル環境では
hugo serverを一度停止（Ctrl+C）し、再度立ち上げ直してください。static内のバイナリ変更は再起動が必要な場合があります。 - 直接確認: ブラウザで
サイトURL/favicon.icoに直接アクセスし、自分の画像が表示されるか確認してください。 - キャッシュクリア: Faviconはブラウザに強くキャッシュされます。確認時は必ずシークレットモードを使用するか、キャッシュをクリアして試してください。
2.デプロイ #
1. Cloudflare Pagesでの公開 #
GitHubにリポジトリをプッシュし、Cloudflare Pagesと連携させることで公開が完了します。
GitHub側でCloudflareの認証を許可する必要があります。
Cloudflare側でhugoのビルドコマンドを書いていきます。Hugoのバージョンの相性が悪いのかエラーになり、やや格闘しました。
まとめ #
Hugoは一度環境を構築してしまえば、Markdownで記事を書き、GitHubにプッシュするだけでサイトが更新されるなかなか快適なツールです。これからガシガシ記事を書いていこうと思います。
ただ設定はやってみた系の参考記事を見てもあまり良くわからんので、公式のドキュメントをちゃんと読むのと、 すでにサイト作られている方のGitHubリポジトリのソース見るのが一番早い気がします。 色々試してみようかと思います。改善なんかも載せていきたいです。
GithubのCodespacesにHugoがデフォルトで入っているので、CloudFlareと連携させるだけでもデプロイできてしまう！しかもドメイン取らなければ無料だし、非常に便利です。
