2024-03-27 | gatowo

AstroをNetlifyにデプロイする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

同じタグの記事一覧↓