Astro + Starlight 從零開始：完整初學者教學

版本：2026年 9月 15日

Astro 提供網站框架，Starlight 提供文件站體驗，而 Markdown 則讓你可以用簡單、容易維護的方式撰寫內容。

這篇教學會由零開始，逐步解釋這三者如何組合在一起，建立一個具有左側 Sidebar、中間文章內容、右側 On this page、Search、Dark/Light Theme，以及多語言支援的文件站風格技術 Blog。

如果你想先深入理解 Astro 本身的 Pages、Routing、Components、Layouts 和 Content Collections，可以先閱讀 Astro 從零開始。

1. 我們要建立甚麼？

目標是建立一個常見於 Developer Documentation 的三欄式知識網站：

┌─────────────────┬───────────────────────────────┬──────────────────┐
│ Left Sidebar    │ Main Article                  │ On this page     │
│                 │                               │                  │
│ Astro           │ Astro + Starlight 從零開始     │ Prerequisites    │
│ ├ Astro 從零開始 │                               │ Structure        │
│ └ Astro +       │ Article content...            │ Frontmatter      │
│   Starlight     │                               │ Build            │
└─────────────────┴───────────────────────────────┴──────────────────┘

Starlight 已經幫我們處理大部分文件站常見功能，所以不需要自己由零建立整個 documentation shell。

第一版網站可以保持很簡單：

HarryLo.com
│
└── Astro
    ├── Astro 從零開始
    └── Astro + Starlight 從零開始

將來內容增加後，可以再自然地擴展：

HarryLo.com
│
├── Astro
├── Home Lab       ← 未來
└── MarketLens     ← 未來

這些只是未來方向，不需要一開始就建立空白頁面。

一個很重要的原則是：

先由小開始
    ↓
先把結構做好
    ↓
加入真正內容
    ↓
讓 Navigation 隨內容自然成長

2. Astro 和 Starlight 是甚麼？

Astro 是網站底層使用的 Web Framework。

可以先這樣理解：

Astro
  ↓
Web Framework

Astro 負責：

Project Structure；
Routing；
Components；
Integrations；
Build；
Static HTML Generation。

Starlight 則建立在 Astro 之上，專門用來建立 Documentation / Knowledge Site：

Astro
  ↓
Starlight
  ↓
Documentation Experience

Starlight 幫我們提供：

Sidebar；
文件頁面 Layout；
Search；
Responsive UI；
Dark / Light Theme；
Internationalization；
Code Highlighting；
Page Navigation。

如果你想深入理解 Astro 本身，包括 [slug].astro、[...slug].astro、getStaticPaths() 等概念，可以閱讀 Astro 從零開始。

3. 為甚麼使用 Starlight？

你當然可以只用普通 Astro 自己建立文件站。

但這樣通常需要自己處理：

Sidebar；
Language Switch；
Search；
Table of Contents；
Article Layout；
Mobile Navigation；
Theme Switch；
Previous / Next Navigation。

對學習 Astro 來說，這樣做很有價值；但對一個真正要長期維護的知識網站來說，這些都會變成額外維護成本。

Starlight 已經內置大部分文件站常見功能。

如果你的 astro/ folder 內有：

astro/
├── astro-from-zero.md
└── astro-starlight-from-zero.md

Starlight 可以自動根據這些文章建立 Navigation。

Search

Starlight 的 Static Site 預設可以使用 Pagefind 做全文 Search。

Theme

Dark Mode 和 Light Mode 已經是 Starlight 內置功能。

Internationalization

Starlight 支援多語言 Locale Folder，很適合建立英文和繁體中文兩個版本。

Code Highlighting

例如：

```js
const message = 'Hello Astro';
```

會自動有語法 Highlight。

整體原則可以理解成：

Starlight 已經有的功能
        ↓
先使用 Built-in 功能
        ↓
真的不夠用時才 Custom

4. Plain Astro 和 Astro + Starlight 有甚麼分別？

如果使用普通 Astro 自己建立文件系統，概念上可能是：

Markdown
   ↓
Content Collection
   ↓
[...slug].astro
   ↓
getStaticPaths()
   ↓
Layout
   ↓
Page

使用 Starlight 後，正常 Documentation Flow 會簡單很多：

Markdown
   ↓
src/content/docs/
   ↓
Starlight
   ↓
Sidebar + TOC + Search + Page

Starlight 不是取代 Astro。

