この記事でやること #
Hugoを使ってブログを作成し、Stackテーマを入れてローカルで表示するまでの手順をまとめます。
※本記事はWindows11環境での手順になります。Mac環境での手順は記載していませんのでご注意ください
環境 #
- Windows11
- PowerShell
- Hugo extended 0.154.2
- Git
Hugoのインストール #
Windows版Hugoをダウンロード #
まずはHugoを入れていきましょう。
このリンクのWindows版インストーラをダウンロードをしてください。
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テーマのデザインが表示されれば成功です！