Instalasi Manual

Cara tercepat untuk membuat website Starlight adalah dengan menjalankan perintah create astro sebagaimana dijelaskan di panduan memulai. Jika Anda ingin menambahkan Starlight ke proyek Astro yang sudah ada, berikut ini adalah cara melakukannya.

Memasang Starlight

Untuk mengikuti panduan ini, Anda membutuhkan proyek Astro yang sudah berjalan.

Menambahkan integrasi Starlight

Starlight adalah sebuah integrasi Astro. Tambahkan ke website Anda dengan cara menjalankan perintah astro add di root directory proyek Anda:

npm

npx astro add starlight

pnpm

pnpm astro add starlight

Yarn

yarn astro add starlight

Perintah tersebut akan menginstal semua dependensi yang dibutuhkan dan menambahkan Starlight ke dalam array integrations di dalam file konfigurasi Astro Anda.

Mengkonfigurasi integrasi

Integrasi Starlight dikonfigurasi di dalam file astro.config.mjs.

Tambahkan title untuk memulai:

astro.config.mjs

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'Situs dokumentasi yang oke banget!',
    }),
  ],
});

Untuk opsi lengkapnya tersedia di referensi pengaturan Starlight.

Mengatur koleksi konten

Starlight dibangun berdasarkan fitur koleksi konten oleh Astro, yang dapat dikonfigurasi di file src/content/config.ts.

Buat baru atau perbarui file konfigurasi koleksi konten Anda, menambahkan koleksi bernama docs yang menggunakan skema docsSchema dari Starlight:

src/content/config.ts

import { defineCollection } from 'astro:content';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
  docs: defineCollection({ schema: docsSchema() }),
};

Menambahkan konten

Starlight sekarang sudah terkonfigurasi. Sekarang adalah waktunya menambahkan konten Anda!

Buatlah folder src/content/docs/ dan tambahkan file index.md. Halaman ini adalah beranda dari website baru Anda:

src/content/docs/index.md

---
title: Dokumentasi proyek saya
description: Pelajari tentang proyek saya di website dokumentasi ini yang dibuat dengan Starlight!
---

Selamat datang di proyek saya!

Starlight menggunakan file-based routing, yang artinya setiap file Markdown, MDX, atau Markdoc dalam folder src/content/docs/ akan dirubah menjadi sebuah halaman di website Anda. Metadata frontmatter (kolom title dan description pada contoh di atas) dapat mempengaruhi tampilan halaman tersebut. Untuk melihat semua opsi yang tersedia bisa dilihat di referensi frontmatter.

Tips untuk website yang sudah ada

Jika Anda memiliki sebuah proyek Astro yang sudah berjalan, Anda dapat menggunakan Starlight untuk menambahkan bagian dokumentasi secara cepat.

Menggunakan Starlight di dalam subpath

Untuk menambahkan halaman Starlight di dalam subpath, letakkan konten dokumentasi Anda di dalam subfolder src/content/docs/.

Contohnya, jika halaman Starlight berada pada rute /panduan/, letakkan konten dokumentasi Anda di folder src/content/docs/panduan/:

• Directorysrc/

  • Directorycontent/

    • Directorydocs/

      • Directorypanduan/

        • cara-instalasi.md
        • index.md
  • Directorypages/

    • …
• astro.config.mjs

Di masa yang akan datang, kami berencana mendukung skenario penggunaan semacam ini dengan lebih baik, sehingga Anda tidak perlu lagi menambahkan folder bertingkat di src/content/docs/.

Menggunakan Starlight dengan SSR

Untuk mengaktifkan SSR, ikuti panduan “Adaptor Rendering Sesuai Permintaan” dalam dokumentasi Astro untuk menambahkan server adapter ke proyek Starlight Anda.

Halaman dokumentasi yang dibuat oleh Starlight diprarender secara default, apa pun mode keluaran proyek Anda. Untuk memilih tidak melakukan prarender halaman Starlight Anda, tetapkan opsi konfigurasi prerender ke false.