Starlight 是建立在 Astro 上面，專門處理文件站需要的功能。

如果你想深入理解普通 Astro 的 Routing Model，可以回到 Astro 從零開始。

5. 開始前需要準備甚麼？

建立 Astro Project 前，先檢查開發環境。

Node.js

執行：

node -v

撰寫這篇文章時，Astro 官方目前要求 Node.js 22.12.0 或以上，而且不支援例如 Node 23 這類 odd-numbered release。

如果是既有 Project，也應該檢查：

.nvmrc

以及：

package.json

內有沒有指定 Node Version。

npm

檢查 npm：

npm -v

npm 是 Node.js 常用的 Package Manager。

它負責：

安裝 dependencies；
執行 scripts；
建立新 Astro Project。

Git

檢查：

git --version

Git 並不是理解 Starlight 的必要條件，但非常建議使用，因為可以追蹤和回復 Source Code 的變更。

可以把三者理解成：

Node.js
   ↓
執行 JavaScript Tooling

npm
   ↓
安裝 Package 和執行 Script

Git
   ↓
追蹤 Source Code 變更

6. 建立新的 Starlight Project

如果你由零開始建立新網站，最簡單的方法是使用官方 Starlight Template：

npm create astro@latest -- --template starlight

這條 Command 可以拆開理解：

npm
↓
使用 Node Package Manager

create astro@latest
↓
執行最新 Astro Project Creator

-- --template starlight
↓
使用 Starlight Template

如果你想先查看目前 CLI 支援哪些 Options，而不是照抄舊教學，可以執行：

npx create-astro@latest --help

npx 可以直接執行 Package 提供的 CLI，不需要先把 Astro CLI global install。

這篇教學假設新 Project 名稱是：

my-blog

建立後：

cd my-blog

7. 啟動 Development Server

進入 Project Folder 後執行：

npm run dev

Astro 通常會啟動 Local Development Server，例如：

http://localhost:4321/

Development Server 運作期間：

修改 Source File
      ↓
Astro 偵測變更
      ↓
Browser 更新

這個模式適合平時寫文章和開發。

Production Build 和 Preview 會在後面另外解釋。

8. 認識 Project Structure

一個簡化的 Starlight Project 可以是：

my-blog/
├── public/
├── src/
│   ├── content/
│   │   └── docs/
│   ├── pages/
│   └── content.config.ts
├── astro.config.mjs
├── package.json
├── tsconfig.json
├── .nvmrc
└── README.md

`public/`

放一些直接作為 Static File 提供的內容，例如：

public/
├── favicon.svg
└── images/

`src/content/docs/`

這是 Starlight 一般文章最重要的 Folder。

例如：

src/content/docs/
└── zh/
    └── astro/
        └── astro-from-zero.md

`src/pages/`

這是 Astro 一般 File-based Routing 使用的 Folder。

但正常的 Starlight Documentation Article 不需要每篇都在這裏建立 Route File。

這個網站可以使用：

src/pages/index.astro

做一個特殊用途：

/
↓
/en/

Root Redirect 和正常 Starlight Docs Routing 是兩回事。

`src/content.config.ts`

設定 Starlight 使用的 Content Collection。

`astro.config.mjs`

Astro 主要 Configuration File，也包含 Starlight Integration 和 Starlight Settings。

`package.json`

包含：

dependencies；
npm scripts；
project metadata。

例如：

npm run dev
npm run build
npm run preview

`.nvmrc`

如果存在，通常用來記錄 Project 使用的 Node Version。

`README.md`

通常用來說明 Developer 如何使用這個 Repository。

9. 認識 `content.config.ts`

一個常見的 Starlight Docs Collection 設定如下：

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

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

`defineCollection()`

用來建立 Astro Content Collection。

這裏建立的 Collection 名稱是：

docs

`docsLoader()`

Starlight 使用它來讀取 Documentation Content。

可以理解成：

src/content/docs/
       ↓
docsLoader()
       ↓
Starlight Docs Collection

`docsSchema()`

用來定義和驗證 Starlight Frontmatter Structure。

例如 Starlight 會理解：

title:
description:
sidebar:

對初學者 Project 來說，一開始通常不需要建立複雜的 Custom Schema。

10. 認識 `astro.config.mjs`

最簡單的 Astro + Starlight Config 可以是：

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

export default defineConfig({
  site: 'https://example.com',

  integrations: [
    starlight({
      title: 'My Site',
    }),
  ],
});

