以前の記事 に書いた静的サイトジェネレーター「Hugo」を使って、このサイトの運営を始めていこうとと思います。
サイトの運営は、以下のような流れになります。
- ローカル環境に Hugo をインストールする（初期設定）。
- ローカル環境でマークダウンで記事を書く。
- ローカル環境でサイトをビルドする。
- ビルドしたサイトをサーバーへ転送する。
公式サイト
The world’s fastest framework for building websites
https://gohugo.io/
Quick start
https://gohugo.io/getting-started/quick-start/
Releases · gohugoio/hugo
https://github.com/gohugoio/hugo/releases
Hugo をインストールする
自分は Windows マシンの WSL 上で動く Ubuntu に Hugo をインストールします。
# OS バージョン確認
$ cat /etc/os-release
PRETTY_NAME="Ubuntu 24.04.1 LTS"
NAME="Ubuntu"
VERSION_ID="24.04"
VERSION="24.04.1 LTS (Noble Numbat)"
VERSION_CODENAME=noble
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=noble
LOGO=ubuntu-logo
# インストールされる Hugo のバージョンを確認
$ apt show hugo
Package: hugo
Version: 0.123.7-1ubuntu0.3
# バージョンが古い（最新版は0.155.2）のでリリース版を取得してインストール
$ wget https://github.com/gohugoio/hugo/releases/download/v0.155.2/hugo_extended_0.155.2_linux-amd64.deb
$ sudo dpkg -i hugo_extended_0.155.2_linux-amd64.deb
$ hugo version
hugo v0.155.2-d8c0dfccf72ab43db2b2bca1483a61c8660021d9+extended -
linux/amd64 BuildDate=2026-02-02T10:04:51Z VendorInfo=gohugoio
初期設定
テーマの選択
公式サイトで好みのテーマを選んでおきます。
Hugo Themes
https://themes.gohugo.io/
自分はこちらのテーマを使わせてもらいました。
Explore
https://themes.gohugo.io/themes/explore/
サイトの作成
$ hugo new site blog
$ cd blog
$ git init
# テーマをインストール
$ git submodule add https://github.com/yogirk/explore.git themes/explore
# テーマにサンプルの設定ファイルが付属していたので有効化
$ cp themes/explore/exampleSite/config.toml .
# 必要に応じて設定を編集
$ vi config.toml
コンテンツの追加
$ hugo new posts/my-first-post.md
# マークダウンで記事を書く
$ vi posts/my-first-post.md
+++
date = '2026-01-22T14:22:52-08:00'
draft = true
title = 'My First Post'
+++
## Introduction
This is **bold** text, and this is *emphasized* text.
Visit the [Hugo](https://gohugo.io) website!
# ローカルサーバーを起動
$ hugo server -D
ローカルサイトで確認
http://localhost:1313/
サイトのビルド
$ hugo
public/にコンテンツが出力される
public/ 以下をサーバーに転送すれば、静的サイトとして公開されます。