Skip to main content
View on GitHub

クイックスタート

Hugo サイトを数分で作成する方法を紹介します。

On this page

このチュートリアルでは、以下のことを行います。

  1. サイトを作成する
  2. コンテンツを追加する
  3. サイトを設定する
  4. サイトを公開する

前提条件

このチュートリアルを開始する前に、以下のことを行う必要があります。

  1. Hugo のインストール (拡張版、v0.112.0 以降)
  2. Git のインストール 

また、コマンドラインからの操作に慣れている必要があります。

サイトを作成する

コマンド

または WSL や Git Bash などの Linux ターミナルからこれらのコマンドを実行してください

。

これらのコマンドを実行して、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

以下のコマンドにより、サイト設定ファイルに現在のテーマを示す行を追加します。

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

Hugo の開発サーバーを起動し、サイトを表示します。

hugo server

Ctrl + C を押して、Hugo の開発サーバを停止します。

コンテンツを追加する

サイトに新しいページを追加します。

hugo new posts/my-first-post.md

Hugo は content/posts ディレクトリにファイルを作成しました。 このファイルをエディターで開きます。

---
title: "My First Post"
date: 2022-11-20T09:03:20-08:00
draft: true
---

フロントマター の draft 値が true であることに注目してください。デフォルトでは、Hugo はサイトをビルドする際に下書きのコンテンツを公開しません。詳細については、下書き、公開予定、および期限切れのコンテンツ を参照してください。

投稿の本文にいくつかの markdown  を追加しますが、draft の値は変更しないでください。

---
title: "My First Post"
date: 2022-11-20T09:03:20-08:00
draft: true
---
## Introduction

This is **bold** text, and this is *emphasized* text.

Visit the [Hugo](https://gohugo.io) website!

ファイルを保存し、Hugo の開発サーバを起動してサイトを表示します。以下のコマンドのいずれかを実行することで、下書きのコンテンツを取り込むことができます。

hugo server --buildDrafts
hugo server -D

端末に表示された URL でサイトを表示します。開発用サーバーを起動したまま、コンテンツの追加や変更を続けてください。

Hugo のレンダリング エンジンは、Markdown の CommonMark 仕様  に準拠しています。 CommonMark 組織は、リファレンス実装を利用した便利な ライブ テストツール  を提供しています。

サイトを設定する

プロジェクトのルートにある サイト設定 ファイル (hugo.toml) をエディターで開いてください。

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

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

  1. 本番用サイトの baseURL を設定します。この値は、上図のように、プロトコルで始まり、スラッシュで終わる必要があります。

  2. languageCode に、言語と地域を設定します。

  3. 本番用サイトの title を設定します。

Hugo の開発サーバーを起動して変更を確認します。下書きのコンテンツを含めることを忘れないでください。

hugo server -D

ほとんどのテーマの作者は、設定のガイドラインとオプションを提供しています。詳細については、テーマのリポジトリまたはドキュメントサイトを参照してください。

Ananke テーマの作者である The New Dynamic  は、設定や使用方法についての ドキュメント  を提供しています。また、デモサイト  も提供されています。

サイトを公開する

このステップでは、サイトを 公開 しますが、デプロイ はしません。

サイトを 公開する と、Hugo は静的なサイト全体をプロジェクトのルートにある public ディレクトリに作成します。これには、HTML ファイル、画像、CSS ファイル、JavaScript ファイルなどのアセットが含まれます。

サイトを公開するとき、通常、下書き、公開予定、または期限切れのコンテンツ を 含めないように したいものです。そうするコマンドは、以下のように簡単です。

hugo

サイトの デプロイ 方法については、ホスティングとデプロイ のセクションを参照してください。

助けを求める

Hugo の フォーラム  は、質問に答え、知識を共有し、例を提供するユーザーと開発者の活発なコミュニティです。20,000 を超えるトピックを素早く検索すれば、あなたの質問に答えられることが多いでしょう。最初の質問をする前に、必ず ヘルプのリクエスト  について読んでおいてください。

その他のリソース

書籍やビデオチュートリアルなど、Hugo の学習に役立つその他のリソースについては、外部の学習リソース のページを参照してください。