云開發(fā) VuePress 文檔部署

VuePress 是社區(qū)廣受好評的文檔插件，不少的項(xiàng)目都開始使用 VuePress 來構(gòu)建團(tuán)隊的文檔、產(chǎn)品的官網(wǎng)?，F(xiàn)在，你也可以在云開發(fā)上托管你的 VuePress 文檔啦！不需要再忍受中美網(wǎng)絡(luò)之間的波動導(dǎo)致的網(wǎng)絡(luò)性能差和速度慢的問題啦！Let's Go

云開發(fā)（CloudBase）是一款云端一體化的產(chǎn)品方案 ，采用 serverless 架構(gòu)，免環(huán)境搭建等運(yùn)維事務(wù) ，支持一云多端，助力快速構(gòu)建小程序、Web應(yīng)用、移動應(yīng)用。

云開發(fā)靜態(tài)網(wǎng)站托管支持通過云開發(fā)SDK調(diào)用服務(wù)端資源如：云函數(shù)、云存儲、云數(shù)據(jù)庫等，從而將靜態(tài)網(wǎng)站擴(kuò)展為全棧網(wǎng)站

無論是騰訊云·云開發(fā)用戶，還是小程序·云開發(fā)用戶，只要開通按量付費(fèi)，即可享有云開發(fā)靜態(tài)網(wǎng)站托管服務(wù)。

系統(tǒng)依賴

在進(jìn)行后續(xù)的內(nèi)容前，請先確保你的電腦中安裝了 Node.js 運(yùn)行環(huán)境。如果沒有安裝，可以訪問 nodejs.org 下載安裝。

安裝云開發(fā) cli 工具 和 VuePresss

執(zhí)行如下命令，安裝云開發(fā) cli 工具以及 VuePress

npm i -g @cloudbase/cli vuepress

在本地初始化一個 VuePress 項(xiàng)目

首先，在本地創(chuàng)建一個目錄，這里以 tcb 為例

mkdir tcb && cd tcb

進(jìn)入到 tcb 目錄后，創(chuàng)建一個默認(rèn)的 hello world 文件

echo "# Hello TCB & Vuepress" > README.md

然后，執(zhí)行命令，啟動，并查看效果。

vuepress dev

等待其編譯完成，打開瀏覽器，訪問 localhost:8080

可以看到剛剛創(chuàng)建的文檔產(chǎn)生的頁面

這樣，就說明我們完成項(xiàng)目的初始化了。

創(chuàng)建一個云開發(fā)環(huán)境

完成了本地的 Vuepress 建設(shè)，接下來我們來創(chuàng)建一個云開發(fā)環(huán)境，用來部署 VuePresss 。打開騰訊云控制臺，在產(chǎn)品中找到云開發(fā)

進(jìn)入到云開發(fā)的管理控制臺，點(diǎn)擊新建環(huán)境，新建一個環(huán)境來進(jìn)行部署

新建一個環(huán)境，名為 docs，并選擇按量計費(fèi)，開通環(huán)境

在開通環(huán)境以后， 記住你的環(huán)境 ID，這個 ID 后續(xù)我們會用到。

創(chuàng)建完成后，點(diǎn)擊環(huán)境，進(jìn)入到環(huán)境的管理頁面。點(diǎn)擊左側(cè)菜單欄中的「靜態(tài)網(wǎng)站」

并在靜態(tài)網(wǎng)站頁面開通功能

當(dāng)你看到這樣的界面時，就說明已經(jīng)開通好了。

你現(xiàn)在可以通過上傳文件手動上傳一個文件測試，稍后，我們將會用云開發(fā) Cli 來完成上傳。

初始化云開發(fā) Cli

完成了云開發(fā)環(huán)境的配置后， 我們需要初始化一下云開發(fā) cli ，從而實(shí)現(xiàn)借助 cli 來上傳頁面（當(dāng)然， 也可以通過網(wǎng)頁端直接上傳，但 VuePress 如果文檔頁面較多，還是使用 Cli 上傳更簡單）

在命令行輸入如下代碼

tcb login

會提醒你需要在網(wǎng)頁中授權(quán)

在彈出的頁面確認(rèn)授權(quán)

確認(rèn)授權(quán)后，你會看到控制臺輸出相應(yīng)的命令

這樣，你的云開發(fā) cli 就初始化好了。 接下來，就可以進(jìn)入到最后一個環(huán)節(jié)，上傳部署 VuePress 了。

部署 VuePress

接下來，我們來構(gòu)建，并部署 VuePress。

回到我們剛剛創(chuàng)建的 VuePress 的目錄，執(zhí)行命令構(gòu)建靜態(tài)頁面

vuepress build

構(gòu)建完成后，會提醒你，生成的靜態(tài)文件在 .vuepress/dist

cd .vuepress/dist

然后執(zhí)行命令上傳文件，記得將這里的 EnvID 替換為你自己的環(huán)境的環(huán)境 ID。

tcb hosting:deploy ./ -e EnvID

稍等片刻，文件就上傳好了

此時，你在云開發(fā)管理控制臺也可以看到這些文件，說明成功上傳。

訪問

點(diǎn)擊設(shè)置，進(jìn)入設(shè)置頁面，可以找到默認(rèn)的的域名，點(diǎn)擊域名，就可以看到你剛剛部署的環(huán)境啦。

比如，我的部署以后是這樣的

One More Thing

只需簡單的幾步，你就可以輕松實(shí)現(xiàn)將 VuePress 部署到云開發(fā)上，無需再忍受 Github Pages 的龜速啦！還不快遷移？

不僅如此，如果你是一個自動化愛好者， 還可以試著把云開發(fā) Cli 配置到你的 CI 環(huán)境中，實(shí)現(xiàn)自動部署哦～