astro でサイト作ってみた

Mar 23, 2023

前に middleman で作ったブログが、ビルド後の静的ファイルしか残ってなさそうだったので新しく作り直しました一番簡単に作れそうだったので、astro にしました

astro とは

astro は Webサイトを構築するための Webフレームワークですコンポーネント単位で機能やページのパーツを作る事ができます
コンポーネントは .astro で作成しますが、Vue や React も使う事ができるようです
また JavaScript では TypeScript を使う事が可能です
ビルドすると、静的ファイルに変換されます
src ディレクトリ内のものが dist ディレクトリを見ると変換されているのが分かります
単純な html となるため高速に表示する事が可能となります

作ってみる

早速作ってみます以下のコマンドを打つと

npm create astro@latest

以下のように対話形式でインストールすることができます

Need to install the following packages:
  create-astro@3.1.3
Ok to proceed? (y) y

╭─────╮  Houston:
│ ◠ ◡ ◠  Keeping the internet weird since 2021.
╰─────╯

 astro   v2.3.0 Launch sequence initiated.

プロジェクトの配置場所を決めます

   dir   Where should we create your new project?
         ./myblog

ブログ作りたいので、ブログテンプレートを選択しました

  tmpl   How would you like to start your new project?
         Use blog template
      ✔  Template copied

あとは依存関係は推奨のインストールで、TypeScript は使用して型は一番厳密なやつにしました
最後のは git でバージョン管理したいので yes で

  deps   Install dependencies?
         Yes
      ✔  Dependencies installed

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict
      ✔  TypeScript customized

   git   Initialize a new git repository?
         Yes
      ✔  Git initialized

対話が終わると構築は完了です

サーバー起動は以下のコマンドを行うとでき、表示された url にアクセスするとブログがもう出来上がってます

cd myblog
npm run dev

今回作った意図としては、ブログを作り直すことと外部 api 利用するためにプライバシーポリシーのページが必要だったため、プライバシーポリシーの追加もやってみます

ページ追加してみる

src/pages の下に置いたものが各ページとして扱われます
ファイルベースルーティングと呼ぶそうです
.astro だけでなく .md も置けます

mdファイル単体で読み込ませる

プライバシーポリシーは殆どテキストなため、ブログみたいに気軽に書けるようにしたいので mdファイルで管理できるようにします

何もせず mdファイルを置くと、中身が表示されるだけになってしまうため layoutコンポーネントを利用します

src/layouts/PageContent.astro

ここに layoutコンポーネントを作成します
Astro.props 経由で md ファイルから取れた値を、html にどう組み込むか書きます
<slot /> にコンテンツ部分が入るみたいです

---
〜 省略 〜

const { title, description, pubDate, updatedDate, heroImage } = Astro.props.frontmatter;
const formattedPubDate = new Date(pubDate);
const formattedUpdatedDate = new Date(updatedDate);
---
〜 省略 〜

<h1 class="title">{title}</h1>

〜 省略 〜

<slot />

〜 省略 〜

frontmatter には .md の先頭に書かれたメタデータが格納されています
pubDate, updatedDate を dateオブジェクトにしているのは、FormattedDateコンポーネントの機能を使うためです

ブログでは src/content/config.ts で dateオブジェクトにしてそうでした

const blog = defineCollection({
	// Type-check frontmatter using a schema
	schema: z.object({
		title: z.string(),
		description: z.string(),
		// Transform string to Date object
		pubDate: z
			.string()
			.or(z.date())
			.transform((val) => new Date(val)),
		updatedDate: z
			.string()
			.optional()
			.transform((str) => (str ? new Date(str) : undefined)),
		heroImage: z.string().optional(),
	}),
});

src/pages/privacy_policy.md

ここにプライバシーポリシーの mdファイルを置きます Front Matter の中に layout フィールドを追加し先ほど作成した layoutコンポーネントを指定します

layout: ../layouts/PageContent.astro

これでレイアウトが適用されたプライバシーポリシーのページが表示できるようになりました

次回は github pages を使って push したらデプロイする仕組みを見ていこうと思います