Hugoのテーマのカスタマイズ

Table of Contents

はじめに

　経験上、最初から完成度にこだわってしまうと、なかなか思うように進まずに大変な作業になりがちなカスタマイズ。ある程度は妥協して（先送りして）、まずはブログサイトを立ち上げることを最優先に、当面必要最小限なカスタマイズを行い、とりあえず完成させてみたいと思います。

　設定ファイル hugo.toml の変更とそれに合わせた構成の変更を中心に、少しだけ好みの要素を盛り込んでみます。

　なお、このブログで採用しているテーマは hugo-blog-awesome になります。設定変更・構成変更ともに他のテーマには該当しない部分がありますのでご注意ください。 もちろん似通っている部分も多々あるので、推測や試行錯誤で進められるところもあるかもしれませんが、違うテーマを採用した場合、テーマサイトのREADMEやHowToを探して確認してください。

設定変更

　まずは、このブログのタイトルやURLなどの固有の設定と、日本語関係の設定をおこないましょう。 このブログは多言語対応の予定はないため、日本語以外の言語設定をなくして、日本語専用サイトにしてしまいます。

　また、この後の計画として、出来上がったブログサイトは GitHub Pages で公開することを考えています。baseURLの値は、それを見越して設定しています。

myblog/hugo.toml をエディタで開いて、設定を変更していきましょう。

title = "このブログのタイトル"
baseURL = 'https://GitHubのユーザ名.github.io/'

# This is what goes in <html lang="">
languageCode = 'ja'

# This defines how dates are formatted
defaultContentLanguage = "ja"
hasCJKLanguage = true

　このテーマの exampleSite には、日本語のサンプルが含まれていませんので、英語用(en-gb)の設定をベースにして、日本語用(ja)に上書していくのが手っ取り早いと思います。 その他の言語(Italian Russian, German)の設定はすべて消してしまいましょう。こうすることで、言語切り替えメニューが表示されなくなります。

　上書きで変更した箇所を差分(diff)で載せておきます。その他の言語については削除しただけですので省略します。

- ############################## English language ################################
+ ############################## Japanese language ################################

- [Languages.en-gb]
+ [Languages.ja]

-   languageName = "English"
+   languageName = "Japanese"

-   languageCode = "en-gb"
+   languageCode = "ja"

-   contentDir = "content/en"
+   contentDir = "content/ja"

-   [Languages.en-gb.menu]
+   [Languages.ja.menu]

-   [[Languages.en-gb.menu.main]]
+   [[Languages.ja.menu.main]]

- [Languages.en-gb.params]
-   sitename = "Awesome hugo blog"
-   description = "Minimal Hugo blog theme with light and dark mode support"
+ [Languages.ja.params]
+   sitename = "このブログサイトの名前。トップページのブログタイトルと同じで良いと思います。"
+   description = "このブログの要約。どんなサイトでどんなブログか、中身を説明する文章を書きます。metaタグに設定される、SEO対策の一部です。"

- [Languages.en-gb.params.author]
-   intro = "Awesome hugo blog"
-   name = "Sidharth R"
-   description = "A fast, minimalistic Hugo theme with light and dark mode support, for running a personal site or blog."
+ [Languages.ja.params.author]
+   intro = "トップページのブログタイトル"
+   name = "このブログで使うあなたの名前。私の場合GitHubのユーザ名と同じ"
+   description = "サブタイトルみたいな感じかな。お好みで良いと思います。"

- [Languages.en-gb.params.webmanifest]
+ [Languages.ja.params.webmanifest]

さらに、いくつか自分好みに設定を変更していきます。

  • タグメニューを追加する。
  • 日付フォーマット(dateFormat)を、yyyy-mm-dd にする（記事がリスト形式で表示されるところに影響します）。
  • Social系のIconは全部消す。

これらはお好みですので、やってもやらなくても良いです。

+   [[Languages.ja.menu.main]]
+     pageRef="tags"
+     name = 'Tags'
+     url = '/tags/'
+     weight = 30  # 並び順 もともとあったaboutの前に入れたので、aboutのweightを30->40に書き換えた（diff省略）
    
-   dateFormat = ""
+   dateFormat = "2006-01-02"

- [[params.socialIcons]]
- name = "github"
- url = "https://github.com/hugo-sid"
- 
- [[params.socialIcons]]
- name = "twitter"
- url = "https://twitter.com"
- 
- [[params.socialIcons]]
- name = "Rss"
- url = "/index.xml"

　タグのページ自体はHugoが自動で作ってくれるので、上記のように他のメニューに倣って、[[Languages.ja.menu.main]]を一式追加しておけばよし。 不要な方は追加しなくても問題ありません。

　必須ではありませんが、Google Analytics も有効にしておきたいと思います。以下のidに測定IDを入れてけば、自動でスクリプトが追加されました。 よくわからない、必要ないという方は、もともとのまま id = '' にしておいて問題ありません。

[services]
# To enable Google Analytics 4 (gtag.js) provide G-MEASUREMENT_ID below.
# To disable Google Analytics, simply leave the field empty or remove the next two lines
  [services.googleAnalytics]
    id = 'GoogleAnalyticsのアカウント登録時に発行された測定ID'

構成変更

　ひととおり設定が終わったら、設定した内容にフォルダ構成を合わせます。不要なフォルダやファイル(サンプルの記事)も削除してしまいましょう。

　もともとあった myblog/content/en/ の en フォルダを ja に名前変更します。posts/ 配下のサンプル記事は、_index.md だけを残してフォルダごと削除してしまいましょう。content/ 下にもともとあった、de、it、ru も削除して、ja のみがある状態にします。

myblog/
└── content/
    └── ja/
        ├── pages/
        │   └── about.md
        ├── posts/
        │   └── _index.md
        └── _index.md

こんな感じになるはずです。

アバター画像も変更します。無料の素材サイトなどからお好みの画像をダウンロードして、ファイル名を avatar.jpg に変えて、myblog/assets/ の下に置きます。

myblog/
└── assets/
    └── avatar.jpg

※素材サイトなどダウンロードした画像を利用する際は、著作権や利用規約などに違反しないよう気を付けてください。

　最後に、言語別の設定ファイル（日本語用の設定ファイル）を追加しましょう。テーマの hugo-blog-awesome/i18n/en-gb.yaml をコピーして、名前を ja.yaml に変えて、myblog/i18n/ の下に置きます。 中身はそのままで良いと思いますが、もし変更したい項目があれば、各項目の translation の値を変更してください。

myblog/
├── i18n/
│   └── ja.yaml
│
└── themes/
    └── hugo-blog-awesome/
        └── i18n/
            └── en-gb.yaml

こちらは、こんな感じです。

GitHubにコミット&プッシュ

　作業内容に漏れや間違いがないか、実際に動かしてみて確認をしてみましょう。ターミナル(PowerShell)を開いて、次の２つのコマンドを入力して、 Hugo のローカルサーバを起動します。

cd C:\GitHub\myblog
C:\hugo\v0.128.2\hugo.exe server

　ちなみに、C:\hugo\v0.128.2\hugo.exeは、これから何度も使うことになるので、Windowsの環境変数Pathにパスを通しておくと良いと思います。 また、あらかじめ Hugo のローカルサーバを起動しっぱなしにしておくと、記事を編集するとすぐに変更内容がブラウザに反映されますので、確認が非常にすばやくできて便利です。

　起動したら、ブラウザに以下のURLを入力して表示を確認してみましょう。

http://localhost:1313/

Landscape

こんな感じで表示されましたら、ひとまず成功です！

こちらを参考に、ここまでの作業を GitHubにコミット&プッシュして、一旦休憩しましょう。

まとめ

　お疲れ様でした。いかがだったでしょうか？ ここまでで、ブログを作成する環境は整いましたので、後は、Aboutの修正とブログ記事を作成して、次はいよいよブログサイトの公開です。

　初めての方にとって、アプリやブラウザベースの管理画面を利用せずに、VSCodeなどのエディタでMarkdownで記事を書く、というのは、もしかしたら慣れるまで大変かもしれませんが、慣れてしまえば、意外とそれほどでもないハズです。ぜひ、楽しんでください！

　ここまで読んでいただき、ありがとうございました。