冷門卻有趣的 VuePress

靜態網站生成器的選擇非常的多，比較常聽到用來產生部落格網站的可能有 Hexo 、 Gatsby.js ，其實也都是很棒的靜態網站生成器，相關的教學資源也很多，但在一一嘗試過後我個人偏好使用 VuePress。

下面就來分享一下我覺得 VuePress 比較有趣的地方吧！

VuePress 也是 SPA 框架

SPA 是 Single Page Application 的縮寫，是一種現在很流行的網頁技術，能夠讓網站在做頁面切換的時候，幾乎不會出現延遲與白畫面，可以提供很棒的使用者體驗。

但 SPA 什麼都好，就是有一個很麻煩的缺點......使用 SPA 技術的網站，很容易讓各大搜尋引擎或社群媒體的爬蟲爬不到網站內容，也難以分辨不同頁面間的差異，這對作為行銷或展示曝光用的網站來說可是致命傷啊！

VuePress 則會為每個頁面預渲染生成靜態的 HTML，而在每個頁面被加載的時候又搭配 SPA 的架構模式來運行，因此既有 SPA 的使用者體驗，卻沒有 SPA 最困擾的 SEO 爬蟲問題。

約定大於配置

「約定大於配置」（convention over configuration），是一種軟體開發的設計模式，目的是在減少開發人員需要做的決定，既有簡單的好處，而又不失靈活性。

簡單來說就是：如果沒有特殊的需求，只要稍微了解一下專案的結構就可以開始專注於內容主題的創作。

而且 VuePress 是使用 Vue 對「主題」進行開發，如果是曾經使用過 Vue 的朋友在接觸 VuePress 之後會發現，在「約定大於配置」的這個概念之下，幾乎沒有學習成本。

缺點是目前沒有 CLI（Command-Line Interface），因此若想快速啟動只能選擇 Clone 其他開發者的範本

使用 Markdown 檔來書寫與管理內容

使用 Markdown 格式的 .md 檔來書寫與管理內容都相當的方便，也有許多靜態網站生成器使用 .md 文件來進行內容的撰寫與管理，透過編譯來將 .md 檔編譯成為 HTML 文件。

但 VuePress 其中一個特色就在這邊了， VuePress 會在將 .md 編譯成 HTML 文件之前，先編譯成為 Vue 組件，再經由 Vue Loader 編譯成為 HTML 文件。

正因為多了這一道手續，讓我們可以在 Markdown 中使用預先編寫好的 Vue 前端組件，讓頁面的建構不只是純粹的圖文，完全可以依照需求設計出互動性更高的頁面。

主題使用及開發

而 VuePress 預設的主題，其實是偏向作為文件網站使用的，畢竟 VuePress 一開始開發的動機，就是為了方便 Vue 生態系各項工具的文件網站建立。

但這不代表只能使用那一成不變的風格，我們在使用上不僅可以透過 npm 來安裝喜歡的主題，也可以自行開發主題來使用。

簡介的部分告一個段落了，接下來的章節就開始進入專案架構的說明囉！