Hugoを使用してブログを構築し、Cloudflare Pagesにデプロイする

2 分
285 文字
カテゴリー:
技術チュートリアル
タグ:
#Hugo #Cloudflare #ブログ #静的サイト #デプロイ

Hugoを使用してブログを構築し、Cloudflare Pagesにデプロイする

この記事では、Hugoを使用して個人ブログを構築し、Cloudflare Pagesにデプロイするプロセスをステップバイステップで説明します。Hugoは高速で柔軟な静的サイトジェネレーターであり、Cloudflare Pagesは静的サイトのホスティングサービスを無料で提供します。グローバルCDNの加速により、あなたのブログは迅速に公開され、優れたアクセス体験を提供します。技術初心者でも一定の経験を持つ開発者でも、このチュートリアルは自分だけのブログを素早く立ち上げる手助けをします。

なぜHugoとCloudflare Pagesを選ぶのか？

準備作業

始める前に、以下のツールとアカウントを準備する必要があります：

  1. Hugo：最新のHugoをインストールします（より多くの機能をサポートする拡張版の使用を推奨します）。
  2. Git：バージョン管理とコードをGitHubにプッシュするため。
  3. GitHubアカウント：ブログのソースコードを保存するため。
  4. Cloudflareアカウント：ブログをデプロイし、ホスティングするため。
  5. テキストエディタ：VSCodeなど、Markdownファイルや設定ファイルの編集に使用します。

ステップ1：Hugoのインストール

Windows

  1. Chocolateyパッケージマネージャーをインストールします（未インストールの場合）：
    POWERSHELL 
    Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
    クリックして展開し、詳細を表示
  2. Chocolateyを使用してHugoの拡張版をインストールします：
    POWERSHELL 
    choco install hugo-extended
    クリックして展開し、詳細を表示
  3. インストールを確認します：
    POWERSHELL 
    hugo version
    クリックして展開し、詳細を表示

macOS

  1. Homebrewを使用してインストールします：
    BASH 
    brew install hugo
    クリックして展開し、詳細を表示
  2. インストールを確認します：
    BASH 
    hugo version
    クリックして展開し、詳細を表示

その他のインストール方法については、Hugo公式ドキュメントを参照してください。

ステップ2：Hugoサイトの作成

  1. ターミナルで新しいサイトを作成します：

    BASH 
    hugo new site my-blog
cd my-blog
    クリックして展開し、詳細を表示

    これにより、my-blogフォルダー内にHugoサイトのディレクトリ構造が生成されます：

    PLAINTEXT 
    ├── archetypes
├── content
├── data
├── layouts
├── public
├── static
├── themes
└── hugo.toml
    クリックして展開し、詳細を表示

  2. Gitリポジトリを初期化します：

    BASH 
    git init
    クリックして展開し、詳細を表示

  3. 生成されたファイルを無視するために.gitignoreファイルを追加します：

    BASH 
    echo "public/" >> .gitignore
echo "resources/" >> .gitignore
    クリックして展開し、詳細を表示

ステップ3：テーマのインストールと設定

  1. Hugoテーマを選択します。例えばhugo-theme-stack：

    BASH 
    git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack
    クリックして展開し、詳細を表示

  2. テーマのサンプル設定ファイルをプロジェクトのルートディレクトリにコピーします：

    BASH 
    cp themes/hugo-theme-stack/exampleSite/config.yaml .
    クリックして展開し、詳細を表示

  3. config.yaml（またはhugo.toml）を編集し、基本情報を設定します：

    YAML 
    baseURL: "https://your-domain.com/"  # あなたのドメインに置き換えてください
languageCode: "ja"
title: "私のブログ"
theme: "hugo-theme-stack"
DefaultContentLanguage: "ja"
hasCJKLanguage: true
paginate: 5
    クリックして展開し、詳細を表示

テーマの公式ドキュメントを参照して、より多くの設定を確認できます。

ステップ4：最初のブログ記事を作成する

  1. 新しい記事を作成します：

    BASH 
    hugo new posts/my-first-post.md
    クリックして展開し、詳細を表示

    これにより、content/posts/ディレクトリにmy-first-post.mdファイルが生成されます。

  2. 記事の内容を編集し、Front Matter（記事のメタデータ）を変更します：

    MARKDOWN 
    ---
