Skip to content

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

Hexo

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

Hexo ↗ は、Node.js で動く静的サイト生成ツールです。高速、シンプル、柔軟で、Node.js 経由で Markdown ファイルを静的な Web ページに変換できます。

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

Hexo をインストールする

まず、ターミナルで次のいずれかのコマンドを実行し、npm または yarn で Hexo CLI をインストールします。

npm install hexo-cli -g
# or
yarn global add hexo-cli

macOS と Linux では、brew ↗ でもインストールできます。

brew install hexo

続ける前に

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

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

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

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

Hexo CLI をインストールしたら、ターミナルで hexo init コマンドを実行して新しいプロジェクトを作成します。

hexo init my-hexo-site
cd my-hexo-site

Hexo サイトはテーマで、静的にビルドした HTML サイトの見た目をカスタマイズします。デフォルトのテーマは自動で入ります。Hexo の Themes ページ ↗ で確認できます。

投稿を作成する

Hexo サイトに最初のコンテンツを入れるため、新しい投稿を作成します。ターミナルで hexo new コマンドを実行すると、新しい投稿が生成されます。

hexo new "hello hexo"

hello-hexo.md の中で、Markdown を使って記事の本文を書きます。タグ、カテゴリ、その他の変数もカスタマイズできます。詳細は Hexo ドキュメント ↗ の Front Matter セクション ↗ を参照してください。

GitHub リポジトリを作成する

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

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
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 セクションで、次の情報を入力します。

Configuration option Value
Production branch main
Build command npm run build
Build directory public

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

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

特定の Node.js バージョンを使う

一部の Hexo テーマやプラグインは、Node.js のバージョンに追加の要件があります。Hexo で特定の Node.js バージョンを使う手順は次のとおりです。

  1. Pages プロジェクトを開きます。
  2. Settings > Environment variables を開きます。
  3. 環境変数 NODE_VERSION に、必要な Node.js バージョン（例: 14.3）を設定します。
上記の手順に従い、Pages ダッシュボードで環境変数を設定します

さらに学ぶ

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

役に立ちましたか？