tech・2分で読める

Hugoで静的サイトを作成 - セットアップから公開まで

静的サイトジェネレーターHugoを使ったブログ構築の完全ガイド。セットアップから投稿作成、ローカルサーバーの起動方法まで解説します。

#hugo#ブログ#静的サイト#markdown#サイトジェネレーター

Hugoで静的サイトを作成 - セットアップから公開まで

Hugoロゴ

人生の記録を残すために、静的サイトジェネレーター Hugo を使ってブログを構築しました。セットアップから投稿作成、ローカルサーバーの起動方法まで一通りまとめます。

対象読者:

  • なるべく軽いブログが作りたい人
  • Markdown で完結したい人

1. はじめに

ブログの目的は「一生モノの記録」を静的に、確実に残すことです。

当初は Astro も候補にありましたが、最終的に Hugo を選びました。理由は以下の通りです：

  • 高速でビルドが完了する
  • 構成がシンプルで扱いやすい
  • 静的生成による安心感と堅牢性
  • 10 年以上の実績と継続開発による信頼性

Astro との比較

比較軸HugoAstro
開発元Go × Google 系JavaScript 系（個人〜中小）
パフォーマンス✅ 爆速ビルド✅ 高速（SPA 対応）
拡張性◯ 必要最低限で十分◎ 柔軟（React/Vue など対応）
メンテ継続性✅ 安定（10 年以上の実績）△ 成長中・方向性が変わる可能性あり
自分の用途✅ 記録重視・変化不要❌ 技術選定や依存管理が煩雑

結論として、「未来に残す記録サイト」には Hugo の堅実さと安定性がぴったりでした。

2. 前提・準備

■ 開発環境

  • macOS (ARM)

■ 必要なツール

brew install hugo

3. Hugo でブログを作る手順

■ 初期化

hugo new site src
cd src

■ テーマ追加 (例: PaperMod)

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

■ config 設定 (YAML 版)

個人的に toml より yaml の方がメンテしやすいので、変更しています。 ファイルの拡張子と中身を変えるだけで自動で反映されました。

baseURL: "http://localhost:1313/"
title: "My Blog"
theme: "PaperMod"

4. 投稿作成と確認

hugo new content/posts/hello.md

手動で content 配下に .md ファイルを作成しても OK です：

---
title: "Hello World"
date: 2025-05-18
draft: false
tags: ["Hugo", "ブログ", "IT"]
categories: ["エンジニア"]
---

初めての投稿です。

--- で囲まれた「Front Matter」が必須です。

ローカルサーバー起動:

hugo server

アクセス:
http://localhost:1313

上記で表示できない場合は、ポートを開放してみてください。

lsof -ti :1313 | xargs kill -9

5. 画像の追加方法

Hugo で画像を追加するには、以下の手順で行います：

  1. 画像ファイルを static/images/ ディレクトリに配置
  2. 記事内で以下のいずれかの方法で画像を参照

Markdown での画像表示

![代替テキスト](/images/画像ファイル名.jpg)

HTML タグでの画像表示（サイズ指定可能）

<img src="/images/画像ファイル名.jpg" alt="代替テキスト" width="500">

画像の配置例

Hugoロゴ

7. まとめ

  • Hugo は爆速で構成もシンプル、何年後もメンテしやすい
  • ブログを残すことは未来の自分や他人への贈り物
  • ソースは GitHub で非公開にしています（個人情報を含む投稿もあるため）

RK

1997年生まれ

ITエンジニア

インフラ・SRE