コンテンツにスキップ

Hexo

Hexo ↗ は、Node.js によって動作する静的ウェブサイトを生成するためのツールです。Hexo の利点には、速度、シンプルさ、柔軟性が含まれ、Markdown ファイルを Node.js を介して静的ウェブページにレンダリングすることができます。

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

Hexo のインストール

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

Terminal window
npm install hexo-cli -g
# または
yarn global add hexo-cli

macOS および Linux では、brew ↗ を使用してインストールできます。

Terminal window
brew install hexo

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.

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

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

Terminal window
hexo init my-hexo-site
cd my-hexo-site
npm install

Hexo サイトは、静的に構築された HTML サイトの外観をカスタマイズするためにテーマを使用します。Hexo にはデフォルトのテーマが自動的にインストールされており、Hexo のテーマページ ↗で見つけることができます。

投稿の作成

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

Terminal window
hexo new "hello hexo"

hello-hexo.md 内で、Markdown を使用して記事の内容を書きます。記事内のタグ、カテゴリ、その他の変数をカスタマイズできます。詳細については、Hexo ドキュメント ↗のフロントマターセクション ↗を参照してください。

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:

Terminal window
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 ダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pages > アプリケーションの作成 > Pages > Git に接続を選択します。
  3. 作成した新しい GitHub リポジトリを選択し、ビルドとデプロイの設定セクションで、次の情報を提供します：
設定オプション値
プロダクションブランチmain
ビルドコマンドhexo generate
ビルドディレクトリpublic

設定が完了したら、保存してデプロイボタンをクリックします。Cloudflare Pages が hexo とプロジェクトの依存関係をインストールし、サイトをビルドしてデプロイするのを確認できます。

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

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

一部の Hexo テーマやプラグインには、異なる Node.js バージョンに対する追加の要件があります。Hexo に特定の Node.js バージョンを使用するには：

  1. Pages プロジェクトに移動します。
  2. 設定 > 環境変数に移動します。
  3. 環境変数 NODE_VERSION を設定し、必要な Node.js バージョンの値（例：14.3）を指定します。

Pages ダッシュボードで環境変数を設定するための手順に従ってください

Learn more

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

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings