Hugo完全ガイド！世界最速の静的サイトジェネレーターで爆速サイト構築

Web

「ブログを始めたいけど、WordPressは重くて管理が大変」 「静的サイトジェネレーターを使いたいけど、ビルドが遅い」 「マークダウンで記事を書いて、すぐにサイトを公開したい」

そんな悩み、Hugoなら全部解決できます！

Hugoは世界最速の静的サイトジェネレーター。1000ページのサイトでも1秒以内にビルド完了。しかも、インストールは簡単、テーマは豊富、デプロイも楽々。

この記事を読めば、今日からHugoでプロ級のWebサイトが作れるようになります！

スポンサーリンク

Hugoって何？他の静的サイトジェネレーターとの違い

静的サイトジェネレーターの王者

Hugoは、Go言語で作られた静的サイトジェネレーターです。

【静的サイトの特徴】

  • HTMLファイルを事前に生成
  • データベース不要
  • サーバーの負荷が極小
  • セキュリティリスクが低い
  • 表示速度が爆速

【他のツールとの比較】

ツール言語ビルド速度学習難易度エコシステム
HugoGo◎爆速中豊富
JekyllRuby△遅い易豊富
GatsbyJavaScript○普通難非常に豊富
Next.jsJavaScript○普通難非常に豊富
HexoJavaScript○普通中普通

ビルド速度でHugoの右に出るものはありません！

Hugoが選ばれる5つの理由

  1. 圧倒的な速度
    • 1ミリ秒/ページの処理速度
    • ライブリロード対応
  2. シングルバイナリ
    • 依存関係なし
    • インストールが超簡単
  3. 豊富なテーマ
    • 300以上の無料テーマ
    • カスタマイズも簡単
  4. 強力な機能
    • 多言語サイト対応
    • 画像最適化
    • Sass/SCSS対応
  5. 活発なコミュニティ
    • 日本語ドキュメント充実
    • 問題解決が早い

インストール方法：5分で環境構築完了

Windows

【方法1：Chocolateyを使用】

# Chocolateyがインストール済みの場合
choco install hugo-extended -y

【方法2：Scoopを使用】

# Scoopがインストール済みの場合
scoop install hugo-extended

【方法3：直接ダウンロード】

  1. Hugoのリリースページにアクセス
  2. hugo_extended_[version]_Windows-64bit.zipをダウンロード
  3. 解凍してPATHを通す

Mac

【Homebrewを使用（推奨）】

# Homebrewでインストール
brew install hugo

# バージョン確認
hugo version

Linux

【Ubuntu/Debian】

# Snapを使用
sudo snap install hugo --classic

# または apt（バージョンが古い場合あり）
sudo apt update
sudo apt install hugo

【その他のLinux】

# tarballからインストール
wget https://github.com/gohugoio/hugo/releases/download/v0.118.2/hugo_extended_0.118.2_linux-amd64.tar.gz
tar -xzf hugo_extended_0.118.2_linux-amd64.tar.gz
sudo mv hugo /usr/local/bin/

インストール確認

hugo version
# hugo v0.118.2-extended linux/amd64 BuildDate=...

「extended」と表示されればSCSS対応版です！

最初のサイトを作ろう：Hello Hugo!

新規サイトの作成

# サイトを作成
hugo new site my-awesome-blog

# ディレクトリに移動
cd my-awesome-blog

# 構造を確認
ls

【ディレクトリ構造】

my-awesome-blog/
├── archetypes/     # 記事のテンプレート
├── assets/         # 処理が必要なアセット
├── content/        # 記事やページのコンテンツ
├── data/          # データファイル
├── hugo.toml      # 設定ファイル
├── layouts/       # テンプレート
├── static/        # 静的ファイル
└── themes/        # テーマ

テーマのインストール

# Gitでテーマをクローン
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke

# 設定ファイルでテーマを指定
echo "theme = 'ananke'" >> hugo.toml

最初の記事を作成

# 記事を作成
hugo new posts/my-first-post.md

【生成されるファイル】

---
title: "My First Post"
date: 2024-01-15T10:00:00+09:00
draft: true
---

