AstroをNetlifyにデプロイする

Astroでウェブサイトを作成してNetlifyで無料で公開しよう。

本記事では、Astro というSSGとNetlifyというクラウドサービスを組み合わせることで、いかに簡単にウェブサイトを公開できるかを解説する。ブログやサイトを運営したい初心者の方にもお役立ていただければと思う。

2. チュートリアルに沿ってAstroを作成する

2.1 Astroとは

Astro は、ReactやVue、Svelte、そして通常のHTMLやMarkdownなどのコンポーネントを組み合わせて使える新しいSSGである。開発体験が良く、パフォーマンスも優れているのが特徴である。

2.2 プロジェクトの作成

Astroの公式サイトにあるチュートリアルに沿って進めていく。まずは適切なフォルダに移動してから以下のコマンドでプロジェクトを作成する。

# Astro経由でプロジェクトを作成
npm create astro@latest

このコマンドを実行するのが最も早い方法である（公式がそう言っている）。

2.3 GithubにPushする

作成したプロジェクトをGithubにプッシュしておく。これは後でNetlifyと連携するために必要になる。

# Githubリポジトリを作成
git init
git add .
git commit -m "Initial commit"
git remote add origin <your-github-repo-url>
git push origin master

3. Netlifyにデプロイする

3.1 アカウントを作成する

まずはNetlifyの公式サイトでアカウントを作成する。Githubアカウントと連携させる。

3.2 各種設定をする

アカウントを作成したら、新しいサイトを追加する。Githubから、先ほどプッシュしたAstroプロジェクトを選択する。

次に、デプロイ設定を行う。Astroプロジェクトの場合は、以下の設定を行えば大丈夫である。

• ビルドコマンド: npm run build
• 公開ディレクトリ: dist

3.3 Githubにプッシュする

設定が終わったら、Githubにコミットしてプッシュする。すると自動的にNetlifyでビルドが開始される。

git add .
git commit -m "Setup Netlify"
git push origin master

Netlifyを選択した理由

ホスティングサービスを検討したときに、まず無料であることを条件に探している。

続けられるかわからないものにお金払うのもね、、ドメインは一応有料で取ったが。

他にはVercelも候補にあったが、どうも無料では商用利用ができないようである。

商用利用する可能性がある静的サイトを無料で公開するだけならNetlifyを選択しておけば良さそうである。

(無料枠を使用する際の制限については、私にはまだ関係なさそうだったので無視している。)

4. おわりに

当サイトも上記の方法で公開している。Web未経験の私でも簡単に作成できたのでおすすめである。

上記のやり方でとりあえずウェブサイト準備してから、作りたいサイトに作り変えてはいかがだろうか。

スターターテンプレートとしていろいろ用意されているので、詳しくは公式チュートリアルをご覧あれ。