`site`

site: 'https://example.com'

告訴 Astro Production Website 的 Base URL。

`integrations`

Astro 可以透過 Integration 增加功能。

Starlight 就是一個 Astro Integration：

integrations: [
  starlight({...}),
]

`title`

Starlight 使用的網站名稱。

目前這個 Blog 的 Astro Section 可以使用：

sidebar: [
  {
    label: 'Astro',
    items: [
      {
        autogenerate: {
          directory: 'astro',
        },
      },
    ],
  },
]

最重要的是：

autogenerate: {
  directory: 'astro',
}

意思是：

根據 astro Directory 內的文件自動建立 Sidebar Item。

所以加入新的 Markdown Article 後，通常不需要再手動修改 Sidebar Config。

11. 英文和繁體中文

Starlight 可以使用 Locale Directory 做多語言網站。

概念上：

defaultLocale: 'en',

locales: {
  en: {
    label: 'English',
    lang: 'en',
  },
  zh: {
    label: '繁體中文',
    lang: 'zh-Hant',
  },
}

Locale Key：

en
zh

會對應：

src/content/docs/en/
src/content/docs/zh/

例如：

src/content/docs/en/astro/example.md
src/content/docs/zh/astro/example.md

可以對應：

/en/astro/example/
/zh/astro/example/

Matching Path 的好處

同一篇文章最好保持：

en/astro/astro-from-zero.md
zh/astro/astro-from-zero.md

而不是讓兩個 Language Version 使用完全不同的技術 Path。

Starlight 不會自動翻譯文章

這一點很重要：

Language Switch
      ≠
Automatic Translation

英文和繁體中文仍然是兩個不同的 Markdown File。

Starlight 提供的是多語言結構和 Navigation，不是 Machine Translation。

12. Content Folder Structure

目前 Astro Section 可以保持：

src/content/docs/
├── en/
│   ├── index.md
│   └── astro/
│       ├── astro-from-zero.md
│       └── astro-starlight-from-zero.md
│
└── zh/
    ├── index.md
    └── astro/
        ├── astro-from-zero.md
        └── astro-starlight-from-zero.md

可以這樣理解：

Folder Structure
      ↓
Content Organisation
      ↓
URL Structure

例如：

src/content/docs/zh/astro/astro-starlight-from-zero.md

概念上會變成：

/zh/astro/astro-starlight-from-zero/

13. 建立第一個 Markdown Page

一個很簡單的 Starlight Page：

---
title: My First Page
description: My first Starlight page.
---

這是我的介紹。

## 第一個 Section

Hello Starlight.

這篇 Page 有兩部分。

Frontmatter

在：

---
...
---

之間的內容是 Frontmatter。

它用來描述這一頁的 Metadata。

Markdown Body

Frontmatter 後面的內容就是文章正文。

可以理解成：

Frontmatter
↓
Starlight 如何處理這一頁

Markdown Body
↓
讀者實際閱讀的內容

14. 理解 Frontmatter

實際文章可以使用：

---
title: "Astro Routing"
description: "Learn Astro file-based routing."
sidebar:
  label: "Routing"
  order: 3
---

`title`

完整 Page Title。

`description`

這一頁的簡短描述。

`sidebar.label`

Sidebar 顯示的名稱可以比完整 Title 短。

例如：

title: "Astro Routing: A Complete Beginner's Guide"

sidebar:
  label: "Routing"

`sidebar.order`

控制同一個 Autogenerated Sidebar Group 內的排序。

例如：

order: 1
↓
Astro 從零開始

order: 2
↓
Astro + Starlight 從零開始

15. 為甚麼通常不要再寫一個 H1？

假設 Frontmatter 已經有：

---
title: "Astro Routing"
---

Starlight 已經會 Render Main Page Title。

如果 Markdown Body 又寫：

# Astro Routing

有可能出現重複標題：

Astro Routing
Astro Routing

比較乾淨的寫法：

---
title: "Astro Routing"
---

介紹文字。

## 第一個 Section

...

可以理解成：

Frontmatter title
      ↓
Page Title

## Heading
      ↓
Article Section

假設：

astro/
├── astro-from-zero.md
├── astro-starlight-from-zero.md
├── routing.md
└── content-collections.md

Sidebar 可以大約顯示成：

Astro
├── Astro 從零開始
├── Astro + Starlight 從零開始
├── Routing
└── Content Collections

