Astroで作成したブログサイトをNetlifyにデプロイ
Astroで作成したブログをNetlifyにデプロイしたのでその手順を備忘録としてまとめたエントリーです。
だいぶ前にお名前.comで取得していたドメインを割り当てたので、そのやり方についてはお名前.comで取得したドメインをNetlifyに設定で紹介します。
目次
1.はじめに
本エントリーでは、Netlifyへデプロイするサイトは既に作成しGitHubへプッシュ済みの前提で解説をしていきます。
以下が本エントリーで使用する技術の簡単な概要です。
Astro
Astroは、ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワークです。
※Astroドキュメントより引用
ドキュメントに記載がある通り、コンテンツをベースにウェブサイトを組み立てていくことができるようになっています。
ブログ用のテンプレートプロジェクトも存在するので、ブログ投稿をマークダウンで書き上げ指定されたディレクトリへ配置するだけであっという間にブログサイトを構築することができます。
また、代表的な特徴としては
- フロントエンドの様々なJSフレームワーク(
React,Vue,Svelte等)をサポートしているので、.astro拡張子のファイルに各フレームワークの記述が可能 - デフォルトでゼロJSであるため、パフォーマンスが非常に高い
あたりがあげられます。
Netlify
静的サイトホスティングサービスです。無料で利用できるプランも用意されており、個人や小規模なプロジェクトにおすすめです。
また、作業環境は以下の通りです。
※2023年11月時点
- macOS(M2) Sonoma
- Astro:
v3.1.2 - TypeScript:
v5.2.2 - node:
v18.17.1 - npm:
v9.6.7
2.Netlifyへのデプロイ
2-1.Netlifyのアカウントを作成
Netlifyにアクセスすると画面右上にSign upボタンがあるのでそこから登録画面を開きます。
アカウントの作成はGitプロパイダー(GitHub, GitLab, Bitbucket)のアカウントを使用するか、メールアドレスとパスワードを使用するかを選択できます。
- Gitプロバイダーを使った登録画面
- メールアドレスとパスワードを使った登録画面
アカウントの作成自体は表示される手順に沿って進めれば済むため詳細な説明は割愛します。
2-2.AstroプロジェクトをNetlifyにインポート
はじめにで触れましたが、GitHubにプロジェクトをプッシュしておきます。
Netlifyにログイン後表示される画面にAdd new siteという表示があるのでクリックします。すると、プロジェクトを追加する手段が表示されるのでImport an existing projectを選択します。
接続するGitプロバイダーを選択する画面が表示されるのでDeploy with GitHubを選択します。
初めて利用する場合は、GitHubとの接続を許可するか確認する画面が表示されるのでAuthorize Netlifyをクリックします。
その後表示される画面でどのリポジトリをNetlifyへインストールするか確認する画面が表示されるので、全てのリポジトリーまたは選択したリポジトリのみインストールするかを選択します。
あとから別のリポジトリを追加できますのでひとまずは選択したリポジトリのみインストールするようにしておいて問題ありません。
2-3.Netlifyの設定を確認
リポジトリを選択したらデプロイするサイトの設定を行います。
Ownerは個人のプロジェクトの場合は特に変更の必要はありません。
Branch to deployではデプロイするブランチを選択しますが、自身の環境に合わせて選択してください。
Basic build settingsはSSGやビルドツールを使っている場合に確認しておきます。基本的にデフォルトで入力されている内容から変更の必要はありませんが、ビルドコマンドや公開するディレクトリの設定をカスタマイズしている場合は適宜設定します。
2-4.Netlifyにデプロイ
各設定完了後Deploy siteをクリックすると画面が切り替わり、デプロイ中のステータスになります。
数分でビルドが完了するので、Open published deployをクリックすると実際にNetlifyで公開されたサイトを確認できます。
Netlifyへのデプロイは以上です。