ここに記事の内容を書きます。

ローカルサーバーで確認

# 開発サーバーを起動（下書きも表示）
hugo server -D

# ブラウザで確認
# http://localhost:1313

変更は自動的に反映されます（ライブリロード）！

設定ファイル（hugo.toml）の詳細設定

基本設定

# サイトの基本情報
baseURL = "https://example.com/"
languageCode = "ja-jp"
title = "私の素晴らしいブログ"
theme = "ananke"

# 日本語設定
defaultContentLanguage = "ja"
hasCJKLanguage = true  # 日本語の文字数カウント

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

# メニュー設定
[[menu.main]]
  name = "ホーム"
  url = "/"
  weight = 1

[[menu.main]]
  name = "ブログ"
  url = "/posts/"
  weight = 2

[[menu.main]]
  name = "About"
  url = "/about/"
  weight = 3

# パラメータ（テーマ依存）
[params]
  author = "山田太郎"
  description = "技術とライフスタイルのブログ"
  googleAnalytics = "UA-XXXXXXXXX-X"
  disqusShortname = "yourdiscussshortname"

SEO最適化設定

# SEO設定
[params.seo]
  title = "サイトタイトル | キャッチフレーズ"
  description = "サイトの説明文"
  keywords = ["Hugo", "ブログ", "静的サイト"]
  ogimage = "/images/og-image.jpg"
  twitterhandle = "@yourhandle"

# サイトマップ
[sitemap]
  changefreq = "weekly"
  priority = 0.5

# RSS設定
[outputs]
  home = ["HTML", "RSS", "JSON"]
  section = ["HTML", "RSS"]

# タクソノミー（分類）
[taxonomies]
  tag = "tags"
  category = "categories"
  series = "series"

コンテンツ作成：マークダウンで記事を書く

フロントマターの活用

---
title: "Hugoで爆速ブログ構築"
date: 2024-01-15T10:00:00+09:00
lastmod: 2024-01-20T15:00:00+09:00
draft: false
weight: 10
slug: "hugo-speed-blog"

# SEO関連
description: "Hugoを使った高速ブログの作り方"
keywords: ["Hugo", "静的サイト", "ブログ"]
images: ["/images/hugo-blog.jpg"]

# カテゴリとタグ
categories: ["Web開発"]
tags: ["Hugo", "静的サイト", "チュートリアル"]
series: ["Hugo入門"]

# 目次
toc: true
tocOpen: true

# コメント
comments: true
---

## はじめに

記事の内容をマークダウンで書きます。

<!--more-->  # サマリーの区切り

## 本文

詳細な内容はここから...

ショートコードの活用

【組み込みショートコード】

# YouTube埋め込み
{{< youtube w7Ft2ymGmfc >}}

# Tweet埋め込み
{{< tweet user="GoHugoIO" id="877500564405444608" >}}

# Gist埋め込み
{{< gist spf13 7896402 >}}

# 画像with caption
{{< figure src="/images/sample.jpg" title="サンプル画像" >}}