routing.md 和 content-collections.md 只是例子。

正常 Workflow：

建立 Markdown File
       +
加入 Frontmatter
       +
既有 Sidebar Autogeneration
       ↓
Sidebar 出現新 Article

如果 Section 已經設定好 Autogenerate，通常每新增一篇文章都不需要修改 astro.config.mjs。

17. `On this page` 是如何產生的？

例如文章內有：

## Installation

## Configuration

### Languages

### Sidebar

## Build

Starlight 可以自動建立：

On this page

Installation
Configuration
  Languages
  Sidebar
Build

所以通常不需要再自己寫：

## Table of Contents

亦通常不需要：

<a id="configuration"></a>

一般情況只需要寫乾淨的：

## Heading

### Subheading

Starlight 就會幫你處理 Page Navigation。

18. 如何加入一篇新文章？

當網站已經設定好後，加入新 Article 應該很簡單。

Step 1：決定 Topic

例如：

Astro Routing

Step 2：建立英文 Markdown

src/content/docs/en/astro/routing.md

Step 3：建立繁體中文 Markdown

src/content/docs/zh/astro/routing.md

以上只是例子。

Step 4：加入 Frontmatter

---
title: "Astro Routing"
description: "Understand routing in Astro."
sidebar:
  label: "Routing"
  order: 3
---

Step 5：寫文章

介紹。

## File-based Routing

...

## Static Routes

...

## Dynamic Routes

...

Step 6：Run Development Server

npm run dev

Step 7：Build 和 Preview

npm run build
npm run preview

最重要的是，正常新增一篇 Starlight Article 通常不需要：

新的 [...slug].astro
新的 Article Layout
新的 Sidebar Component
新的 TOC Component

這正是 Starlight 最大的優點之一。

19. 加入圖片

最簡單的方法，可以把 Static Image 放入：

public/
└── images/
    └── astro/
        └── project-structure.png

Markdown：

![Astro project structure](/images/astro/project-structure.png)

為甚麼 Path 是 `/images/...`？

因為：

public/images/astro/project-structure.png

會直接變成網站：

/images/astro/project-structure.png

`public/` 和 `src/assets/` 有甚麼分別？

初步可以理解成：

public/
↓
Static Files，直接提供

src/assets/
↓
由 Astro Source Pipeline 管理

對第一版技術 Blog 來說，public/images/ 通常最容易理解。

20. Code Blocks

技術文章經常需要顯示 Code。

JavaScript

```js
export const hello = 'world';
```

TypeScript

```ts
const title: string = 'Astro + Starlight';
```

Terminal Command

```bash
npm run dev
```

JSON

```json
{
  "name": "my-blog"
}
```

YAML

```yaml
title: My Page
description: My description
```

Opening backticks 後面的 Language Identifier 會控制 Syntax Highlight。

常見例如：

js
ts
bash
json
yaml
html

21. Root URL Redirect

Documentation Content 使用：

/en/...
/zh/...

但使用者可能直接輸入：

https://harrylo.com/

這時可以用：

src/pages/index.astro

做：

/
↓
/en/

要留意：

src/pages/index.astro

在這裏是做 Root Redirect。

它不是正常 Documentation Article 的 Route Template。

正常 Starlight Content 仍然放在：

src/content/docs/

22. Development、Build 和 Preview

三個 Command 有不同用途：

Command	用途
`npm run dev`	開發和寫文章時使用
`npm run build`	建立 Production Build
`npm run preview`	在 Local 預覽 Production Version

Development

npm run dev

Build

npm run build

Concept：

Markdown + Source
      ↓
Astro + Starlight Build
      ↓
dist/

dist/ 是 Generated Output。

不要直接修改：

dist/

因為下一次 Build 可能會全部重新生成。

Preview

執行 Project 現有的 Preview Script：

npm run preview

一定要查看 package.json，了解這個 Project 的 Script 實際做甚麼。

例如：

{
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro build && astro preview"
  }
}

這表示：

npm run preview
      ↓
先 Build
      ↓
再啟動 Preview Server

停止 Server：

Ctrl + C

23. Search

Starlight 的 Static Site 可以使用 Pagefind 做 Full-text Search。

Production Search Index 是在 Build 時產生：

Markdown Content
      ↓
Production Build
      ↓
Pagefind Index
      ↓
Starlight Search

所以要驗證最終 Search 行為，最好使用 Production Build / Preview Workflow：

