Skip to content

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

Elder.js

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

Elder.js ↗ は、SvelteKit で静的サイトを作る、SEO 重視のフレームワークです。

このガイドでは、新しい Elder.js アプリケーションを作成し、Cloudflare Pages でデプロイします。

新しいプロジェクトをセットアップする

npx degit Elderjs/template ↗ で新しいプロジェクトを作成し、プロジェクト名を付けます。

npx degit Elderjs/template elderjs-app
cd elderjs-app

Elder.js のテンプレートには、静的サイトの作り方を示すページと例がいくつか含まれています。プロジェクトを生成した時点で、Cloudflare Pages へのデプロイ準備はできています。

続ける前に

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

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

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

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. Build settings セクションで、Framework preset に Elder.js を選びます。選ぶと、次の情報が表示されます。

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

必要に応じて Project name を変更できます。デフォルトは GitHub リポジトリ名ですが、一致させる必要はありません。Project name の値が *.pages.dev サブドメインになります。

セットアップを完了する

設定が終わったら Save and Deploy を選びます。

最初のデプロイパイプラインが進行中と表示されます。Pages は依存関係をすべてインストールし、指定どおりにプロジェクトをビルドします。

新しいコミットをプッシュするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。

加えて プレビューデプロイ も使えます。プルリクエストに対してビルドとデプロイを繰り返します。本番に出す前に、実際の URL で変更を確認できます。

さらに学ぶ

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

役に立ちましたか？