之前用過 Docsify + Serverless Framework 快速創建個人博客，雖然 docsify 也是基於 Vue，然而它是完全的運行時驅動，因此對 SEO 不夠友好。所以這次嘗試使用 VuePress 來搭建一個靜態網站，依然部署在 Serverless 架構上。
簡單介紹一下：
- VuePress：由兩部分組成，第一部分是一個極簡靜態網站生成器；另一個部分是為書寫技術文檔而優化的默認主題。每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也因此具有非常好的加載性能和搜索引擎優化（SEO）。同時，一旦頁面被加載，Vue 將接管這些靜態內容，並將其轉換成一個完整的單頁應用（SPA），其他頁面則會只在用戶瀏覽到的時候才按需加載。
- Serverless Framework：在 GitHub 上有三萬顆星，業界非常受歡迎的無服務器應用框架，開發者無需關心底層資源即可部署完整可用的 Serverless 應用架構。
接下來我們分三步進行：創建項目 → 配置 yml 文件 → 部署
▎工具準備
首先確保系統包含以下環境：
- Node.js (Node.js 版本需不低於 8.6，建議使用 10.0 及以上版本)
- Git
1. 安裝 Serverless Framework
<code>$ npm install -g serverless/<code>
2. 安裝 VuePress
<code>$ npm install -g vuepress/<code>
▎創建項目
<code># 創建項目目錄
mkdir vuepress-starter && cd vuepress-starter
# 新建一個 markdown 文件
echo '# Hello VuePress!' > README.md
# 開始寫作
vuepress dev .
# 構建靜態文件
vuepress build ./<code>
這時候可以看到 ./vuepress-starter 目錄下創建的 README.md 文檔，它會做為主頁內容渲染，直接編輯 docsify/README.md 就能更新網站內容。此時通過瀏覽器訪問 http://localhost:8080/ 即可本地預覽。
▎配置 yml 文件
在項目目錄下，創建 serverless.yml 文件：
<code>$ touch serverless.yml/<code>
將以下內容寫入上述的 yml 文件裡：
<code># serverless.yml
myvuepress:
component: "@serverless/tencent-website"
inputs:
code:
src: ./dist # Upload static files
index: index.html
error: 404.html
region: ap-guangzhou
bucketName: my-bucket/<code>
配置完成後，文件目錄如下：
<code>/vuepress-starter
├── .vuepress
| ├── dist
| | ├── 404.html
| | └── index.html
| └── serverless.yml
└── README.md/<code>
▎部署
通過 serverless 命令（可使用命令縮寫 sls ）進行部署，添加 --debug 參數查看部署詳情：
<code>$ sls --debug/<code>
如果你的賬號未 登陸 或 註冊 騰訊雲，可以直接通過微信掃描命令行中的二維碼，從而進行授權登陸和註冊。這也是我覺得特別方便的一個地方！
部署過程中，terminal 顯示信息示意：
<code>$ sls
（此處有張二維碼）
Please scan QR code login from wechat.
Wait login...
Login successful for TencentCloud.
myvuepress:
url: http://my-bucket-1256526400.cos-website.ap-guangzhou.myqcloud.com
env:
59s › myvuepress › done/<code>
訪問命令行輸出的 url，即可查看使用 Serverless Framework 部署的 VuePress 網站啦~
▎小結
部署過程中要注意，由於 VuePress 生成的 index.html 所在目錄默認隱藏，因此要在正確的目錄層級中創建 serverless.yml 文件，不然會導致部署失敗。
這次依然使用了騰訊雲 Serverless Framework 作為網站部署的工具，實在是因為太方便了。部署過程不到一分鐘，完全不用考慮雲上資源如何配置的問題！✌️
閱讀更多 Aceyclee 的文章