npm run build
npm run preview

新增 Article 後，可以實際 Search：

Astro + Starlight

看看新文章是否出現。

24. Dark / Light Theme

Starlight 已經提供 Theme Support。

第一版不需要自己建立：

DarkModeToggle.astro

這再次說明同一個原則：

Starlight 已提供標準功能
        ↓
先直接使用
        ↓
真的有特別需求才 Custom

25. Language Switching

同一個 Topic 最好有 Matching Path：

/en/astro/astro-starlight-from-zero/
/zh/astro/astro-starlight-from-zero/

Source File：

src/content/docs/en/astro/astro-starlight-from-zero.md
src/content/docs/zh/astro/astro-starlight-from-zero.md

可以理解成：

同一 Topic
   ↓
同一 Relative Path
   ↓
不同 Locale
   ↓
不同語言內容

Language Switch 並不代表 Automatic Translation。

英文和繁體中文仍然需要分別維護。

26. Deployment Overview

Deployment 先保持高層概念。

一般 Static Site Workflow：

Markdown + Source
       ↓
npm run build
       ↓
dist/
       ↓
Hosting Platform

Astro + Starlight 負責 Build Website。

Hosting Platform 負責 Serve Website。

對初學者來說，先理解 Content Workflow，再學 Cloudflare 或其他平台 Deployment，會容易很多。

27. 網站日後可以怎樣成長？

將來可以擴展成：

HarryLo.com
│
├── Astro
│   ├── Astro 從零開始
│   ├── Astro + Starlight 從零開始
│   ├── Routing
│   └── Content Collections
│
├── Home Lab       ← 未來
│   ├── Network
│   ├── Firewall
│   ├── Proxmox
│   └── NAS
│
└── MarketLens     ← 未來

以上只是未來 Example。

建議 Layer Depth：

Level 1 = 大主題
Level 2 = Category
Level 3 = Article 或更細 Category
Level 4 = 真正有需要才加入

例如：

Home Lab                 Level 1
└── Network              Level 2
    └── VLAN             Level 3
        ├── VLAN Basics  Level 4
        ├── IoT VLAN
        └── Guest VLAN

不要只是因為技術上可以做到很深，就一開始建立很多層。

過深的 Structure 會令：

URL 變長；
Sidebar 難閱讀；
Mobile Navigation 變複雜；
使用者難找到內容。

28. 初學者常見錯誤

重複 H1

如果 Frontmatter 已經有：

title: My Page

通常不要再寫：

# My Page

手動寫 Table of Contents

如果 Starlight 已經有 On this page，再加一個 Manual TOC 只會重複。

不必要的 HTML Anchor

一般 Markdown Heading 已經足夠。

File 放錯 Folder

例如：

src/content/docs/en/astro/my-page.md

和：

src/content/docs/en/my-page.md

代表不同 Content Structure。

英文和中文 Path 不一致

同一 Topic 最好保持：

en/astro/my-page.md
zh/astro/my-page.md

忘記 `sidebar.order`

如果文章順序重要，使用：

sidebar:
  order: 2

Node Version 錯誤

先檢查：

.nvmrc
package.json

以及目前 Astro Requirement。

忘記 `npm install`

如果你剛 Clone / Copy Project，可能要先：

npm install

修改 `dist/`

dist/ 是 Generated Output。

應該修改 Source File。

以為 Starlight 會自動翻譯

Starlight 支援 Locale，但不會自動把英文翻成中文。

如果現有 Section 已經 Autogenerate，只需要加 Markdown。

不必要地自己寫 TOC

使用 Heading，讓 Starlight 處理 On this page。

把 Development 當成 Production Verification

npm run dev 適合 Authoring。

Production Build / Preview 才是最終驗證。

每加一篇文章都修改 `astro.config.mjs`

如果 Section 已經設定好 Autogenerate，正常情況不需要每次改 Config。

29. 最重要的 Mental Model

整個 Content Workflow 可以濃縮成：

寫 Markdown
      ↓
放入 src/content/docs/
      ↓
Starlight 讀取
      ↓
Astro Build
      ↓
Sidebar + Article + TOC + Search
      ↓
Static Website

對大部分 Technical Article 來說，主要工作應該是：

Markdown
+
Frontmatter
+
Images / Code Examples

通常不需要每篇文章都再建立：

Routing Code
Layout Code
Sidebar Code
TOC Code

