Astro x TypeScriptでブログサイト作成

Astro v3.0を使ってブログサイトを作成しました。
今回はその初めての投稿です。

目次

• 目次
• 1. はじめに
• 2. Astroインストール
• 3. VSCodeセットアップ
• 4. TypeScriptセットアップ
• 5. 記事作成
• 6. 参照

1. はじめに

ここ最近注目度が高いAstroですが、最近v3.0が正式にリリースされたので、どんな感じなのか触ってみました。
v3.0未満は触れたことが無いので、v3.0から何がどう変わったのかという点には触れず、ドキュメントに沿ったブログサイトの環境構築と、開発するにあたってその他追加で行った設定をまとめていこうと思います。

作業環境は以下の通りです。
※2023年9月時点

• macOS M2
• Astro: v3.1.2
• TypeScript: v5.2.2
• node: v18.17.1
• npm: v9.6.7
• VSCode

2. Astroインストール

Astroのインストールは以下のコマンドを実行するだけです。

npm create astro@latest

インストールの過程で対話式でいくつか質問されるので回答していきます。
特別難しい設定があるわけではないので、自分の好みの設定を選択していけば問題ありません。
※TypeScriptについては今回は一番厳格な設定にしました

npm create astro@latest
 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./{開発を行いたいディレクトリを入力}

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

  deps   Install dependencies?
         Yes
      ✔  Dependencies installed

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strictest
      ✔  TypeScript customized

   git   Initialize a new git repository?
         Yes
      ✔  Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./blog
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

ここまでであっという間にベースとなる開発環境は完成です。
作成したプロジェクトのプロジェクトルートで下記のコマンドを実行すると開発サーバーが起動するので、ブラウザでlocalhost:4321にアクセス可能になります。

npm run dev

3. VSCodeセットアップ

AstroはVSCodeの拡張を提供しているので、普段の開発にVSCodeを使用している場合は、必要に応じてVSCodeの拡張をインストールします。(開発体験が向上するのでインストールすることをおすすめ)
拡張をインストールすることで出来るようになる一例を載せておきます。

• .astroファイルのシンタックスハイライト
• .astroファイルにおけるTypeScriptサポート
• コード補完
• etc…

※その他エディターのセットアップについてはこちらで確認できます

4. TypeScriptセットアップ

Please note that the astro start and astro build commands will transpile the code with esbuild, but will not run any type checking.

リファレンスによるとastro startとastro buildはTypeScriptの型チェックを行わないので、ビルド時にコンパイルエラーを表示するにはpackage.jsonのビルドスクリプトを以下のように書き換えておきましょう。

{
  "scripts": {
    // ~ 省略 ~
    "build": "astro check && tsc --noEmit && astro build"
  }
}

次に、typeのimportとexportを明示的にしたいのでそのための設定を行います。
tsconfig.jsonのcompilerOptionsに次のように設定を追記します。

{
  // ~ 省略 ~
  "compilerOptions": {
    // ~ 省略 ~
    "verbatimModuleSyntax": true
  }
}

5. 記事作成

src/content/blogディレクトリにブログ記事用のMarkdownファイルを作成します。
※ファイル名から拡張子を抜いた部分が記事のスラッグになります

例えば、src/content/blog/hello-astro.mdを作成したならlocalhost:4321/blog/hello-astroにアクセスすると記事を閲覧可能になります。

---
title: 'Hello Astro 🚀'
description: 'Astroで作成したブログのサンプルです。'
pubDate: 'Jan 1 2023'
heroImage: '/blog-placeholder-2.jpg'
---

## h2見出し
Astroで作成したブログです。

ここまで出来たら再度localhost:4321/blogにアクセスすると、ブログ一覧に作成したブログが表示され、そこからブログ詳細へアクセス可能になります。
※ここまでの手順で設定を変更した関係でローカルサーバーが止まっている場合は、再度npm run devを実行してください

以上がAstroを使った非常に簡単なブログサイト作成でした。
これから色々とカスタマイズしてみようと思います。

6. 参照

• astro DOCS