JavaScriptを有効にしてください

Windows にHugo の実行環境をたて隊

 ·   3 分で読めます  ·   Kento

本 Blog を Hugo に移行しようと思っています
まずは Hugo を触るための環境をローカルに立ててみました
コンテナー イメージも公開されていますが、今回は新規で VM を立てて そこで試してみました

大まかな流れ

  1. VM の作成
  2. VM にScoop をインストール
  3. Hugo のインストール
  4. サイトの作成

VM の作成

細かい手順は割愛します。今回は Windows Server 2022 を Azure 上にデプロイしました

VM に Scoop をインストール

Hugo インストールを簡単にするためにパッケージマネージャーをインストールします
今回は Windows Server で実行するのでこちらの内容を参照して Scoop にしました
(Windows Client OS なら winget の方がいいと思います)
Windows | Hugo

Scoop のインストールは以下のコマンドを Powershell で実行

1
2
irm get.scoop.sh -outfile 'install.ps1'
.\install.ps1 -RunAsAdmin

ScoopInstaller/Install: 📥 Next-generation Scoop (un)installer
※今回は Windows Server 2022 に管理者アカウントで入っているので、管理者用のインストール手順を実行しました。

terminal01
scoop のインストール:

Hugo のインストール

Scoop をインストールしているので、

1
scoop install hugo-extended<

を実行するだけです。ついでに後の手順で必要な Git もインストールしておきます

1
scoop install git

サイトの作成

Hugo の準備は整ったので、デモサイトを作成してみます
とりあえず作業用フォルダを C ドライブ配下に作成しました

win01
作業フォルダの作成:

サイトの作成手順は公式を参照しました
Quick Start | Hugo
基本的には書いてある通りの手順を PowerShell で実行するだけです

1
2
3
4
5
6
hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> config.toml
hugo server

を実行するだけですが、1つだけ躓きポイントがありました
git から サイトのデザインのテンプレートを取得して、その情報を 構成ファイルに反映させていますが、自分の環境では構成ファイルの文字コードがあっておらず、実行できませんでした
構成ファイルの中身は UTF-8 で以下になっていれば問題ないので、適当にメモ帳などで編集して保存します

1
2
3
4
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'quickstart'
theme = 'ananke'
win02
構成ファイルの保存:

改めて hugo server を実行して
PowerShell の表示の通り、ブラウザで http://localhost:1313/ にアクセスしてみると無事に表示されました

hugo01
hugo の実行:

ページの追加をしてみる

トップページができたので、記事となる個々のページを作成してみます
hugo server を Ctrl + C で停止します

1
hugo new posts/my-first-post.md

を実行すると
content/posts 配下に my-first-post.md が作成されます

win03
ページの追加01:

中身を見るとシンプルにページタイトルと日付と下書きかどうか (draft : true) が記載されています

win04
ページの追加02:

以下の文章を追記して、保存します

1
2
3
## 導入
これは **太字** です。そしてこれは *強調表示* です。
[Hugo](https://gohugo.io) のウェブサイトにアクセスしてみよう!
win05
ページの追加03:

今度は、ドラフト記事を含んだページを確認するために PowerShell で以下のコマンドを実行し、ブラウザで http://localhost:1313/ にアクセスしてみます

1
hugo server --buildDrafts

トップページが更新され、ページが追記されました
クリックしてみると、編集通りの内容が表示されました

hugo02
ページの追加04:

hugo03
ページの追加05:

まとめ

Hugo をローカルで動かして、下書きの作成をしてみました
次回は Azure Static WebApps と連携してブログの実行環境を整えてみたいと思います

共有

Kento
著者
Kento
2020年に新卒で IT 企業に入社. インフラエンジニア(主にクラウド)として活動中