クイックスタート

本チュートリアルでは以下を行います。

サイトの生成
コンテントの追加
サイトの設定
サイトの公開

前提条件

チュートリアルをはじめる前には、以下の作業が必要です。

Hugo のインストール (拡張エディション、v0.112.0 またはそれ以降)
Git のインストール

またコマンドライン操作にも慣れておく必要があります。

サイトの生成

コマンド

以下を実行して Hugo のバージョンが v0.112.0 またはそれ以降であることを確認してください。

hugo version

以下のコマンドを実行して、Ananke テーマを用いた Hugo サイトの生成を行います。各コマンドの説明は次の節で示します。

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

端末画面に示されている URL にアクセスしてサイトを確認します。 Ctrl + C を押下すれば Hugo の開発用サーバーを停止させることができます。

各コマンドの説明

quickstart ディレクトリ配下に、プロジェクト用のディレクトリ構造を作り出します。

hugo new site quickstart

カレントディレクトリをプロジェクトのルートとします。

cd quickstart

カレントディレクトリにおいて、空の Git リポジトリを初期化します。

git init

Ananke テーマをクローンして themes ディレクトリに置きます。追加にあたっては、プロジェクトに対して Git サブモジュールとして追加します。

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

サイト設定ファイルに以下の 1 行を追加します。カレントなテーマを設定するものです。

echo "theme = 'ananke'" >> hugo.toml

Hugo の開発用サーバーを起動して、サイトの確認を行います。

hugo server

Ctrl + C を押下すれば Hugo の開発用サーバーを停止することができます。

コンテントの追加

サイトに対して新規のページを追加します。

hugo new content content/posts/my-first-post.md

Hugo は content/posts ディレクトリに新たなファイルを生成します。テキストエディターを使って、そのファイルを開いてみます。

+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++

なおフロントマターにおける draft の値は true としています。 Hugo ではサイトビルド時にドラフト (draft) コンテントは公開しないものとなっています。詳しくはドラフト、公開予定、期限切れのコンテントを参照してください。

ポスト (post; 投稿内容) の本文にマークダウンを適当に追加します。ただし draft の値はそのままとします。

+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++
## はじめに

これは **ボールド体** のテキストです。これは *強調体* のテキストです。

[Hugo](https://gohugo.io) のウェブサイトを参照してください！

ファイルを保存し、Hugo の開発用サーバーを起動してサイトを確認します。以下のいずれかのコマンドを実行すれば、ドラフトコンテントであっても表示されることになります。

hugo server --buildDrafts
hugo server -D

端末画面に示されている URL にアクセスしてサイトを確認します。コンテントの追加や変更を行う場合には、開発用サーバーを起動したままとします。

When satisfied with your new content, set the front matter draft parameter to false.

サイトの設定

テキストエディターを使って、プロジェクトルートにあるサイト設定ファイル (hugo.toml) を開きます。

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'

これを以下のように変更します。

本番サイト用の baseURL を設定します。設定する値は上で示しているように、プロトコルを必ず先頭につけ、最後にはスラッシュをつけます。
languageCode に利用する言語と地域を設定します。
本番サイト用の title を設定します。

Hugo の開発用サーバーを起動して変更箇所を確認します。ドラフトコンテントも表示する起動とすることを忘れないでください。

hugo server -D

サイトの公開

In this step you will publish your site, but you will not deploy it.

When you publish your site, Hugo creates the entire static site in the public directory in the root of your project. This includes the HTML files, and assets such as images, CSS files, and JavaScript files.

When you publish your site, you typically do not want to include draft, future, or expired content. The command is simple.

hugo

To learn how to deploy your site, see the hosting and deployment section.

Ask for help

Hugo’s forum is an active community of users and developers who answer questions, share knowledge, and provide examples. A quick search of over 20,000 topics will often answer your question. Please be sure to read about requesting help before asking your first question.

Other resources

For other resources to help you learn Hugo, including books and video tutorials, see the external learning resources page.