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