Astro.jsで作ったWEBサイトをCloudflare Pagesにデプロイする

公開日:

2024-06-30

javascript

ブログ

Astro.jsは、静的サイト生成（SSG）に特化した新しいフレームワークです。

高パフォーマンスなウェブサイトを簡単に構築でき、人気があります。

今回は、Astro.jsで作成したウェブサイトをCloudflare Pagesにデプロイする手順を解説します。

Cloudflare Pagesは、無料で高速な静的サイトホスティングを提供するサービスです。

前提条件

Astro.jsプロジェクトが作成済み
GitHubアカウントがある
Cloudflareアカウントがある

GitHubリポジトリの作成

プロジェクトをCloudflare Pagesにデプロイするために、GitHubリポジトリを作成してください。

GitHubの自分のアカウントのトップページで、右上のプラスアイコン（「+」）をクリックし、ドロップダウンメニューから「New repository」を選択します。

リポジトリの設定ページに移動し、下記を設定します。

Repository name: リポジトリの名前を入力します。例：astro-website
Description (optional): プロジェクトの簡単な説明を入力します（任意）。
Public or Private: リポジトリを公開するか、非公開にするかを選択します。公開リポジトリは誰でも見ることができますが、非公開リポジトリはあなたが招待した人のみがアクセスできます。
Initialize this repository with a README: 必要に応じて、README ファイルを作成します。このオプションをチェックすると、リポジトリにデフォルトのREADMEファイルが追加されます。
Add .gitignore: gitignore テンプレートを追加する場合は、リポジトリの内容に応じたテンプレートを選択します。例えば、Node.jsプロジェクトの場合は「Node」を選択します。
Add a license:プロジェクトにライセンスを追加する場合は、適切なライセンスを選択します。
Create repository: 「Create repository」ボタンをクリックして、新しいリポジトリを作成します。

ローカルにあるプロジェクトをリモートに移す

リポジトリの作成後、ローカルプロジェクトをリポジトリにプッシュします。

:::messager alert
既にリモートリポジトリにプロジェクトがある場合は、この手順をスキップしてください。
:::

何もgit設定をしていない場合は、ターミナルを開き下記の通りコマンドを実行します。

cd [astroプロジェクトの場所(ファイルパス)]
git init
git remote add origin https://github.com/yourusername/your-repo.git
git add .
git commit -m "Initial commit"
git push -u origin main