[譯]VuePress - 基於Vue的靜態網站生成器

4月12日，Vue.js的創始人尤雨溪大大在twitter上發佈了一個全新的基於Vue的靜態網站生成器-，這對於廣大Vue愛好者來講無疑是一個好消息嚕！

Vue與SEO搜索引擎優化

SEO (Search Engine Optimization)-對於開發者來講是一項必不可少的技能，尤爲是前端的同窗們。好比在html文件頭部加上網站的關鍵字keywords，以及網站描述description，再到正確的使用html標籤等，這些在傳統的服務端渲染頁面的模式下，就妥妥的足夠了。
可是隨着前端技術的不斷髮展壯大，先後端分離開發模式的大行其道，愈來愈多的前端開始使用Vue等MVVM模型的框架進行開發，這種數據驅動，動態渲染的方式，對於搜索引擎爬蟲來講是很是不友好的，每每網站的內容很難被正確收錄，因此在pc端頁面大部分仍然採用服務端渲染的方式。

Vue與SSR服務端渲染

Vue結合SSR服務端渲染就是對seo進行優化的一種解決方案，它的原理就是利用webpack和node.js將Vue生成的html文件發送給服務器，而後再由服務器渲染出來。這樣作就能渲染正確的html文件，達到搜索引擎的優化，可是缺點也有一些，他要求前端開發者必須瞭解一些node語法，同時也加劇了服務器渲染的壓力，開銷較大。

---

如下內容來自官方文檔 vuepress.vuejs.org

什麼是VuePress

VuePress由兩部分組成：一個基於Vue的輕量級靜態網站生成器，以及爲編寫技術文檔而優化的默認主題。 它是爲了知足Vue本身的子項目文檔的需求而建立的。
VuePress爲每個由它生成的頁面提供預加載的html，不只加載速度極佳，同時對seo很是友好。一旦頁面被加載以後，Vue就全面接管全部的靜態內容，使其變成一個徹底的SPA應用，其餘的頁面也會在用戶使用導航進入的時候來按需加載。

VuePress是怎樣運做的

一個VuePress應用實際上就是基於Vue、VueRouter以及webpack,若是你之前就用過vue,那麼當你在用VuePress開發或者定製本身的主題的時候，你會發現使用體驗幾乎是一毛同樣~你甚至能夠用Vue DevTools來debug你的定製主題！
在build的過程當中，VuePress會經過建立一個服務端渲染的版本，並訪問每個路由來渲染相關的html。這種方法是來自Nuxt的nuxt generate命令,和其餘項目如Gatsby的啓發。
每一個markdown文件都被編譯爲HTML，而後做爲Vue組件的模板進行處理。這樣你能夠在markdown文件中直接使用Vue，這在須要嵌入動態內容的時候很是有用。

VuePress特性

• 內置的markdown擴展專爲技術文檔優化
• 能夠在markdown文件中直接使用vue
• vue驅動的可定製畫主題
• 支持PWA - Progressive Web App（漸進式網頁應用程序）
• 集成Google Analytics

• 一個默認的VuePress包括：

  1. 響應式佈局
  2. 可選的主頁
  3. 一個簡單的頭部搜索組件
  4. 可定製的導航欄和側邊欄
  5. 自動生成的GitHub連接和頁面編輯連接

開始使用VuePress

全局使用

# install globally
npm install -g vuepress

# create a markdown file
echo "# Hello VuePress!" > README.md

# start writing
vuepress dev .

# build
vuepress build .

在現有項目中安裝

若是你已經有一個項目，能夠將VuePress做爲本地依賴進行安裝，這種方式一樣支持使用CI或Netlify等服務在推送時自動部署。

# install as a local dependency
npm install -D vuepress

# create a docs directory
mkdir docs
# create a markdown file
echo "# Hello VuePress!" > docs/README.md

# start writing
npx vuepress dev docs

也能夠直接在package.json中加入：

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

而後執行下面的命令行來運行項目

npm run docs:dev

默認狀況下，構建的文件將位於.vuepress / dist中，也能夠經過.vuepress / config.js中的dest字段進行配置。構建的文件能夠部署到任何靜態文件服務器。

---

咳咳，今天的翻譯先進行到這裏，要睡覺了！明天來一發試試~night~