# コードハイライト
{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=1" >}}
package main
import "fmt"
func main() {
    fmt.Println("Hello Hugo!")
}
{{< / highlight >}}

カスタムショートコード作成

【layouts/shortcodes/notice.html】

<div class="notice {{ .Get 0 }}">
  {{ .Inner | markdownify }}
</div>

【使い方】

{{< notice warning >}}
これは警告メッセージです。
{{< /notice >}}

テーマのカスタマイズ

人気テーマの紹介

【ブログ向け】

  • PaperMod：ミニマルで高速
  • Stack：モダンなカード型レイアウト
  • LoveIt：機能豊富な中華製テーマ

【ドキュメント向け】

  • Docsy：Google推奨
  • Learn：サイドバー付き
  • Book：GitBook風

【ポートフォリオ向け】

  • Hugo Profile：1ページ完結型
  • Academic：研究者向け

テーマのカスタマイズ方法

【方法1：設定ファイルでカスタマイズ】

[params]
  # テーマ固有の設定
  showBreadcrumbs = true
  showPostNavLinks = true
  showCodeCopyButtons = true
  dateFormat = "2006年1月2日"

【方法2：テンプレートの上書き】

layouts/
├── _default/
│   ├── baseof.html    # ベーステンプレート
│   ├── single.html    # 個別記事
│   └── list.html      # 一覧ページ
└── partials/
    ├── header.html    # ヘッダー
    └── footer.html    # フッター

【方法3：カスタムCSS/JS追加】

<!-- layouts/partials/head.html -->
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
<script src="{{ "js/custom.js" | absURL }}"></script>

ビルドとデプロイ

本番用ビルド

# 本番用ビルド
hugo

# minify付きビルド（圧縮）
hugo --minify

# ビルド先を指定
hugo -d dist

# 下書きも含めてビルド（開発用）
hugo -D

【publicフォルダの中身】

public/
├── index.html
├── posts/
│   └── my-first-post/
│       └── index.html
├── categories/
├── tags/
├── css/
├── js/
└── images/

GitHub Pagesへのデプロイ

【.github/workflows/gh-pages.yml】

name: GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

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

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

Netlifyへのデプロイ

【netlify.toml】

[build]
  publish = "public"
  command = "hugo --gc --minify"

[context.production.environment]

HUGO_VERSION = “0.118.2” HUGO_ENV = “production” [[headers]] for = “/*”

[headers.values]

Cache-Control = “public, max-age=31536000”

パフォーマンス最適化

画像の最適化

# hugo.tomlでの画像処理設定
[imaging]
  quality = 85
  resampleFilter = "lanczos"
  
[params.images]
  # レスポンシブ画像
  widths = [600, 900, 1300, 1600]

【テンプレートでの使用】

{{ $image := resources.Get "images/hero.jpg" }}
{{ $image := $image.Resize "800x webp q85" }}
<img src="{{ $image.RelPermalink }}" alt="Hero">

キャッシュとCDN

# ビルド時の最適化
[build]
  writeStats = true
  
[minify]
  disableHTML = false
  disableCSS = false
  disableJS = false
  disableJSON = false
  disableXML = false

よくあるトラブルと解決法

Q：テーマが反映されない

A：以下を確認

# サブモジュールの更新
git submodule update --init --recursive

# テーマ名の確認
cat hugo.toml | grep theme

Q：記事が表示されない

A：draftの確認

# draft: trueだと表示されない
draft: false

# または開発サーバーで-Dオプション
hugo server -D

Q：日本語が文字化けする

A：エンコーディング設定

defaultContentLanguage = "ja"
hasCJKLanguage = true
[languages.ja]
  languageName = "日本語"
  weight = 1

応用テクニック

多言語サイトの構築

defaultContentLanguage = "ja"
[languages]
  [languages.ja]
    weight = 1
    title = "私のブログ"
  [languages.en]
    weight = 2
    title = "My Blog"

【コンテンツ構造】

content/
├── posts/
│   ├── hello.md      # 日本語
│   └── hello.en.md   # 英語

データファイルの活用

【data/products.yaml】

- name: 商品A
  price: 1000
  description: 説明文

【テンプレートで使用】

{{ range .Site.Data.products }}
  <h3>{{ .name }}</h3>
  <p>価格: {{ .price }}円</p>
{{ end }}

まとめ：今日からHugoで爆速サイト構築！

Hugoを使えば、高速で安全なWebサイトが簡単に作れます。

今すぐやるべき5つのこと：

✅ Hugoをインストール

brew install hugo  # Mac
choco install hugo-extended  # Windows

✅ 最初のサイトを作成

hugo new site my-blog

✅ テーマを選んで適用

✅ 記事を書いてみる

hugo new posts/hello.md

✅ デプロイして公開

  • GitHub Pages、Netlify、Vercelなど

Hugoの魅力：

  • 圧倒的な処理速度
  • シンプルな構造
  • 豊富なテーマとプラグイン
  • 活発なコミュニティ
  • 完全無料

WordPressの重さから解放されて、コンテンツ作成に集中できる環境を手に入れましょう！

Happy Hugo Life! 🚀

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました