Astroで静的サイトを生成するときの基本的な設定やコマンドについて紹介します。CloudFront + S3で運用することを前提に紹介をしていますので、それ以外の構成にデプロイする場合は読み替えてください。

情報は公式サイトが豊富

Astroについては公式サイトのドキュメントを見ると情報が揃います。日本語にも対応しているため、とりあえず悩んだら公式サイトを見て勉強すると良いです。

まずはAstroプロジェクトを生成する

以下のコマンドでAstroプロジェクトを生成します。

pnpm create astro@latest

ローカル開発サーバで起動する

以下のコマンドでローカル開発サーバを起動して動作確認できます。

pnpm dev

ビルドしてサーバに配置する

デバックが終わったらビルドしてサーバに配置します。

以下のコマンドで/distディレクトリにビルド後の静的コンテンツが生成されるため、このディレクトリ配下をサーバに配置すると公開できます。私の場合はS3 + CloudFrontをサーバにするため、S3に配布します。

pnpm run build

S3への配信方法

私の場合はS3 + CloudFrontをサーバにするため、S3に配布します。以下のAWSコマンドでS3へdist/以下の静的ページをS3に同期することができます。以下ではastro-blogバケットのxxxフォルダ配下に配布しています。

aws s3 sync dist/ s3://astro-blog/xxx/ --delete

また、S3に配信したらCloudFrontのキャッシュを削除した方が良いため、以下のコマンドでキャッシュを削除します

aws cloudfront create-invalidation --distribution-id XXXXXXXXXXXXXX --paths "/*"

Astroブログの設定

SEO対策やコンテキストルート設定のためいくつか設定を行ったため紹介します。

Astroの設定ファイルの詳細は公式サイトが詳しいです。「astro.config.mjs」ファイルに設定を行います。

ブログの配布先が特定のパス配下となる場合、baseで設定します。サンプルでは「/hp/」配下に配置している例です。

siteでドメインを設定します。

integrations: でsitemapを設定します。これを行うとビルド時にsitemapが生成されクローラなどでインデックス作成する際に役立てることができます。

私が行った設定はこの３つのみです。

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

// https://astro.build/config
export default defineConfig({
    base: '/hp/', 
    site: 'https://www.mussyu1204.com',
    // trailingSlash: 'never',
    integrations: [sitemap()]
});