コンテンツにスキップ

入門

新しいプロジェクトを作成する

Starlightは、Astroの上に構築された、フル機能のドキュメント向けテーマです。

以下のコマンドにより、Astro + Starlightの新しいプロジェクトを作成できます。

Terminal window
# npmで新しいプロジェクトを作成する
npm create astro@latest -- --template starlight

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

Starlightでコンテンツを作成する

以上で、Starlightに新しいコンテンツを追加したり、既存のファイルを持ち込んだりする準備ができました!

ファイルフォーマット

Starlightでは、MarkdownとMDXでコンテンツを作成できます。(Markdocのサポートは、実験的なAstroのMarkdocインテグレーションをインストールして追加できます。)

ページの追加

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

src/content/docs/hello-world.md => your-site.com/hello-world
src/content/docs/guides/faq.md => your-site.com/guides/faq

型安全なフロントマター

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

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

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

Starlightサイトをデプロイする

Starlightサイトの作成とカスタマイズが完了したら、Netlify、Vercel、GitHub Pages、その他多くのお好みのウェブサーバーやホスティングプラットフォームにデプロイできます。

Astroサイトのデプロイについては、Astroのドキュメントを参照してください。

Starlightを更新する

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

Terminal window
# npmでStarlightをアップグレードする
npm install @astrojs/starlight@latest

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

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

Starlightのプロジェクト設定個別ページのフロントマターの設定に関する情報は、このサイトのリファレンスセクションにあります。これらのページを利用して、Starlightサイトが正しく設定され、正常に動作していることを確認してください。

コンテンツの追加やStarlightサイトのカスタマイズについては、サイドバーにあるガイドのリストを参照してください。

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

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