Hugoで静的サイトを構築する完全ガイド｜導入から公開まで

# Homebrew
brew install hugo

# Extended版（Sass/SCSS対応が必要な場合）
brew install hugo
# ※ HomebrewのHugoはデフォルトでExtended版がインストールされます

# winget
winget install Hugo.Hugo.Extended

# Chocolatey
choco install hugo-extended

# Scoop
scoop install hugo-extended

# Snap
sudo snap install hugo

# APTリポジトリから
sudo apt install hugo

hugo version
# 出力例: hugo v0.155.2-... extended ...

hugo new site my-blog
cd my-blog

my-blog/
├── archetypes/     # 記事テンプレート（front matter の雛形）
│   └── default.md
├── assets/         # Hugo Pipes で処理する CSS/JS/画像
├── content/        # Markdown 記事ファイル
├── data/           # JSON/TOML/YAML のデータファイル
├── i18n/           # 多言語対応の翻訳ファイル
├── layouts/        # テンプレート（テーマ上書き用）
├── static/         # そのまま出力される静的ファイル
├── themes/         # テーマディレクトリ
└── hugo.toml       # 設定ファイル

# Git を初期化
git init

# PaperMod テーマを submodule として追加
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

# hugo.toml
baseURL = 'https://example.com/'
languageCode = 'ja'
title = 'My Hugo Blog'
theme = 'PaperMod'

hugo new content posts/first-post.md

---
title: "はじめての記事"
date: 2026-02-08T10:53:51+09:00
draft: false
tags: ["Hugo", "入門"]
---

Hugoで最初の記事を書きました。Markdownで自由に記述できます。

## 見出しの例

- リスト項目1
- リスト項目2

コードブロックも使えます。

```go
package main

import "fmt"

func main() {
    fmt.Println("Hello, Hugo!")
}

### 開発サーバーの起動

```bash
hugo server -D

hugo

baseURL = 'https://example.com/'
languageCode = 'ja'
title = 'サイトタイトル'
theme = 'PaperMod'

# パーマリンク設定
[permalinks]
  posts = '/:year/:month/:slug/'

# メニュー
[[menus.main]]
  name = 'Home'
  pageRef = '/'
  weight = 10

[[menus.main]]
  name = 'Archives'
  pageRef = '/archives/'
  weight = 20

[[menus.main]]
  name = 'Tags'
  pageRef = '/tags/'
  weight = 30

# テーマ固有のパラメータ
[params]
  author = 'Your Name'
  description = 'サイトの説明文'
  ShowReadingTime = true
  ShowShareButtons = true
  ShowPostNavLinks = true
  ShowBreadCrumbs = true
  ShowCodeCopyButtons = true

baseURL: https://example.com/
languageCode: ja
title: サイトタイトル
theme: PaperMod

permalinks:
  posts: /:year/:month/:slug/

params:
  author: Your Name
  description: サイトの説明文

[sitemap]
  changeFreq = 'weekly'
  filename = 'sitemap.xml'
  priority = 0.5

{{ template "_internal/opengraph.html" . }}
{{ template "_internal/twitter_cards.html" . }}

enableRobotsTXT = true

{{ $style := resources.Get "css/main.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">

# モジュールの初期化
hugo mod init github.com/yourname/my-blog

# テーマをモジュールとしてインポート（hugo.toml に記述）

[module]
  [[module.imports]]
    path = 'github.com/adityatelange/hugo-PaperMod'

# モジュールの更新
hugo mod get -u

# 全モジュールを vendor ディレクトリに保存
hugo mod vendor

# .github/workflows/hugo-deploy.yaml
name: Deploy Hugo Site

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify --baseURL "${{ steps.pages.outputs.base_url }}/"

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v4
        with:
          path: ./public

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

<!-- YouTube 動画の埋め込み -->
{{< youtube dQw4w9WgXcQ >}}

<!-- GitHub Gist の埋め込み -->
{{< gist user 12345 >}}

<!-- Twitter（X）の埋め込み -->
{{< tweet user="GoHugoIO" id="1234567890" >}}

<!-- 画像のレスポンシブ対応 -->
{{< figure src="/images/hugo-logo.png" alt="Hugo Logo" caption="Hugoのロゴ" >}}

<!-- layouts/shortcodes/alert.html -->
<div class="alert alert-{{ .Get "type" | default "info" }}">
  {{ .Inner | markdownify }}
</div>

{{< alert type="warning" >}}
この操作は元に戻せません。実行前にバックアップを取得してください。
{{< /alert >}}