astroを使ってドキュメントを書く

概要

Astroは高速・柔軟な静的サイトジェネレーターです。Astroを使ってドキュメントサイトを作成する手順を紹介します

1. astroプロジェクトの作成

プロジェクトを作成します。元からあるテンプレートを選択することもできます。

npm create astro@latest

Starlight templateを使って作っていきます。

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./absolute-accretion

  tmpl   How would you like to start your new project?
         Use docs (Starlight) template

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

今回はabsolute-accretionというプロジェクト名で生成されたので移動します。

cd absolute-accretion

npm installします。

npm install

2. サーバー起動

現在の状態で一度開いて見ます。

npm run dev

開くとこのようになっています。

静的サイトで利用する際などはnpm run buildすると、distフォルダ以下にコンテンツが作成されるので展開して利用しましょう。

3. 編集

基本的にはcontent/docsの中身を編集していきます。

Welcome to Starlightという文字列を変更してみたいと思います。

index.mdxのタイトルをAstroドキュメントへようこそ！に変更して保存します。

そうすると文字列がタイトルが変更されました。保存した瞬間反映されます。

ドキュメントの中身を編集するにはguides,referenceのフォルダ内を編集します。
フォルダ名は任意です。はじめにページを作るときはintroductionフォルダなどにするとよいと思います。

astro.config.mjsのlabelを変更するとサイドバーの表示が変更されます。