這就是 Starlight 很適合 Technical Knowledge Site 的原因。

30. 下一步可以學甚麼？

熟悉 Starlight Article Workflow 後，可以再逐步學：

Astro Routing；
Content Collections；
MDX；
Starlight Customization；
Image Handling；
Deployment。

不需要為了讓 Sidebar 看起來內容很多，就先建立空 Page。

真正有內容時再新增。

Astro 基礎方面，可以繼續使用 Astro 從零開始作為配套教學。

31. 結語

Astro、Starlight 和 Markdown 各自有不同角色：

Astro
↓
提供 Web Framework

Starlight
↓
提供 Documentation Experience

Markdown
↓
提供 Article Content

這樣的分工令網站更容易理解和維護。

你不需要每加一篇文章就重新寫 Sidebar、TOC、Layout 或 Routing。

正常 Workflow 可以保持很簡單：

建立 Markdown
      ↓
寫 Frontmatter
      ↓
寫 Tutorial
      ↓
npm run dev
      ↓
npm run build / preview
      ↓
Publish

當這個 Workflow 穩定後，網站可以由兩篇 Astro 教學慢慢成長成更完整的 Knowledge Base，而不需要改變最核心的 Mental Model。

官方參考資料

Astro installation and requirements: https://docs.astro.build/en/install-and-setup/
Starlight getting started: https://starlight.astro.build/getting-started/
Starlight manual setup: https://starlight.astro.build/manual-setup/
Starlight sidebar navigation: https://starlight.astro.build/guides/sidebar/
Starlight configuration: https://starlight.astro.build/reference/configuration/
Starlight frontmatter: https://starlight.astro.build/reference/frontmatter/
Starlight site search: https://starlight.astro.build/guides/site-search/

Astro + Starlight 從零開始：完整初學者教學

1. 我們要建立甚麼？

2. Astro 和 Starlight 是甚麼？

3. 為甚麼使用 Starlight？

Sidebar

On this page

Search

Theme

Internationalization

Code Highlighting

4. Plain Astro 和 Astro + Starlight 有甚麼分別？

5. 開始前需要準備甚麼？

Node.js

npm

Git

6. 建立新的 Starlight Project

7. 啟動 Development Server

8. 認識 Project Structure

public/

src/content/docs/

src/pages/

src/content.config.ts

astro.config.mjs

package.json

.nvmrc

README.md

9. 認識 content.config.ts

defineCollection()

docsLoader()

docsSchema()

10. 認識 astro.config.mjs

site

integrations

title

Sidebar Autogeneration

11. 英文和繁體中文

Matching Path 的好處

Starlight 不會自動翻譯文章

12. Content Folder Structure

13. 建立第一個 Markdown Page

Frontmatter

Markdown Body

14. 理解 Frontmatter

title

description

sidebar.label

sidebar.order

15. 為甚麼通常不要再寫一個 H1？

16. Sidebar 是如何運作的？

17. On this page 是如何產生的？

18. 如何加入一篇新文章？

Step 1：決定 Topic

Step 2：建立英文 Markdown

Step 3：建立繁體中文 Markdown

Step 4：加入 Frontmatter

Step 5：寫文章

Step 6：Run Development Server

Step 7：Build 和 Preview

19. 加入圖片

為甚麼 Path 是 /images/...？

public/ 和 src/assets/ 有甚麼分別？

20. Code Blocks

JavaScript

TypeScript

Terminal Command

JSON

YAML

21. Root URL Redirect

22. Development、Build 和 Preview

Development

Build

Preview

23. Search

24. Dark / Light Theme

25. Language Switching

26. Deployment Overview

27. 網站日後可以怎樣成長？

28. 初學者常見錯誤

重複 H1

手動寫 Table of Contents

`public/`

`src/content/docs/`

`src/pages/`

`src/content.config.ts`

`astro.config.mjs`

`package.json`

`.nvmrc`

`README.md`

9. 認識 `content.config.ts`

`defineCollection()`

`docsLoader()`

`docsSchema()`

10. 認識 `astro.config.mjs`

`site`

`integrations`

`title`

`title`

`description`

`sidebar.label`

`sidebar.order`

17. `On this page` 是如何產生的？

為甚麼 Path 是 `/images/...`？

`public/` 和 `src/assets/` 有甚麼分別？

忘記 `sidebar.order`

忘記 `npm install`

修改 `dist/`

每加一篇文章都修改 `astro.config.mjs`