攔截源頭

• 發現管道：尋找 Side Project 產品頁解決方案時意外發現
• 攔截原因：原本想用 Next.js 做產品頁，但感覺太重了。搜尋 "lightweight landing page generator" 時看到有人推薦 VitePress，發現它不只能做文檔，做產品頁也很適合！

為什麼不用其他方案

開始動手前，我列了一下手邊的選擇：

• Next.js：功能強大沒錯，但我只需要靜態頁面，不需要 SSR、API Routes 這些功能。感覺像是開坦克去買菜。
• Gatsby：之前用過，GraphQL 是很酷，但對於簡單的產品頁來說，設定太複雜了。
• Astro：其實這是第二選擇，但我對 Vue 生態比較熟悉，而 VitePress 是基於 Vue 的。
• 純 HTML + CSS：手刻沒有元件化的頁面太痛苦。

結果在某個討論串看到有人說：「我用 VitePress 做產品頁」。咦？文檔工具做產品頁？這引起了我的好奇。

技術初探

• 官方定義：VitePress 是 Vite 和 Vue 驅動的靜態網站生成器，專為建立快速、以內容為中心的網站而設計。
• 核心賣點：
  • 基於 Vite，開發體驗極速（HMR 真的快）
  • 預設主題乾淨漂亮，不用從零開始
  • Markdown 中心，寫內容超方便
  • 支援 Vue 元件，可以高度客製化
  • 構建出來的是純靜態檔案，部署簡單
• 適用場景：技術文檔、部落格、產品介紹頁、個人網站

實戰使用

快速安裝

# 使用 npm
npm add -D vitepress

# 初始化（選擇最小化設定）
npx vitepress init

跑完 init 會問你一些問題，我都選最簡單的選項，因為大部分文檔功能用不到。

Hello World - 改造首頁

預設的首頁其實就很像產品頁了，稍微改一下 index.md：

可以請 AI 協助產生～

---
layout: home

hero:
  name: "超級待辦事項"
  text: "讓你不再忘記任何事"
  tagline: "簡單、快速、永遠免費的待辦事項管理工具"
  image:
    src: /hero.png
    alt: Product Screenshot
  actions:
    - theme: brand
      text: 立即開始
      link: /get-started
    - theme: alt
      text: 查看功能
      link: /features

features:
  - icon: 🚀
    title: 極速同步
    details: 所有裝置即時同步，永遠不會遺失資料
  - icon: 🎨
    title: 美觀介面
    details: 精心設計的使用介面，讓管理待辦事項成為享受
  - icon: 🔒
    title: 隱私優先
    details: 你的資料只屬於你，我們不會查看或分享

---

跑 npm run docs:dev 看一下，哇，這不就是個產品頁嗎！

實際應用 - 關鍵改造點

1. 移除文檔的痕跡

// .vitepress/config.js
export default {
  title: '超級待辦事項',
  description: '讓你不再忘記任何事',
  themeConfig: {
    // 關掉側邊欄
    sidebar: false,
    
    // 自訂導航
    nav: [
      { text: '功能', link: '/features' },
      { text: '定價', link: '/pricing' },
      { text: '部落格', link: '/blog/' },
      { text: '登入', link: 'https://app.example.com' }
    ],
    
    // 改掉 footer
    footer: {
      message: '超級待辦事項',
      copyright: '隱私權政策 | 服務條款'
    }
  }
}

2. 加入自訂 Vue 元件

最酷的是可以在 Markdown 中直接用 Vue 元件！建立 .vitepress/components/PricingTable.vue：

<template>
  <div class="pricing-container">
    <div class="price-card" v-for="plan in plans">
      <h3>{{ [plan.name](http://plan.name) }}</h3>
      <div class="price">{{ plan.price }}</div>
      <ul>
        <li v-for="feature in plan.features">{{ feature }}</li>
      </ul>
      <button>{{ plan.cta }}</button>
    </div>
  </div>
</template>

<script setup>
const plans = [
  {
    name: '免費版',
    price: '$0',
    features: ['無限待辦事項', '基本同步', 'Web 版本'],
    cta: '開始使用'
  },
  // ... 其他方案
]
</script>

然後在 pricing.md 中使用：

# 選擇適合你的方案

<PricingTable />

關鍵設定

// .vitepress/config.js 產品頁常用設定
export default {
  // SEO 相關
  head: [
    ['meta', { property: 'og:title', content: '超級待辦事項' }],
    ['meta', { property: 'og:description', content: '讓你不再忘記任何事' }],
    ['link', { rel: 'icon', href: '/favicon.ico' }]
  ],
  
  // 移除 .html 後綴
  cleanUrls: true,
  
  // 自訂主題色
  themeConfig: {
    colorMode: 'dark', // 預設深色模式很潮
  }
}

踩坑筆記

• 遇到的問題：預設的 CSS 變數太「文檔風」，需要覆寫一堆顏色

• 解決方法：在 .vitepress/theme/custom.css 中覆寫：

  :root {
    --vp-c-brand: #646cff;
    --vp-c-brand-light: #747bff;
    --vp-button-brand-bg: var(--vp-c-brand);
    --vp-home-hero-name-color: transparent;
  }
  

• 注意事項：

  1. 沒有內建表單功能，要嘛用第三方服務（Formspree），要嘛用 Netlify Forms
  2. 圖片最佳化要自己處理，它不像 Next.js 有 Image 元件
  3. 如果要加 Google Analytics，要在 head 裡面手動加

記憶碼摘要

技術：VitePress
分類：靜態網站生成器 / 文檔框架
難度：⭐⭐☆☆☆
實用度：⭐⭐⭐⭐☆
一句話：把文檔框架拿來做產品頁，意外的合適
關鍵指令：npx vitepress init
適用情境：需要快速建立產品頁、部落格、文檔網站

結語

花了一小時把 VitePress 改造成產品頁，比預期順利很多。它讓我想到一個道理：工具的價值不在於它被設計來做什麼，而在於它能幫你解決什麼問題。

VitePress 雖然定位是文檔工具，但它的「靜態網站生成」本質，加上 Vue 的靈活性，反而讓它成為快速建立產品頁的好選擇。特別是當你：

• 熟悉 Vue 生態系統
• 需要快速產出
• 不想處理複雜的設定
• 喜歡用 Markdown 寫內容

下次要做產品頁，我會直接從 VitePress 開始，不用再繞一圈評估各種框架了。