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

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

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

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

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

系統(tǒng)依賴

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

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

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

npm i -g @cloudbase/cli vuepress

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

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

mkdir tcb && cd tcb

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

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

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

vuepress dev

等待其編譯完成，打開瀏覽器，訪問(wèn) localhost:8080

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

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

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

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

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

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

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

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

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

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

你現(xiàn)在可以通過(guò)上傳文件手動(dòng)上傳一個(gè)文件測(cè)試，稍后，我們將會(huì)用云開發(fā) Cli 來(lái)完成上傳。

初始化云開發(fā) Cli

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

在命令行輸入如下代碼

tcb login

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

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

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

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

部署 VuePress

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

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

vuepress build

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

cd .vuepress/dist

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

tcb hosting:deploy ./ -e EnvID

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

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

訪問(wèn)

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

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

One More Thing

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

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