Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Hugo

最終更新 Markdown で表示Agent セットアップ

Hugo ↗ は、Go で書かれた静的サイト生成ツールです。非常に高速で、さまざまな コンテンツ形式 ↗ でコンテンツを管理するための、柔軟な高レベルな仕組みがあります。

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

続ける前に

すべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。

SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。

詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。

すでに Git プロバイダー でホストしている Hugo サイトがある場合は、Cloudflare Pages でデプロイする へ進みます。

Hugo をインストールする

お使いの OS 向けの手順で、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 が含まれていることがあります。その場合は、ディストリビューションのパッケージマネージャーで直接インストールします。たとえば Ubuntu では、次のコマンドを実行します。

sudo apt-get install hugo

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

手動インストール

Hugo の GitHub リポジトリには、各 OS 向けのビルド済み Hugo コマンドラインツールがあります。Releases ページ ↗ で入手できます。

これらのリリースのインストール手順は、Hugo のドキュメント ↗ を参照してください。

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

Hugo をインストールしたら、Hugo の Quick Start ↗ に従ってプロジェクトを作成するか、ターミナルで hugo new コマンドを実行して新しいプロジェクトを作成します。

hugo new site my-hugo-site

Hugo サイトは、静的にビルドされた HTML の見た目をテーマでカスタマイズします。themes.gohugo.io ↗ に多数のテーマがあります。ここでは Ananke テーマ ↗ を使い、ターミナルで次のコマンドを実行します。

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 のビルド処理でスキップされます。

GitHub リポジトリを作成する

repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub へプッシュします。

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

Cloudflare Pages でデプロイする

サイトを Pages にデプロイするには、次の手順を実行します。

  1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application を選びます。

  3. Pages タブを選びます。

  4. Import an existing Git repository を選びます。

  5. 作成した新しい GitHub リポジトリを選び、Begin setup を選びます。

  6. Set up builds and deployments セクションで、次の情報を入力します。

設定項目値
本番ブランチmain
ビルドコマンドhugo
ビルドディレクトリpublic

Hugo サイトのデフォルトのビルドディレクトリは public ですが、この設定は publishDir 設定 ↗ で変更できます。

デプロイ設定が終わったら、Save and Deploy を選びます。Cloudflare Pages が hugo とプロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイします。

サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。 Hugo サイトに新しいコードをコミットするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も使えるので、本番へデプロイする前に変更後のサイトを確認できます。

特定のバージョン、または新しいバージョンの Hugo を使う

特定のバージョン、または新しいバージョンの Hugo ↗ を使うには、Pages プロジェクトの Settings > Environment variables で HUGO_VERSION 環境変数を作成します。値には指定したい Hugo のバージョンを入れます（推奨される最低バージョンは Prerequisites ↗ を参照してください）。

例: HUGO_VERSION: 0.128.0。

さらに学ぶ

このガイドを完了すると、Hugo サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。

役に立ちましたか？