コンテンツにスキップ
Starlight

入門

Starlightは、Astroの上に構築された、フル機能のドキュメント向けテーマです。このガイドは、あなたが新しいプロジェクトを始める手助けをします。既存のAstroプロジェクトにStarlightを追加するには、手動セットアップの手順を参照してください。

クイックスタート

新しいプロジェクトの作成

ターミナルで以下のコマンドを実行し、Astro + Starlightの新しいプロジェクトを作成します。

Terminal window
npm create astro@latest -- --template starlight

これにより、サイトに必要なすべてのファイルと設定が含まれた、新しいプロジェクトディレクトリが作成されます。

開発用サーバーの起動

ローカルで作業する場合、Astroの開発サーバーにより作業内容のプレビューができ、また変更を加えるとブラウザが自動的に更新されます。

プロジェクトのディレクトリ内で以下のコマンドを実行して、開発サーバーを起動します。

Terminal window
npm run dev

ターミナルにローカルプレビューのURLが表示されます。このURLを開くと、サイトを閲覧できます。

コンテンツの追加

Starlightに新しいコンテンツを追加したり、既存のファイルを追加したりする準備ができました！

ファイルフォーマット

Starlightでは、設定なしでMarkdownとMDXを用いてコンテンツを作成できます。Markdocをサポートするには、実験的なAstro Markdocインテグレーションをインストールします。

ページの追加

src/content/docs/に.mdまたは.mdxファイルを作成して、サイトに新しいページを追加できます。サブフォルダを追加してファイルを整理したり、複数のパスセグメントを作成することもできます。

たとえば、以下のファイル構造は、example.com/hello-worldとexample.com/guides/faqにページを生成します。

  • Directorysrc/
    • Directorycontent/
      • Directorydocs/
        • Directoryguides/
          • faq.md
        • hello-world.md

型安全なフロントマター

Starlightのページは、ページの表示方法を制御するための、カスタマイズ可能な共通のフロントマタープロパティを認識します。

---
title: こんにちは、世界！
description: これはStarlightで作成されたサイトのページです
---

何か重要なことを忘れてしまっていても、Starlightが教えてくれるはずです。

次のステップ

Starlightを更新する

StarlightはAstroインテグレーションであり、他の@astrojs/*インテグレーションと同様に更新できます。

Terminal window
npm install @astrojs/starlight@latest

Starlightのチェンジログから、各リリースでおこなわれた変更の全リストを確認できます。

Starlightのトラブルシューティング

プロジェクト設定と個別ページのフロントマターの設定のリファレンスページを確認して、Starlightサイトが正しく設定され、正常に動作していることを確認してください。コンテンツの追加やStarlightサイトのカスタマイズについては、サイドバーにあるガイドを参照してください。

これらのドキュメントで答えが見つからない場合は、Astroに関してより詳細に記述されているAstroドキュメントを参照してください。Starlightテーマの下でAstroがどのように動作しているかを理解することで、疑問が解消されるかもしれません。

また、GithHub上でStarlightのIssueを確認したり、AstroのDiscordで活発でフレンドリーなコミュニティに助けを求めることもできます！#supportフォーラムに「starlight」タグを付けて質問を投稿したり、#starlight専用のチャンネルにアクセスして、現在の開発などについて議論しましょう！