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へのデプロイ例
- GitHubにリポジトリをプッシュ
- Netlifyでアカウント作成
- 「New site from Git」を選択
- GitHubリポジトリを連携
- ビルドコマンド:
hugo - 公開ディレクトリ:
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/