heno Log

この記事でやること

Hugoを使ってブログを作成し、Stackテーマを入れてローカルで表示するまでの手順をまとめます。
※本記事はWindows11環境での手順になります。Mac環境での手順は記載していませんのでご注意ください

環境

• Windows11
• PowerShell
• Hugo extended 0.154.2
• Git

Hugoのインストール

Windows版Hugoをダウンロード

まずはHugoを入れていきましょう。 このリンクのWindows版インストーラをダウンロードをしてください。 大量にファイルがありますが、Windowsのextended版を入れてください。
StackテーマはSCSSという技術を使用しているためextendedと書いているバージョンが必要です。 私は最初にextendedではないものをインストールしてしまい気づくのに相当苦労したので注意してください…

ダウンロードしたら解凍して任意のフォルダに移動します。 Hugoがインストールできたか確認してみましょう。PowerShellで以下のコマンドを打ってください。

  hugo version

そうすると、

  hugo v0.154.2-f66d0944461bf32c4e69588bc3e093f14e4e149d+extended windows/amd64 BuildDate=2026-01-02T16:08:44Z VendorInfo=gohugoio

といったものが表示されるかと思います。さっき入れたバージョンと一致していればOKです！そのまま新しいサイトを作成の見出しまで進んでください。

用語 ‘hugo’が認識されない場合

これはhugo.exeは存在するものの、PATHが通っていない、もしくは今のフォルダにhugo.exeが無いという場合に起こります。
私の場合PATHに通すことで解決できました。 Windowsキーを押して検索窓にシステムの詳細設定の表示を入力して起動、そうするとシステムのプロパティが表示されるので、下の方にある環境変数と書かれたボタンを押してください。
そうすると、ユーザー環境変数とシステム環境変数が表示されると思います。
今回はユーザー環境変数を変えていくので、リストボックスにあるPathを選択。下の編集を押してください。
新規ボタンからHugo.exeがあるフォルダのフルパスを入力してOKを押してください。
私の場合は外部ストレージにHugoというフォルダを作成し、その下に置いたので下記のようになりました。

E:\Hugo\hugo_extended_0.154.2_windows-amd64

もう一度

  hugo version

をPowerShellで実行するとうまくバージョンが表示されるかと思います。

新しいサイトを作成

  hugo new site yourblogname

このコマンドでHugo用のフォルダ構成が作成されます。今後はこのフォルダを使って記事作成やデザインの変更などを行っていきます。
yourblognameの部分がブログ名になるので好きな名前で問題ありません。私の場合はhenologにしてあります。

Stackテーマを導入

今回はこのブログでも使っているStackというテーマを使っていきます。
PowerShellで以下のコマンドを入力して実行してください。

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

これで導入ができました

ローカルで表示確認

ローカルでサイトを開いてみましょう。

hugo server -D

のコマンドでローカルサーバを起動します。早速localhost:1313にアクセスしてみましょう！ まだ記事やサイドバーを作成していないので、左側のサイト名が表示されていれば問題ありません。
Stackテーマのデザインが表示されれば成功です！