Elder.js
Elder.js ↗は、Svelteを使用して静的サイトを構築するためのSEOに焦点を当てたフレームワークです。
このガイドでは、新しいElder.jsアプリケーションを作成し、Cloudflare Pagesを使用してデプロイします。
npx degit Elderjs/template ↗を使用して新しいプロジェクトを作成し、プロジェクト名を指定します：
npx degit Elderjs/template elderjs-appcd elderjs-appElder.jsテンプレートには、静的サイトを構築する方法を示すいくつかのページと例が含まれていますが、プロジェクトを生成するだけで、すでにCloudflare Pagesにデプロイする準備が整っています。
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.
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:
git initgit remote add origin https://github.com/<your-gh-username>/<repository-name>git add .git commit -m "Initial commit"git branch -M maingit push -u origin mainサイトをPagesにデプロイするには：
- Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
- アカウントホームで、Workers & Pages > Create application > Pages > Connect to Gitを選択します。
まだGitHubアカウントへのアクセスを承認していない場合は、承認を求められます。Cloudflareは、ソースからプロジェクトを監視およびデプロイするためにこれが必要です。特定のリポジトリへのアクセスを制限することもできますが、Cloudflare Pagesに追加のリポジトリを追加したい場合は、GitHubの設定 ↗内で手動でこのリストを更新する必要があります。
作成した新しいGitHubリポジトリを選択し、Set up builds and deploymentsセクションで、次の情報を提供します：
| Configuration option | Value |
|---|---|
| Production branch | main |
| Build command | npm run build |
| Build directory | public |
オプションで、Project nameフィールドをカスタマイズできます。デフォルトではGitHubリポジトリの名前が設定されますが、一致する必要はありません。Project nameの値は、あなたの*.pages.devサブドメインとして割り当てられます。
設定が完了したら、Save and Deployボタンをクリックします。
最初のデプロイパイプラインが進行中であることが表示されます。Pagesはすべての依存関係をインストールし、指定された通りにプロジェクトをビルドします。
Cloudflare Pagesは、新しいコミットがプッシュされるたびに自動的にプロジェクトを再ビルドし、デプロイします。
さらに、プレビュー展開にアクセスでき、プルリクエストのためにビルドおよびデプロイプロセスを繰り返します。これにより、プロダクションにデプロイする前に、実際のURLでプロジェクトの変更をプレビューできます。
By completing this guide, you have successfully deployed your Elder.js site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.