之前用過 Docsify + Serverless Framework 快速創(chuàng)建個人博客系統(tǒng)派歌，雖然 docsify 也是基于 Vue弯囊，然而它是完全的運行時驅(qū)動，因此對 SEO 不夠友好胶果。所以這次嘗試使用 VuePress 來搭建一個靜態(tài)網(wǎng)站匾嘱，依然部署在 Serverless 架構(gòu)上。
簡單介紹一下：
- VuePress：由兩部分組成早抠，第一部分是一個極簡靜態(tài)網(wǎng)站生成器霎烙；另一個部分是為書寫技術(shù)文檔而優(yōu)化的默認主題。每一個由 VuePress 生成的頁面都帶有預(yù)渲染好的 HTML蕊连，也因此具有非常好的加載性能和搜索引擎優(yōu)化（SEO）悬垃。同時，一旦頁面被加載甘苍，Vue 將接管這些靜態(tài)內(nèi)容尝蠕，并將其轉(zhuǎn)換成一個完整的單頁應(yīng)用（SPA），其他頁面則會只在用戶瀏覽到的時候才按需加載载庭。
- Serverless Framework：在 GitHub 上有三萬顆星看彼，業(yè)界非常受歡迎的無服務(wù)器應(yīng)用框架，開發(fā)者無需關(guān)心底層資源即可部署完整可用的 Serverless 應(yīng)用架構(gòu)囚聚。
接下來我們分三步進行：創(chuàng)建項目 → 配置 yml 文件 → 部署
▎工具準備
首先確保系統(tǒng)包含以下環(huán)境：
1. 安裝 Serverless Framework
$ npm install -g serverless
2. 安裝 docsify
$ npm install -g vuepress
▎創(chuàng)建項目
# 創(chuàng)建項目目錄
mkdir vuepress-starter && cd vuepress-starter
# 新建一個 markdown 文件
echo '# Hello VuePress!' > README.md
# 開始寫作
vuepress dev .
# 構(gòu)建靜態(tài)文件
vuepress build .
這時候可以看到 ./vuepress-starter 目錄下創(chuàng)建的 README.md 文檔，它會做為主頁內(nèi)容渲染顽铸，直接編輯 docsify/README.md 就能更新網(wǎng)站內(nèi)容茁计。此時通過瀏覽器訪問 http://localhost:8080/ 即可本地預(yù)覽。
▎配置 yml 文件
在項目目錄下跋破，創(chuàng)建 serverless.yml 文件：
$ touch serverless.yml
將以下內(nèi)容寫入上述的 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 參數(shù)查看部署詳情：
$ sls --debug
如果你的賬號未 登陸 或 注冊 騰訊云毒返，可以直接通過微信掃描命令行中的二維碼租幕，從而進行授權(quán)登陸和注冊。這也是我覺得特別方便的一個地方拧簸！
部署過程中劲绪，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 網(wǎng)站啦~
▎小結(jié)
部署過程中要注意盆赤，由于 VuePress 生成的 index.html 所在目錄默認隱藏贾富，因此要在正確的目錄層級中創(chuàng)建 serverless.yml 文件，不然會導(dǎo)致部署失敗牺六。
這次依然使用了騰訊云 Serverless Framework 作為網(wǎng)站部署的工具颤枪，實在是因為太方便了。部署過程不到一分鐘淑际，完全不用考慮云上資源如何配置的問題畏纲！??
傳送門：
- GitHub: github.com/serverless
- 官網(wǎng)：serverless.com
歡迎訪問：Serverless 中文網(wǎng)扇住，您可以在 最佳實踐 里體驗更多關(guān)于 Serverless 應(yīng)用的開發(fā)！
