技術

ホームページにHugoを導入した話

導入技術録のまとめ

Hugoを導入してホームページを改装してみました。
今回はそのお話。

事の発端

偶然googleアプリのニュース欄に流れてきた
情シスの休日：個人ホームページを WordPress から Hugo + AWS へ移行して、コストを 1/100 にした話
を見て、そろそろシンプルすぎる私のサイトも変更したいなぁと思ったわけです。
とりあえずgeminiに相談したりBingったりしながらcloudflare pagesでホスティングする方法を探り、
30分くらいかかって無事ホスティング完了。静的なので読み込み爆速！ブログサイトとして動かすことにしました。

技術録

全部Windows環境です。

必要なもの

  • hugo
1

winget install hugo
  • github/gitlabの基礎知識
  • cloudflareの基礎知識(静的ホスティングできればなんでもok)

テンプレートからサイトを作る 

1
2

hugo new site (お好みのディレクトリ名)
cd (お好みのディレクトリ名)

でサイトの雛形を作り、移動します。
テーマがないと動かないのでテーマを入れます。今回stackを導入しました。
[!]ここからはテーマによって差異があるみたいなので、stack以外のテーマを導入する場合は各自で調べてください。

1

git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack

themes/hugo-theme-stack/exampleSite/の中にあるhugo.yamlとcontentフォルダをコピーして、hugo.tomlと同じ場所に貼り付け、.tomlの方は削除します。

1

hugo server

でサーバーを起動させ、localhost:1313でテンプレートが動いていることを確認してください。

各種設定

日本語設定から始めます。
hugo.yamlの中を開き、以下の設定を変更してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

- baseurl: https://example.com/
+ baseurl: (自分のドメイン)

- title: Example Site
+ title: (title)

- copyright: Example Person
+ copyright: (自分のコピーライト)

- DefaultContentLanguage: en
+ DefaultContentLanguage: ja


- languageCode: en-us
+ languageCode: ja-JP

- hasCJKLanguage:false
+ hasCJKLanguage:true

baseurlには自分のホスティングするurlを入力。
上4つはhtmlのheadと同じ役割。
hasCJKLanguageは文字カウントから何分で読めるかみたいなのを計測してくれるらしいです。trueにすると日本語もちゃんとカウントされるらしいのでtrueにしました。

言語設定 

1
2
3
4
5
6
7

+ languages:
+     ja:
+         languageName: 日本語
+         title: (タイトル名)
+         weight: 1
+         params:
+             description: (タイトル下の説明)

左端のsidebarの設定です。
zh-chとかarとかenの項目は多言語設定にしないなら消しちゃいましょう。

URL設定 

1
2
3
4

permalinks:
-    post: /p/:slug/
+    post: /:slug/
     page: /:slug/

記事のURL設定です。
デフォルトのままだとkam1o416.cc/p/kijitest みたいなURLになるので、気になる人は変えましょう。

SNSリンク設定 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    social:
        - identifier: github
          name: GitHub
-         url: https://github.com/CaiJimmy/hugo-theme-stack
+         url: https://github.com/自分のユーザーID
          params:
              icon: brand-github

        - identifier: twitter
          name: Twitter
-         url: https://twitter.com
+         url: https://x.com/自分のユーザーID
          params:
              icon: brand-twitter

twitterのリンクがいつ死んでもいいようにxにしておきましょう。はぁ。

フォント設定(assets/css/custom.scss)

フォルダがなければ新規作成してください。 custom.scssに以下の設定を貼り付けます。(GooglefontsからNotoSansJPを使う場合)

1
2
3
4
5
6
7

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
:root {
    --base-font-family: 'Noto Sans JP', sans-serif;
}
strong, b {
    font-weight: 700;
}

i18nの設定

デフォルトで書かれている日本語をいじりたい場合は最上階層にi18nフォルダを作成して、その中にthemes/hugo-theme-stack/i18n/の中にあるja.yamlをコピペしてください。 この中身を書き換えるとカスタマイズできます。
あとはこれらをgithub/gitlabにコミット/プルすればOK

Cloudflare Pagesでビルド

いつも通りです。
フレームワークをHugoに設定してビルドすれば多分いけます。
あとはCloudflare側でドメインの設定をして完了です。
お疲れ様でした。

記事の編集について

記事は全てmdファイル管理のため、書く環境が一律ではないです。そこだけ注意点かも
windowsはvscodeで記述し、iphone/ipadはobsidianで記事を書いています。
windowsもobsidianで記述すればいいんじゃない？と思った方もいると思いますが、データ管理をicloudでやっており、githubで立て直すのが面倒だからです。

あとがき

サイトを一新してブログサイトを作った話でした。今まで投稿していたはてなブログ(やnote)は全部こっちに移行して卒業するかもしれないです。たぶん…？

参考文書

情シスの休日：個人ホームページを WordPress から Hugo + AWS へ移行して、コストを 1/100 にした話
[HugoのテーマをJaneからStackに変えた](https://blog.k-bushi.com/post/tech/environment/change-theme-hugo-stack/)

© 2020 - 2025 kam1o_416P