title: "私の最初のブログ"
date: 2025-06-16T20:29:00+08:00
draft: false
---
Hugoブログを体験してみてください！これは私の最初の記事です。
    クリックして展開し、詳細を表示

  3. Hugoのローカルサーバーを起動してプレビューします：

    BASH 
    hugo server -D
    クリックして展開し、詳細を表示

    ブラウザを開いてhttp://localhost:1313/にアクセスすると、ブログのローカルプレビューを見ることができます。

ステップ5：コードをGitHubにプッシュする

  1. GitHubで新しいリポジトリ（例えばmy-blog）を作成します。公開またはプライベートを選択できます。
  2. ローカルコードをGitHubにプッシュします：
    BASH 
    git add .
git commit -m "初回コミット"
git remote add origin https://github.com/your-username/my-blog.git
git branch -M main
git push -u origin main
    クリックして展開し、詳細を表示

ステップ6：Cloudflare Pagesにデプロイする

  1. Cloudflare Dashboardにログインし、「Workers & Pages」>「Pages」>「プロジェクトを作成」を選択します。
  2. GitHubアカウントを接続し、先ほど作成したmy-blogリポジトリを選択します。
  3. ビルド設定を構成します：
    • プロジェクト名：任意の名前（例：my-blog）、my-blog.pages.devというサブドメインが割り当てられます。
    • プロダクションブランチ：デフォルトのmainです。
    • ビルドコマンド：hugo --gc --minify（出力ファイルを最適化します）。
    • 出力ディレクトリ：public。
    • 環境変数：Hugoのバージョンを指定するためにHUGO_VERSION（例：0.125.4）を追加します。最新バージョンの使用を推奨します。詳細はHugo Releasesを確認してください。
  4. 「保存してデプロイ」をクリックすると、Cloudflare Pagesはコードを自動的に引っ張り、ビルドしてデプロイします。デプロイが完了した後、my-blog.pages.devでブログにアクセスできます。

ステップ7：カスタムドメインのバインディング

  1. ドメインがCloudflareにホスティングされていることを確認します（Cloudflareで購入するか、他のレジストラから移行できます）。
  2. Cloudflare Pagesプロジェクトの中で、「カスタムドメイン」>「カスタムドメインの設定」をクリックします。
  3. あなたのドメイン（例：your-domain.com）を入力し、CloudflareがCNAMEレコードを自動的に追加します。
  4. DNS解決が有効になるのを待ちます（通常数分から数時間）と、カスタムドメインでブログにアクセスできるようになります。

ステップ8：自動デプロイ

ブログの内容を更新するたびに（新しい記事を追加したり、設定を変更したりする場合）、次のコマンドを実行してコードをプッシュします：

BASH 
git add .
git commit -m "ブログコンテンツを更新"
git push origin main
クリックして展開し、詳細を表示

Cloudflare PagesはGitHubリポジトリの更新を自動的に検出し、再ビルドしてデプロイします。通常1〜2分以内に完了します。

発生した問題と解決方法

  1. Hugoのバージョン不一致：Cloudflare Pagesはデフォルトで古いHugoバージョンを使用することがあり、ビルドに失敗する場合があります。解決策として、環境変数に最新バージョンを指定します（例：HUGO_VERSION=0.125.4）。
  2. 記事が表示されない：記事のdraft: falseが正しく設定されているか確認します。Hugoはデフォルトでdraft: trueの記事を描画しません。
  3. 国内でのアクセス速度が遅い：ドメインがCloudflareのCDNによって加速されており、SSLが有効になっていることを確認します。

まとめ

HugoとCloudflare Pagesを使用することで、高性能で無料の個人ブログを迅速に構築することができます。Hugoは柔軟なコンテンツ管理と豊富なテーマサポートを提供し、Cloudflare Pagesの自動デプロイとグローバルCDN加速により、ブログの公開とアクセスがより効率的になります。

参考

著作権表示

著者: heyjude

リンク: https://heyjude.blog/ja/posts/deploy-hugo-to-cloudflare/

ライセンス: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the source, use non-commercially, and maintain the same license.

関連記事

もっと記事を見る

コメント

検索を開始

キーワードを入力して記事を検索

↑↓
↵
ESC
⌘K ショートカット