この記事はアドベントカレンダー2日目の記事です。
https://qiita.com/advent-calendar/2025/dokokanoradio_hugo
本記事の概要
UniGetUIというWinGetのGUIツールを用いて、Windows上でHugoと必要なソフトウェアをインストールする。
その後、blowfish-toolsを用いて、Blowfishテーマ適用済みのサイト作成環境を作成する。
WindowsでのHugoのインストール
UniGetUI
コマンドでWinGetを使っている人は不要だと思うが、事前にUniGetUIをインストールしておくと良い。
下記からインストール可能である。
本記事ではUniGetUI前提で説明する。
(なお、バージョン3.3.6を使用している)
UniGetUIの簡単な使い方説明
UniGetUIをインストールして起動すれば、このようにパッケージを探す画面が表示される。
(左上の虫眼鏡付きの地球儀をクリックすること)
これでもかというくらいに「パッケージの検索」と書かれている入力欄にソフト名を入力すれば検索できる。
インストールしたいソフトにチェックを付けて、「選択したものをインストール」をクリックすればインストールできる。
ちなみに、UniGetUIは(WinGet以外の)複数のパッケージマネージャーに対応しているため、同じソフトウェアが複数表示される場合もある。
その際は、ソース欄がWinGetになっているものを選ぶと良い。
(フィルター機能もあるので、図のようにWinGetのみにチェックを付けると楽である)
Hugoの利用に最低限必要なもの
以下に列挙する。なお、以降の見出しは「WinGetのパッケージID」なので、UniGetUIにそのままコピペすれば見つかる。
Microsoft.PowerShell
Hugoを呼ぶためのシェルとしてPowerShellが必要になる。
Hugoの利用にはバージョン7系のPowerShellが必要になる。
バージョン5系(Windows PowerShell)やコマンドプロンプトではダメなので注意すること。
参考：PowerShellのバージョンの件はHugo公式のクイックスタートにも記載されている。
Git.Git
バージョン管理ソフトにGitを使用するので入れておく。
執筆内容のバックアップなどにもなるので必須である。
Hugo.Hugo.Extended
Hugo本体である。当たり前だがこれが無いと始まらない。
Extendedではない無印版もあるが、通常の利用ではExtended版が推奨される。
入れておくことを推奨するもの
OpenJS.NodeJS.LTS
Node.jsのLTS版である。
Blowfishのテーマが提供しているインストーラや、CloudflareのWranglerで必要になることが多い。
なお、NodeJSのリリース形式の関係上、通常の利用であれば、LTS版をインストールした方がサポート期間も長いので便利である。
好みによって入れるもの
Microsoft.VisualStudioCode
記載用のエディタにVSCodeを使用する。
(なおVSCodeの使い方などについては特に解説しないので別途検索等すること)
好みによるが、他エディタを使う場合はそちらを使えばよい。
GoLang.Go
Go言語の実行環境である。
今回の場合は不要のはずだが、Hugoの利用の仕方によっては必要になる場合もある。
(手元の環境で元々導入済みだったのでそこまでの検証が出来ていないです)
Discord.Discord
チャットツールのDiscordを使用することで、GitHubからの通知をDiscordで受け取れたりと便利である。
当たり前だが、アカウントが無いと使えないのでアカウントも取得すること。(後述)
GitHub.GitHubDesktop
GitHubが提供しているgitのGUI環境(のようなもの)である。
gitクライアントの好みの問題なので、必要だったら入れること。
Webサービスのアカウント作成
必要に応じて下記のアカウントを作る。
それぞれWebサイトにアクセスしてアカウントを作ればよい。
- GitHub(https://github.com)
- gitリポジトリを管理するのに使う
- CloudFlareなどでデプロイできるので便利である
- Cloudflare(https://www.cloudflare.com/ja-jp/)
- 今回はCloudflare Pagesをサーバーとして使う
- GitHubアカウントがあればそちらでログイン可能
- 別途サーバー等を持っていれば不要である
- もしくは別なレンタルサーバーなどを使うのであればそちらのアカウントが必要
- Discord(https://discord.com)
- チャット通知にDiscordを使う場合
Blowfishテーマの導入と環境構築
補足
Blowfishの公式サイトにも記載されているのでそちらを参考にすること。
(日本語に翻訳されている)
Blowfish-toolsのインストール
Blowfish-toolsを使用することで、Blowfishテーマ導入済みのHugoのサイト作成環境をコマンド一発で構築できる。
なお、Blowfish-toolsの実行には、Node.jsが必要なので、事前にインストールすること。
インストールには、PowerShellを起動してコマンドを実行すだけである。
ちなみに、PowerShellは、VSCodeでも起動できるし、エクスプローラーのアドレス欄にpwshと入れてEnterを押しても起動できる。
npm i -g blowfish-tools
npm とはNode.jsのパッケージマネージャーのことである
Blowfishテーマ導入済みのHugo環境の構築
環境を構築したい場所でpowershellを開く。
例：C:\work\hugo
そこで、下記のようにコマンドを打つと、my-siteフォルダにHugoの環境が出来る。
この例では、C:\work\hugo\my-siteに環境が出来る。
フォルダ名を変えたければ、my-siteを好きな名前にすれば良い。
npx blowfish-tools new my-site
Blowfish公式サイトではnpxの記載が省略されているので注意すること。
npxとはnpmでインストールしたパッケージを実行するコマンドである。
コマンドを実行すれば、下記の様に表示されるはずだ。
これで環境が構築されたので、次回以降はこの環境を用いてサイトのビルドを行う。
次回に続きます
長くなったので、ビルドや日本語環境の為の修正については次回の記事に書いています。