嗨，大家好！今天想跟大家分享，我最近是怎麼用 VitePress 來搭建我的個人部落格。

一開始可能會覺得有點複雜，但其實只要抓到幾個訣竅，您也能輕鬆上手！

為什麼選擇VitePress？

在眾多靜態網站生成器中，我選擇VitePress主要有幾個原因：

• 輕巧快速：基於 Vite，編譯速度非常快，開發體驗極佳。
• Markdown友好：內容主要用Markdown撰寫，對於寫文章的人來說非常直觀。
• Vue生態系：如果您熟悉Vue.js，那麼客製化和擴充功能會非常方便。
• 文件導向：雖然是文件工具，但拿來寫部落格意外地好用，特別是那些有條理的技術文章。

新手簡易教學：如何在 VitePress 發表一篇部落格文章

首先，您需要在您的專案中找到存放部落格文章的資料夾。以我們的設定為例，就是 docs/blog/。

您可以在這個資料夾中建立一個新的Markdown檔案，檔名建議包含日期，例如 2025-05-25-我的第一篇vitepress部落格.md。

步驟 1：打開 blog 資料夾

1. 在 GitHub 網頁上，進入這個專案（holybear.me）。
2. 點進 /blog 資料夾。

步驟 2：新增一個 Markdown 檔案

1. 點選右上角的「Add file」>「Create new file」。
2. 檔名格式建議：年份-月份-日期-標題.md，例如：2025-06-11-我的第一篇文章.md

步驟 3：複製範本填寫文章

每篇 VitePress 的 Markdown 文章開頭，都必須包含一段稱為「Front Matter」的 YAML 區塊。

這段區塊會用來定義文章的標題、日期、描述等重要資訊。

直接複製下面這段範本，把裡面的內容改成自己的文章：

---
title: 文章標題（必填）
listDate: 2025-06-11（必填，用於文章列表排序，請用今天日期）
description: 文章簡介（可簡短一句話）
image: 代表圖片網址（選填）
tag:
  - 標籤1
  - 標籤2
category:
  - 分類名稱
---
這裡開始寫你的文章內容。

## 文章小標題（可有多個）

你想分享的內容。

Front Matter（最上面那塊用 --- 包起來的區域）一定要有，尤其是 title 與 listDate。

步驟 4：寫完後，滑到頁面下方，填寫提交說明（Commit message），然後按「Commit new file」

這樣就完成一篇新文章啦！部屬完成後就會顯示在網站上。

---

常見新手問題

• Q: Front Matter 那一塊要怎麼填？
  A: 按照範本，title 跟 listDate 一定要有，其他可以照範例填寫，也可以暫時留空或刪除。

• Q: 文章沒出現在網站？
  A: 可能是格式錯誤，或是檔名、Front Matter 有誤，請再檢查一次。

加入更多文章元素

你如果想要讓文章更為豐富，比如加入段落、粗體內容、圖片、表格等，你可以參考以下範例！

---
title: 您的文章標題
date: 2025-05-25T14:30:00+08:00（文章本身會自己辨識發文時的日期與時間，可不填，不填時請將此項直接刪除，建議僅在需要時填寫）
listDate: 2025-05-25（必填，這會影響在文章列表的排序）
description: 您的文章簡短描述
image: 要顯示在文章列表的圖片網址
tag:
 - 標籤(可以有很多個)
category:
 - 文章分類(會顯示在文章標題最前方)
---

您的文章內容。

## 您的h2段落標題1

加入粗體內容：

* **粗體內容1**：文章內容。
* **粗體內容2**：文章內容。
* **粗體內容3**：文章內容。
* **粗體內容4**：文章內容。

## 您的h2段落標題2（焦點內容示範）

您的文章內容 `焦點內容`。

### 您的h3段落標題（表格示範）

| ![](圖片網址1) | ![](圖片網址2) |
|:-------------:|:-------------:|
| 說明1         | 說明2         |

### 您的h3段落標題（圖片示範）

![圖片名稱](圖片網址)
<small style="display: block; text-align: center; color: #777;">圖片說明。</small>