Hugoサイトの作成方法

Hugoサイトの作成方法

はじめに

Hugoは、Goで書かれた高速な静的サイトジェネレーターです。シンプルでありながら柔軟性が高く、ブログやポートフォリオ、ドキュメントサイトなど様々なウェブサイトを作成できます。

1. Hugoのインストール

Windowsの場合

# Chocolateyを使用する場合
choco install hugo -confirm

# または、Scoopを使用する場合
scoop install hugo

macOSの場合

brew install hugo

Linuxの場合

# Snapを使用する場合
sudo snap install hugo

# または、aptを使用する場合(Ubuntu/Debian)
sudo apt install hugo

2. 新しいサイトの作成

# 新しいHugoサイトを作成
hugo new site my-website
cd my-website

3. テーマの追加

# テーマをサブモジュールとして追加する例(Anaという人気テーマ)
git init
git submodule add https://github.com/dzello/ananke.git themes/ananke

# config.tomlにテーマを設定
echo 'theme = "ananke"' >> config.toml

4. コンテンツの作成

# 最初の投稿を作成
hugo new posts/my-first-post.md

新しく作成されたcontent/posts/my-first-post.mdファイルを編集します:

---
title: "私の最初の投稿"
date: 2023-05-01T10:00:00+09:00
draft: false
---

## こんにちは、Hugo!

これは私の最初のHugo投稿です。

5. サイトの設定

config.tomlファイルを編集して、サイトの基本設定を行います:

baseURL = "https://example.org/"
languageCode = "ja-jp"
title = "私のHugoサイト"
theme = "ananke"

[params]
  description = "Hugoで作成した素晴らしいウェブサイト"
  featured_image = "/images/header.jpg"

6. ローカルサーバーでプレビュー

hugo server -D

http://localhost:1313 にアクセスして、サイトをプレビューできます。

7. サイトのビルド

hugo

このコマンドでpublicディレクトリにサイトがビルドされます。

8. デプロイ

ビルドされたpublicディレクトリの内容を、お好みのホスティングサービス(GitHub Pages、Netlify、Vercel など)にデプロイできます。

Netlifyへのデプロイ例

  1. GitHubにリポジトリをプッシュ
  2. Netlifyでアカウント作成
  3. 「New site from Git」を選択
  4. GitHubリポジトリを連携
  5. ビルドコマンド: hugo
  6. 公開ディレクトリ: public

9. サイトのカスタマイズ

  • レイアウト: layouts/ディレクトリ内でテンプレートをカスタマイズ
  • スタイル: static/css/にCSSファイルを追加
  • 画像: static/images/に画像ファイルを配置

10. 便利なHugoコマンド

# 新しいコンテンツの作成
hugo new content/about.md

# 下書きモードでサーバー起動
hugo server -D

# 本番用にビルド
hugo --minify

Hugoの公式ドキュメントを参照すると、より詳細な情報が得られます: https://gohugo.io/documentation/