【徹底解説】Hugo Bootstrap Themeをアップグレードする方法！

2022年7月3日

こんにちは、ねむです。

ここ数年は本当に異常気象が多く、直近は猛暑日も続いており、熱中症になって搬送される方が多いようですが、皆さんはお変わりないでしょうか？

適度な節電が国からも指示されてるようですが・・・生活に支障が出るほどの暑さに対処できるように、エアコンはつけて体調管理を十分にしていきましょう。

管理人はエアコンの温度設定をミスして最近風邪をひいてしまいましたが～温度設定には気をつけましょう！（汗）

さて、今回はHugoのテーマテンプレートをアップグレードする方法についてです。

当サイトでは「Hugo」のテーマテンプレートとして「Hugo Bootstrap Theme🔗」を導入しており、最近になってBootstrap(CSSフレームワーク)の最新版である「v5.2」にテーマ側が対応したので、この機会に「ねむNote」においても全体的にリニューアルを行いました。今回はまず「Hugo Bootstrap Theme🔗」の「v1.0.0-alpha.0🔗」を適用する方法を解説します。

Hugo 本体モジュールの最新化

最新化のためのアップグレード方法自体は簡単です。以下の 3 ステップで行います。

Hugoモジュールをダウンロード
所定のフォルダに格納
環境変数を設定してHugoモジュールへのパスを通す
Hugo の動作確認

ダウンロード先

HugoモジュールはGithubの以下ページからダウンロードすることができます。サイトの開発環境に合わせたバージョンを取得します。

Hugo v0.101.0 の公開ページ🔗

Hugo モジュールの新旧バージョン差し替え

管理人の開発環境はWindowsなので、拡張バージョンであるこちら🔗を取得し、圧縮ファイルを展開して出力されるhugo.exeを以下に配置します。

※あくまで管理人のケースなので、各自パスは自由に指定して問題ないです。ただ、今後のメンテナンス性を踏まえて C ドライブ直下などの分かりやすい場所に配置することをオススメします。

C:\Hugo\bin\hugo.exe

環境変数の設定

Windowsでの開発環境の場合、環境変数の設定が必要になります。

今回はアップグレードなので既にパスは設定しておりますが、インストールされる方もいらっしゃるかと思いますのでおさらいも兼ねて説明します。

Windowsキー＋xを同時に押下し、表示されたメニューから「システム」を選択
右カラムに「詳細情報」が表示されるウインドウの後半にある、「関連設定」の中の「システムの詳細設定」を選択
「システムのプロパティ」の「詳細設定」タブ最下部にある「環境変数」を選択
「システム環境変数」もしくは「ユーザ環境変数」のいずれかに対し、変数「Path」があればそこに Hugo モジュールの配置パスを登録

Hugo の動作確認

Hugo の操作は基本コマンドライン上で行いますので、Windows 環境の場合はPowershell又は「コマンドプロンプト」を起動します。

Powershellの場合は以下のように入力し、導入した Hugo のバージョンが表示されたら成功です。

PS C:\> hugo version
hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66+extended windows/amd64 BuildDate=2022-06-16T07:09:16Z VendorInfo=gohugoio

「Hugo Bootstrap Theme（※以降、「HBS」と表記）」のアップグレード方法

従来のバージョン（～ v0.80.xx）を利用されている方であれば、基本的な流れはこれまでのアップグレード方法と同様ですので問題ないかと思います。

初回導入される方や、そもそも Hugo を初めて触られる方ですと慣れない作業になると思いますので、ここで記載する手順に従って行えば大丈夫です。

Hugo の導入から初めての場合

Hugo の導入からということは、以下のいずれかのケースに該当すると思われます。

サイトの新規構築からHugoで実施したい
既存サイトをHugoに乗り換えたい

それでは、手順について概略にはなりますが説明していきます。

開発環境（IDE）の導入 ※導入していない場合のみ

管理人はWindows環境から、「Visual Studio Code🔗」を利用しています。

マイクロソフト謹製でIDEとしての機能や品質も必要十分以上で、使い勝手抜群なので常用しています。

この辺りは好みによって異なるので、お好きなIDE環境を導入してください。

Git と Git クライアントの導入 ※導入していない場合のみ

管理人は Git クライアントとして「TortoiseGit🔗」を利用しています。

Git 本体としては「git for Windows🔗」を利用します。

仕事柄、TortoiseSVNに長年使い慣れているので、その操作感を損ないたくなく、同社が提供するGitクライアントを利用していますが、Windows環境で作業される方であれば、フリーで操作感も分かりやすいのでオススメです。

導入後は、サイト構築のための Git フォルダ配置パスを暫定的に決めておくのが良いです。

Node.js の導入 ※導入していない場合のみ

Hugoを利用する場合に必須、という訳ではないですが、「HBS」を利用する際は必須のため未導入の方は導入しましょう。

Windows環境の場合、「Node.js のサイト🔗」からNode.jsのインストールファイルをダウンロードして、インストールするだけです。

管理人の場合、長期安定性を求めるので、LTS（推奨版） > Windows Installer (.msi) > 64-bitを利用しています。

ここまでで一通りの準備は完了です。ここから先は Hugo のサイト作成をコマンド上で行っていきます。

Hugo のサイト新規作成～動作確認

Hugo サイトの構築を行うワークフォルダ上で、IDE or Powershell or 「コマンドプロンプト」を起動して以下のコマンドを入力します。

hugo new site [サイト名を入力 ※半角英数字]

Congratulations! Your new Hugo site is created in C:\Git\[登録サイト名].

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Hugo サイトの作成自体は上記コマンドで終了です。次は作成した Hugo サイトの開発フォルダに入って、細かい設定作業を行います。

Hugo サイトの開発フォルダ内で Git ファイルの初期化を行います。これにより同フォルダ内で Git コマンドやクライアント上での操作が以降可能となります。

cd [登録サイト名]
git init

Initialized empty Git repository in C:/Git/sample/.git/

次は、Hugo のテーマファイルとして「HBS」を導入します。導入時に、テーマ側が提供するサンプルプロジェクトのファイル群も合わせてルート直下にコピーしておきます。

git submodule add https://github.com/razonyang/hugo-theme-bootstrap themes/hugo-theme-bootstrap

Cloning into 'C:/Git/[登録サイト名]/themes/hugo-theme-bootstrap'...
remote: Enumerating objects: 15623, done.
remote: Counting objects: 100% (355/355), done.
remote: Compressing objects: 100% (228/228), done.
remote: Total 15623 (delta 187), reused 228 (delta 109), pack-reused 15268
Receiving objects: 100% (15623/15623), 32.29 MiB | 7.37 MiB/s, done.
Resolving deltas: 100% (10091/10091), done.
warning: LF will be replaced by CRLF in .gitmodules.
The file will have its original line endings in your working directory

xcopy .\themes\hugo-theme-bootstrap\exampleSite /E

.\themes\hugo-theme-bootstrap\exampleSite\.dockerignore
.\themes\hugo-theme-bootstrap\exampleSite\.gitignore
.\themes\hugo-theme-bootstrap\exampleSite\extra_stats.json
.\themes\hugo-theme-bootstrap\exampleSite\package-lock.json
.\themes\hugo-theme-bootstrap\exampleSite\package.json
(以下省略)
234 File(s) copied

次は、Hugo でNode.jsモジュールを利用するために必要なpackage.hugo.jsonなどを生成するため以下のコマンドを入力します。

hugo mod npm pack

Node.jsが利用可能となったので、テーマ側で指定されているpackage.jsonの設定通りにNPMを用いてNode.jsライブラリの導入を行います。

npm install

ここまでで必要最低限の設定が完了したので、動作確認を行います。

動作確認を開始する前に、念のため、Hugo の設定ファイルからテーマ指定が「HBS」になっていることを確認します。

config/_default/config.tomlの設定ファイルを確認し、以下の記述があれば問題ありません。無ければ追記しましょう。

theme = "hugo-theme-bootstrap"   # when adding theme as git submodule

以下のコマンドを入力して、hugo サイトを起動確認します。

hugo server

実行後は以下のようなメッセージがコンソール上に表示されますので、この状態で記載されている URL にアクセスし、サイトが表示されることを確認できれば成功です。

hugo: collected modules in 715 ms
Start building sites …
hugo v0.100.1-0afb4866e345d31cbbcbab4349e43f1d36122806+extended windows/

                   | JA  | EN
-------------------+-----+------
  Paginator pages  | 123 |  15
  Non-page files   |   0 |   0
  Static files     | 914 | 914
  Processed images |   0 |   0
  Aliases          | 194 |  41
  Sitemaps         |   2 |   1
  Cleaned          |   0 |   0

Built in 17649 ms
Watching for changes in C:\Git\nemulog\{archetypes,a
Watching for config changes in C:\Git\nemulog\config
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Hugo は導入しているが、「HBS」の導入が初めての場合

まずは Hugo サイトのフォルダに移動します。

IDE or Powershell or 「コマンドプロンプト」を起動して以下のコマンドを入力します。

cd [登録サイト名]

次は Hugo のテーマテンプレートである「HBS」を導入します。以下のコマンドを入力します。

git submodule add https://github.com/razonyang/hugo-theme-bootstrap themes/ hugo-theme-bootstrap

HBSをGitのサブモジュールとして導入完了したところで、テーマ側で提供されるファイル群を Hugo サイトに反映していきます。

mkdir config
xcopy .\themes\hugo-theme-bootstrap\exampleSite\config\* .\config /E /Y /I
xcopy .\themes\hugo-theme-bootstrap\exampleSite\content\* .\content /E /Y /I
xcopy .\themes\hugo-theme-bootstrap\exampleSite\data\en\* .\data\en /E /Y /I

次は、Hugo で Node.js モジュールを利用するために必要なpackage.hugo.jsonなどを生成するため以下のコマンドを入力します。

hugo mod npm pack

Node.js が利用可能となったので、テーマ側で指定されているpackage.jsonの設定通りにNPMを用いてNode.jsライブラリの導入を行います。

npm install

ここまでで必要最低限の設定が完了したので、動作確認を行います。

動作確認を開始する前に、念のため、Hugo の設定ファイルからテーマ指定が「HBS」になっていることを確認します。

config/_default/config.tomlの設定ファイルを確認し、以下の記述があれば問題ありません。無ければ追記しましょう。

theme = "hugo-theme-bootstrap"   # when adding theme as git submodule

以下のコマンドを入力して、hugo サイトを起動確認します。

hugo server

Hugo も「HBS」も導入済みで、Git のサブモジュールとして利用している場合

アップグレード自体は長くても 5 分あれば完了すると思いますが、慣れないうちはゆっくり進めましょう。

まずは Hugo サイトのフォルダからテーマファイルのフォルダに移動します。

cd themes/hugo-theme-bootstrap

その後、テーマ側の Git 情報を取得し、最新バージョンを確認します。

git fetch
git tag --sort=-refname -n

バージョン名で降順に並べ替えした状態で表示されるので、最新バージョンが最上部に表示されます。

導入したいバージョン名を指定して、Git からファイルをチェックアウトします。

git checkout [指定バージョン名 ※例：v1.0.0-alpha.0]

次は、Hugo サイトのフォルダルートに戻り、Hugo で Node.js モジュールを利用するために必要な「package.hugo.json」などを生成し、更にテーマ側のpackage.jsonを認識させるために、以下のコマンドを入力します。

cd ../../
hugo mod npm pack
git add themes/hugo-theme-bootstrap package.json

最後に、導入後の検証や設定修正等を行い、問題がなければ Git コミットして完了です。

Hugo も「HBS」も導入済みで、Hugo モジュールとして利用している場合

Hugo モジュールを既に使用している場合、テーマのアップグレード作業はコマンド 1 行で完結します。

Hugo サイトの開発フォルダから、以下のコマンドを入力すればよいです。

hugo mod get -u github.com/razonyang/hugo-theme-bootstrap@[バージョン名を指定]

最新バージョンで問題なければ以下で問題ないです。（masterブランチが適用されます）

hugo mod get -u github.com/razonyang/hugo-theme-bootstrap

なお、テーマ側のバージョン名やコミット ID は以下から参照可能です。

おわりに

今回、Hugo テーマであるHBSのアップグレード方法を紹介してきましたが、いかがでしたでしょうか。

とりあえずは管理人の備忘を記事にしたまでとなりますが、もし当サイトの記事がキッカケでHugoやHBSを使ってみるようになった方が居ましたら、なにかお困りの内容があれば分かる範囲でお手伝いしますので、コメントやコンタクトフォームからもご連絡お待ちしております。

かくいう管理人もHugoを始めてから、まだ 5 ヶ月？くらいしか経過しておらず、別に毎日触ってるわけでもないのですが、基本的な部分はある程度押さえていますので、少しでも皆さんのお力になれば幸いです。

以上