Hugo に Hugo Profile テーマをインストールする

Hitoshi Arakawa | 2024/11/28 Thu 04:42

macOS を Ventura から Sequoia にアップデートしたので、Hugo をゼロからインストールし直した。改めて Hugo Profile テーマを使ったサイトの作り方をメモしておく。

Hugo Profile | Hugo Themes
https://themes.gohugo.io/themes/hugo-profile/

gurusabarish/hugo-profile: A highly customizable and mobile first Hugo template for personal portfolio and blog.
https://github.com/gurusabarish/hugo-profile/tree/master

環境:
・macOS Sequoia 15.0.1(英語環境)
・Hugo v0.136.2+extended

(1)新規サイトを作成する(mySite というプロジェクト名とする)。

$ hugo new site mySite --format="yaml"; cd mySite

(2)theme ディレクトリーにレポジトリをクローンする。

$ git clone https://github.com/gurusabarish/hugo-profile.git themes/hugo-profile

(3)通常はここでルートディレクトリーに config.yaml を作成、編集する。

しかし僕は多言語サイトを作成し、言語ごとに設定ファイルを分けたいので /config/_default ディレクトリーを作成してそこに config.yaml を作成した。

参考:
Hugo で言語ごとに設定ファイルを分ける | 荒川仁志 公式サイト
https://hitoshiarakawa.com/blogs/2024/2024-05-20_multiple-language-files-in-hugo/

config.yaml の編集は /themes/hugo-profile/exampleSite/config.yaml を参考にするとよい。

(4)以下のコマンドでサンプルサイトを表示できる。

$ hugo server

RSS は以下の URL だ。

https://{ドメイン}/blogs/index.xml

以下はオプション設定だ。

(5)翻訳ワード設定

Hugo で翻訳ワードを設定する | 荒川仁志 公式サイト
https://hitoshiarakawa.com/blogs/2024/2024-05-21_setting-up-translation-words-in-hugo/

(6)Matomo のコードを挿入するには以下。同じ方法で Chatwoot のコードも挿入した。

Hugo に Matomo のコードを挿入する|荒川仁志
https://note.com/hitoshiarakawa/n/nce9ac7f6bc5d

参考:
[ライブチャット] Chatwoot | 荒川仁志 公式サイト
https://hitoshiarakawa.com/blogs/2024/2024-01-19_chatwoot/

(7)月別アーカイブページの作り方は以下を参考に。

[Hugo] Hugoplate テーマで月別アーカイブを作成する | 荒川仁志 公式サイト
https://www.hitoshiarakawa.com/blogs/2024/2024-05-13_archive-pages-on-the-hugoplate-theme/

(8)最新記事一覧をトップページ、ブログトップページ、タグページ、アーカイブページのみに表示するようにするには以下。

[Hugo] 最新記事を特定ページのみに表示する | 荒川仁志 公式サイト
https://hitoshiarakawa.com/blogs/2024/2024-05-19_displaying-latest-posts-on-specific-pages-in-hugo/

Hugoで始める静的サイト構築入門 静的サイトジェネレーターで作る自作サイト 技術の泉シリーズ (技術の泉シリーズ(NextPublishing)) | meganii | 工学 | Kindleストア | Amazon
https://amzn.to/4ia04JH