本 Blog を Hugo に移行しようと思っています
まずは Hugo を触るための環境をローカルに立ててみました
コンテナー イメージも公開されていますが、今回は新規で VM を立てて そこで試してみました
大まかな流れ
- VM の作成
- VM にScoop をインストール
- Hugo のインストール
- サイトの作成
VM の作成
細かい手順は割愛します。今回は Windows Server 2022 を Azure 上にデプロイしました
VM に Scoop をインストール
Hugo インストールを簡単にするためにパッケージマネージャーをインストールします
今回は Windows Server で実行するのでこちらの内容を参照して Scoop にしました
(Windows Client OS なら winget の方がいいと思います)
Windows | Hugo
Scoop のインストールは以下のコマンドを Powershell で実行
|
|
ScoopInstaller/Install: 📥 Next-generation Scoop (un)installer
※今回は Windows Server 2022 に管理者アカウントで入っているので、管理者用のインストール手順を実行しました。
Hugo のインストール
Scoop をインストールしているので、
|
|
を実行するだけです。ついでに後の手順で必要な Git もインストールしておきます
|
|
サイトの作成
Hugo の準備は整ったので、デモサイトを作成してみます
とりあえず作業用フォルダを C ドライブ配下に作成しました
サイトの作成手順は公式を参照しました
Quick Start | Hugo
基本的には書いてある通りの手順を PowerShell で実行するだけです
|
|
を実行するだけですが、1つだけ躓きポイントがありました
git から サイトのデザインのテンプレートを取得して、その情報を 構成ファイルに反映させていますが、自分の環境では構成ファイルの文字コードがあっておらず、実行できませんでした
構成ファイルの中身は UTF-8 で以下になっていれば問題ないので、適当にメモ帳などで編集して保存します
|
|
改めて hugo server を実行して
PowerShell の表示の通り、ブラウザで http://localhost:1313/ にアクセスしてみると無事に表示されました
ページの追加をしてみる
トップページができたので、記事となる個々のページを作成してみます
hugo server を Ctrl + C で停止します
|
|
を実行すると
content/posts 配下に my-first-post.md が作成されます
中身を見るとシンプルにページタイトルと日付と下書きかどうか (draft : true) が記載されています
以下の文章を追記して、保存します
|
|
今度は、ドラフト記事を含んだページを確認するために PowerShell で以下のコマンドを実行し、ブラウザで http://localhost:1313/ にアクセスしてみます
|
|
トップページが更新され、ページが追記されました
クリックしてみると、編集通りの内容が表示されました
まとめ
Hugo をローカルで動かして、下書きの作成をしてみました
次回は Azure Static WebApps と連携してブログの実行環境を整えてみたいと思います