はじめに
無料の静的ファイルのホスティングサービスに気軽に投稿できるブログ的なものを作りたくGemini先生に訊いてみるとHugoなるものを教えていただいたので、とりあえず環境を作ってみようとした手順のメモです。
環境
- Windows11 Home (24H2) ※不具合が発生しないかヒヤヒヤしています…。
- WSL2 (Ubuntu)
- VSCode
手順メモ
devcontainer.jsonの作成
とりあえず設定ファイルを作成します。
任意のディレクトリでVSCodeの左下のリモート？のボタンから 開発コンテナー構成ファイルを追加を選択します。
テンプレートとしてUbuntu(jammy)を利用します。
次に追加機能を聞かれるのでHugoを選択します。
次にオプションの構成でextendedを選択しておきます。
作成された設定内容は以下となりました。
devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/ubuntu
{
"name": "Ubuntu",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/base:jammy",
"features": {
"ghcr.io/devcontainers/features/hugo:1": {
"extended": true,
"version": "latest"
}
}
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "uname -a",
// Configure tool-specific properties.
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}
extended=trueにしてしておかないと拡張版Hugoがインストールされずテーマを利用した際にエラーが発生します。
これをもう少し編集します。
devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/ubuntu
{
"name": "Ubuntu",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/base:jammy",
"features": {
"ghcr.io/devcontainers/features/hugo:1": {
"extended": true,
"version": "latest"
}
},
+ "workspaceFolder": "/workspace",
+ "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached",
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "uname -a",
// Configure tool-specific properties.
- // "customizations": {},
+ "customizations": {
+ "vscode": {
+ "extensions": [
+ "yzhang.markdown-all-in-one"
+ ]
+ }
+ },
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
- "remoteUser": "root"
+ "remoteUser": "vscode"
}
コンテナ作成＆接続
作成した設定でコンテナを作成します。
VSCodeの左下のリモート？のボタンから コンテナーを再度開くを選択します。
しばらくするとコンテナが立ち上がり接続された状態になります。
ターミナルでHugoのバージョンを確認してみます。
vscode ➜ /workspace $ hugo version
hugo v0.143.1-0270364a347b2ece97e0321782b21904db515ecc+extended linux/amd64 BuildDate=2025-02-04T08:57:38Z VendorInfo=gohugoio
おそらく大丈夫です。
Hugoのプロジェクト作成～サーバー立ち上げ
とりあえず公式ドキュメントを参考にしつつ進めます。
プロジェクト作成
# プロジェクト作成
vscode ➜ /workspace $ hugo new site blog
Congratulations! Your new Hugo site was created in /workspace/blog.
Just a few more steps...
1. Change the current directory to /workspace/blog.
2. Create or install a theme:
- Create a new theme with the command "hugo new theme <THEMENAME>"
- Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".
See documentation at https://gohugo.io/.
# ディレクトリを移動してGit初期化
vscode ➜ /workspace $ cd blog
vscode ➜ /workspace/blog $ git init
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint: git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint: git branch -m <name>
Initialized empty Git repository in /workspace/blog/.git/
# ご丁寧に教えてくれたのでとりあえずブランチ名を main に変更
vscode ➜ /workspace/blog (master) $ git branch -m main
# テーマを追加
vscode ➜ /workspace/blog (main) $ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
Cloning into '/workspace/blog/themes/ananke'...
remote: Enumerating objects: 3895, done.
remote: Counting objects: 100% (424/424), done.
remote: Compressing objects: 100% (187/187), done.
remote: Total 3895 (delta 342), reused 261 (delta 235), pack-reused 3471 (from 3)
Receiving objects: 100% (3895/3895), 6.00 MiB | 14.04 MiB/s, done.
Resolving deltas: 100% (1810/1810), done.
# 追加したテーマを利用するように設定追加
vscode ➜ /workspace/blog (main) $ echo "theme = 'ananke'" >> hugo.toml
サーバー立ち上げ
vscode ➜ /workspace/blog (main) $ hugo server
特にエラーメッセージなどが表示されていなければ http://localhost:1313/ に接続して画面が表示されればOKです。
サーバーを停止したい時はCtrl + cです。
記事作成
とりあえず記事を作成してみます。
vscode ➜ /workspace/blog (main) $ hugo new content content/posts/my-first-post.md
Content "/workspace/blog/content/posts/my-first-post.md" created
以下のファイルが作成されます。
+++
date = '2025-02-09T13:35:08Z'
draft = true
title = 'My First Post'
+++
draft = trueの場合、下書きと判断され先ほどのhugo serverでは表示対象となりません。
オプションをつけてサーバーを起動することで表示されます。
vscode ➜ /workspace/blog (main) $ hugo server -D
おわりに
とりあえずローカルのdevcontainer環境で記事を作成してサーバーを立ち上げて表示を確認できました。
公式ドキュメントの手順で設定したテーマは個人的にイマイチ好きになれないので、次はテーマを選んでカスタマイズとかもしてみたいと思います。