繁體中文

English

繁體中文

English

Appearance

如何設置 VitePress 並部署到 Firebase ​

步驟 1：設置您的開發環境 ​

  1. 安裝 Node.js：

    • 訪問 Node.js 官方網站 並下載最新的 LTS 版本。
    • 安裝 Node.js，這也會安裝 npm（Node Package Manager）。

  2. 安裝 Git：

    • 前往 Git 官方網站 並下載適用於您的操作系統的安裝程序。
    • 使用默認選項安裝 Git。

  3. 開發環境

步驟 2：創建一個新的 VitePress 項目 ​

  1. 打開終端或命令提示符：

    • 在 Windows 上：按 Win + R，輸入 cmd，然後按 Enter。
    • 在 Mac/Linux 上：打開您的終端。

  2. 為您的項目創建一個新目錄：

    bash
    mkdir my-vitepress-site
cd my-vitepress-site

  3. 初始化一個 VitePress 項目：

    bash
    npm init vitepress@latest .
    • 選擇一個項目名稱（您可以直接按 Enter 使用默認名稱）。
    • 按照提示操作。

  4. 安裝 VitePress 依賴：

    bash
    npm install

步驟 3：在本地運行您的 VitePress 站點 ​

  1. 啟動開發服務器：

    bash
    npm run docs:dev
    • 此命令將啟動一個本地服務器。打開您的瀏覽器並訪問 http://localhost:5173 以查看您的 VitePress 站點。

  2. 編輯您的站點：

    • 前往 docs 文件夾並編輯 index.md 文件以自定義您的主頁。

步驟 4：準備部署到 Firebase ​

  1. 安裝 Firebase CLI：

    • 打開您的終端並運行：
    bash
    npm install -g firebase-tools

  2. 登錄 Firebase：

    bash
    firebase login
    • 按照說明登錄到您的 Google 帳戶。

  3. 在您的項目中初始化 Firebase：

    bash
    firebase init
    • 選擇 "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys."
    • 選擇您在 Firebase 控制台創建的項目或創建一個新項目。
    • 設置 the public directory to docs/.vitepress/dist.
    • Configure it as a single-page app (yes).
    • 如果被問到，不要覆蓋 index.html。

步驟 5：構建並部署您的站點 ​

  1. 構建您的 VitePress 站點：

    bash
    npm run docs:build
    • 此命令會在 docs/.vitepress/dist 目錄中生成您的站點的靜態版本。

  2. 部署到 Firebase：

    bash
    firebase deploy
    • Firebase 會部署您的站點，您將獲得一個 URL 來查看您的在線站點。

步驟 6：更新並重新部署 ​

每當您對站點進行更改時：

  1. 重新構建您的站點：

    bash
    npm run docs:build

  2. 重新部署到 Firebase：

    bash
    firebase deploy

就是這樣！您的 VitePress 站點現在已經在 Firebase Hosting 上線了。隨著您對 Web 開發越來越熟悉，您可以開始探索 HTML、CSS 和更高級的 VitePress 配置。

不同的排版 ​

在vitepress中預設的不同排版

參考資料 ​

vitepress官方網站