Day4 - Astro Series: Hello Astro World

Astro 系列文第四日：基础指令与设置

@ Astro

一個漂亮的漸層背景上面有一句標題：「基礎指令與設定」

前言

前面建構了一個全新的 Astro 專案，並說明了專案的大致架構。接著開始從 Astro 命令列介面與如何設置 astro.config 檔案說起。

Astro CLI

你可以使用自己喜愛的套件管理器來執行 Astro ，不管是 npm、pnpm、yarn 甚至是 bun🔗！以下是大致上 Astro 具備的 CLI 指令，實際上常用的指令除了： dev 、build、preview 之外並不多，因此有需要時再查閱文件🔗即可。

Terminal window
astro [command] [...flags]


   Commands
                add  添加集成插件
              build  构建项目
              check  检查项目
                dev  打开开发服务器
               docs  在浏览器中打开官方文档网站
               info  显示当前项目的设置
            preview  在本地预览
               sync  生成 collection 类型
          telemetry  匿名官方数据收集


   Global Flags
    --config <path>  配置文件路径
      --root <path>  配置项目根目录路径
       --site <url>  配置站点网址
  --base <pathname>  配置站点 base 路径
          --verbose  启用完整日志
           --silent  关闭日志
          --version  显示版本
             --help  显示帮助信息

設置 Astro

Astro 在執行時會自動找尋 astro.config 檔案，如果找尋不到便會使用預設設定。推薦在設定檔中使用 defineConfig() 助手函式可以為 IDE 提供代碼提示：

import { defineConfig } from 'astro/config';


export default defineConfig({
  // 在此设置...
});

同樣大多數設定查閱文件🔗即可，以下是一些可以特別留意的設定屬性：

頂層選項🔗

各式各樣的路徑路徑設置與功能的選項。

建構設定🔗

一切與 Astro 建構時相關的設定，如輸出時的檔案架構、檔案前墜……等。

伺服器設定🔗

在此設置伺服器相關的設定，像是位址、Port 或表頭。

圖片設定🔗

Astro 官方預設提供自動化圖片處理是透過 Sharp🔗 ，在此可以設置圖片處理相關屬性。

Markdown 設定🔗

Astro 完整支援 Markdown 並且預設整合了不同的套件，像是代碼高光功能或 GitHub 風格的 Markdown 等，可以在此設置，並且也能擴充 remark🔗 或 rehype🔗 插件。

{
  "markdown": {}
}

整合插件 Integrations🔗

Astro 提供插件來客製化擴充更多框架、函示庫或功能，在 integrations 屬性中引入要整合的插件。未來章節將會有獨立章節介紹如何撰寫不同 UI 框架到 Astro 當中。

import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
{
  // 示例：添加 React + Tailwind 支持
  integrations: [react(), tailwind()];
}

延伸閱讀