Hugo

Hugo ↗は、Goで書かれた静的サイト生成ツールです。非常に高速で、さまざまなコンテンツ形式 ↗を使用してコンテンツを管理するための高レベルで柔軟なプリミティブを提供します。

このガイドでは、新しいHugoアプリケーションを作成し、Cloudflare Pagesを使用してデプロイします。hugo CLIを使用して新しいHugoサイトを作成します。

Before you continue

All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.

すでにGitプロバイダーでホストされているHugoサイトがある場合は、Cloudflare Pagesでデプロイに進んでください。

Hugoのインストール

オペレーティングシステムに応じた特定の手順を使用して、Hugo CLIをインストールします。

パッケージマネージャーHomebrew ↗を使用している場合は、ターミナルでbrew installコマンドを実行してHugoをインストールします：

brew install hugo

パッケージマネージャーChocolatey ↗を使用している場合は、ターミナルでchoco installコマンドを実行してHugoをインストールします：

choco install hugo --confirm

パッケージマネージャーScoop ↗を使用している場合は、ターミナルでscoop installコマンドを実行してHugoをインストールします：

scoop install hugo

LinuxディストリビューションのパッケージマネージャーにはHugoが含まれている場合があります。この場合、ディストリビューションのパッケージマネージャーを使用してHugoを直接インストールします。たとえば、Ubuntuでは次のコマンドを実行します：

sudo apt-get install hugo

パッケージマネージャーにHugoが含まれていない場合や、リリースを直接ダウンロードしたい場合は、手動インストールセクションを参照してください。

手動インストール

HugoのGitHubリポジトリには、さまざまなオペレーティングシステム用のHugoコマンドラインツールのプリビルドバージョンが含まれており、リリースページ ↗で見つけることができます。

これらのリリースのインストールに関する詳細な手順については、Hugoのドキュメント ↗を参照してください。

新しいプロジェクトを作成

Hugoがインストールされたら、Hugoのクイックスタート ↗を参照してプロジェクトを作成するか、ターミナルでhugo newコマンドを実行して新しいプロジェクトを作成します：

hugo new site my-hugo-site

Hugoサイトは、静的に構築されたHTMLサイトの外観と感触をカスタマイズするためにテーマを使用します。themes.gohugo.io ↗には多くのテーマが用意されています。今のところ、ターミナルで次のコマンドを実行してAnanakeテーマ ↗を使用します：

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

投稿を作成

Hugoサイトに初期コンテンツを提供するために、新しい投稿を作成します。ターミナルでhugo newコマンドを実行して新しい投稿を生成します：

hugo new content posts/hello-world.md

hello-world.mdの中に初期コンテンツを追加して投稿を作成します。投稿を公開する準備ができたら、投稿のフロントマター内のdraft行を削除します。draft: trueが設定された投稿は、Hugoのビルドプロセスによってスキップされます。

Create a GitHub repository

Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:

git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin main

Cloudflare Pagesでデプロイ

サイトをPagesにデプロイするには：

Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Gitに接続を選択します。
作成した新しいGitHubリポジトリを選択し、ビルドとデプロイの設定セクションで次の情報を提供します：

Configuration option	Value
Production branch	`main`
Build command	`hugo`
Build directory	`public`

Hugoでは、アプリケーションのbaseURLを設定できます。これにより、absURLヘルパーを利用して完全な正規URLを構築できます。Pagesでこれを行うには、hugoビルドコマンドに-bまたは--baseURLフラグをCF_PAGES_URL環境変数と共に提供する必要があります。

最終的なビルドコマンドは次のようになります：

hugo -b $CF_PAGES_URL

デプロイ設定が完了したら、保存してデプロイを選択します。Cloudflare Pagesがhugoとプロジェクトの依存関係をインストールし、サイトをビルドしてデプロイする様子が表示されるはずです。

サイトをデプロイした後、プロジェクトに対してユニークなサブドメインが*.pages.devで提供されます。Hugoサイトに新しいコードをコミットするたびに、Cloudflare Pagesは自動的にプロジェクトを再ビルドしてデプロイします。また、新しいプルリクエストでプレビューのデプロイにアクセスできるため、変更が本番環境にデプロイされる前にサイトにどのように表示されるかをプレビューできます。

特定のHugoバージョンまたは新しいバージョンを使用する

特定のHugoバージョン ↗または新しいバージョンを使用するには、Pagesプロジェクトの設定 > 環境変数でHUGO_VERSION環境変数を作成します。指定したいHugoバージョン（v0.112.0以降が推奨されます）を値として設定します。

たとえば、HUGO_VERSION: 0.115.4。

Learn more

By completing this guide, you have successfully deployed your Hugo site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings