云開發(fā) 靜態(tài)網(wǎng)站部署

云開發(fā)為開發(fā)者提供靜態(tài)網(wǎng)頁托管的能力，我們可以把靜態(tài)資源（HTML、CSS、JavaScript、字體等）放到云開發(fā)的對(duì)象存儲(chǔ) COS 里，這樣我們就可以無需域名和備案（云開發(fā)提供二級(jí)域名，但是建議綁定備案的域名），迅速完成網(wǎng)頁應(yīng)用的部署。靜態(tài)網(wǎng)頁托管，支持 HTTP 與 HTTPS 訪問，托管在云開發(fā)上的靜態(tài)網(wǎng)頁，均緩存在CDN 服務(wù)器中，我們還可以用Cloudbase Cli工具來部署文件到靜態(tài)托管里。

一、開通靜態(tài)網(wǎng)站托管

1、云開發(fā)環(huán)境開通按量付費(fèi)

只有付費(fèi)方式為按量付費(fèi)的云開發(fā)環(huán)境才能開通靜態(tài)網(wǎng)頁托管服務(wù)，預(yù)付費(fèi)方式（也就是包月型）環(huán)境不可開通。由小程序云開發(fā)創(chuàng)建的環(huán)境的按量付費(fèi)，我們可以去微信開發(fā)者工具的云開發(fā)控制臺(tái)的設(shè)置里去開通，開通按量付費(fèi)之后就不能再切回預(yù)付費(fèi)了，不過按量付費(fèi)更值得推薦。

按量付費(fèi)除了和預(yù)付費(fèi)具有相同的免費(fèi)額度之外，按量付費(fèi)還有以下四大優(yōu)勢(shì)：

• 數(shù)據(jù)庫(kù)連接數(shù)1000，幾萬人同時(shí)在線都沒有問題；也就是數(shù)據(jù)庫(kù)沒有性能限制；

• 可以開啟靜態(tài)網(wǎng)站托管服務(wù)，用它來搭建博客、無域名搭建小程序資源的管理后臺(tái)等以及可以開發(fā)其他復(fù)雜的網(wǎng)站；

• 按量付費(fèi)，付費(fèi)粒度更細(xì)，相比預(yù)付費(fèi)更劃算，我去算了一下價(jià)格，還是非常合理的；

• 支持資源包購(gòu)買云開發(fā)資源，CDN、云函數(shù)、數(shù)據(jù)庫(kù)、靜態(tài)網(wǎng)站都支持按資源包購(gòu)買，十分良心，非常劃算。

2、開通靜態(tài)網(wǎng)站托管

當(dāng)我們將小程序云開發(fā)的環(huán)境切換為按量付費(fèi)之后，我們可以去登錄騰訊云網(wǎng)頁的云開發(fā)控制臺(tái)，單擊對(duì)應(yīng)的環(huán)境名稱，來開通靜態(tài)網(wǎng)站托管服務(wù)。開通之后就可以看到文件管理與設(shè)置兩個(gè)標(biāo)簽頁，當(dāng)開通了靜態(tài)網(wǎng)站托管服務(wù)之后，會(huì)提供一個(gè)默認(rèn)的靜態(tài)網(wǎng)站域名：

https://你的環(huán)境id.tcloudbaseapp.com

這個(gè)域名支持 HTTP 與 HTTPS訪問，不過靜態(tài)托管會(huì)有默認(rèn)限速：10K，可以用于少數(shù)人訪問的管理后臺(tái)，而如果需要用于對(duì)外開放網(wǎng)站，建議綁定已經(jīng)備案了的域名。當(dāng)您不再需要靜態(tài)托管服務(wù)后，最好注銷靜態(tài)網(wǎng)站。否則靜態(tài)網(wǎng)站會(huì)持續(xù)產(chǎn)生存儲(chǔ)費(fèi)用。我們可以在網(wǎng)頁控制臺(tái)的統(tǒng)計(jì)分析頁面，查看靜態(tài)網(wǎng)站服務(wù)流量和存儲(chǔ)資源的消耗情況。

3、控制臺(tái)管理靜態(tài)托管

云開發(fā)靜態(tài)托管服務(wù)既可以使用控制臺(tái)進(jìn)行文件管理，還能使用 CLI 工具進(jìn)行文件管理。在網(wǎng)頁云開發(fā)控制臺(tái)里可以直接管理靜態(tài)網(wǎng)站，比如在文件管理標(biāo)簽頁，可以上傳、刪除文件，創(chuàng)建文件夾和批量上傳文件夾等操作。

比如我們上傳一個(gè)圖片如tcb.png，

而在設(shè)置里，則可以進(jìn)行靜態(tài)網(wǎng)站的域名、索引文檔的管理。索引文檔也就是靜態(tài)網(wǎng)站的首頁，是當(dāng)用戶對(duì)網(wǎng)站的根目錄或任何子目錄發(fā)出請(qǐng)求時(shí)返回的網(wǎng)頁，通常此頁面被命名為 index.html。而錯(cuò)誤文檔指訪問靜態(tài)網(wǎng)站出錯(cuò)后返回的頁面。

當(dāng)添加域名之后，系統(tǒng)會(huì)為您自動(dòng)分配一個(gè)以 .cdn.dnsv1.com 為后綴的 CNAME 域名，CNAME 域名不能直接訪問，需要在域名服務(wù)提供商處完成 CNAME 配置，配置生效后，托管服務(wù)方可對(duì)自定義域名生效。

二、CLI工具管理靜態(tài)網(wǎng)站

在開通靜態(tài)托管服務(wù)，以及CLoudbase CLI工具登錄的情況，我們可以用Cloudbase CLI工具來對(duì)靜態(tài)網(wǎng)站里面的文件進(jìn)行管理。

1、查看靜態(tài)網(wǎng)站信息

我們可以在終端輸入下面的命令來展示靜態(tài)網(wǎng)站的狀態(tài)，訪問域名等信息，其中xly-xrlur要替換成你的云開發(fā)環(huán)境的id

cloudbase hosting:detail -e xly-xrlur

要查看靜態(tài)網(wǎng)站存儲(chǔ)空間里有哪些文件，比如我們要查看環(huán)境ID為xly-xrlur的文件列表信息：

cloudbase hosting:list -e xly-xrlur

2、上傳文件/文件夾到指定目錄

我們可以使用下面的命令將本地電腦（項(xiàng)目根目錄的文件或文件夾）上傳到靜態(tài)網(wǎng)站的存儲(chǔ)空間中的指定路徑，如果不指定cloudPath時(shí)，會(huì)將項(xiàng)目根目錄下的所有文件上傳到存儲(chǔ)空間的根目錄。

cloudbase hosting:deploy localPath cloudPath -e envId

比如我們想將項(xiàng)目根目錄下的download文件夾里的內(nèi)容上傳到靜態(tài)網(wǎng)站存儲(chǔ)空間的public文件夾下：

cloudbase hosting:deploy ./download public -e xly-xrlur

或者將static 目錄下的 index.js 文件部署到 static/index.js

cloudbase hosting:deploy ./static/index.js static/index.js -e xly-xrlur

3、刪除文件

我們可以使用下面的命令刪除靜態(tài)網(wǎng)站的存儲(chǔ)空間中的文件或文件夾，只要掌握了網(wǎng)絡(luò)存儲(chǔ)空間的路徑的寫法就很容易掌握啦：

cloudbase hosting:delete cloudPath -e envId

三、靜態(tài)博客生成器

使用靜態(tài)博客生成器是搭建博客比較流行的一種方式，將博客的靜態(tài)網(wǎng)頁生成之后，也可以部署到云開發(fā)的靜態(tài)網(wǎng)站托管里。靜態(tài)博客生成器很多，比如有Gatsby、Jekyll、Hugo、Hexo、VuePress等等，這里以Hexo為例。Hexo 是一個(gè)快速、簡(jiǎn)潔且高效的博客框架，可以使用 Markdown（或其他渲染引擎）解析文章，而且還有豐富的博客主題可以選擇。

1、Hexo靜態(tài)博客的安裝與生成

首先我們?cè)诮K端輸入以下命令執(zhí)行 hexo 的全局安裝，

#全局安裝hexo
npm install hexo-cli -g


#檢測(cè)hexo是否安裝成功以及常用命令
hexo --version
hexo --help

安裝完成之后，在終端中使用 cd 命令進(jìn)入靜態(tài)網(wǎng)站托管項(xiàng)目所在的根目錄（這個(gè)操作在前面有說明），然后生成一個(gè)博客

#生成博客項(xiàng)目，這里的tcbblog為博客名稱，你可以任意修改
hexo init tcbblog


#命令行工具進(jìn)入博客項(xiàng)目
cd tcbblog


#安裝博客項(xiàng)目的依賴
npm install

執(zhí)行完以上命令之后，hexo博客就搭建完成了，那我們要如何才能看到效果呢，執(zhí)行以下命令之后，在本地電腦的瀏覽器輸入http://localhost:4000就能看到這個(gè)靜態(tài)博客的效果了：

hexo server
#如果你想中斷服務(wù)可以連續(xù)按兩次Ctrl+C

我們還可以修改博客的主題，比如Fluid 是基于 Hexo 的一款 Material Design 風(fēng)格的主題，具體的方法可以查看文檔。

怎么往Hexo生成的博客里添加文章內(nèi)容或者如何進(jìn)行一些自定義的配置呢，這些可以看Hexo的官方技術(shù)文檔。

2、將靜態(tài)博客部署到靜態(tài)存儲(chǔ)

要將靜態(tài)博客部署到靜態(tài)存儲(chǔ)里，需要先在終端執(zhí)行以下命令生成靜態(tài)的網(wǎng)站文件（其他靜態(tài)博客生成器也是一樣，這是靜態(tài)網(wǎng)站托管的核心），網(wǎng)站文件會(huì)被生成在public文件夾里：

#在終端執(zhí)行這個(gè)命令需要注意cd進(jìn)入tcbblog也就是博客項(xiàng)目的根目錄才行
hexo generate

接下來我們要做的就是將public文件夾里的網(wǎng)站文件上傳到靜態(tài)網(wǎng)站存儲(chǔ)的根目錄或二級(jí)子目錄里。

這里需要注意的是在終端執(zhí)行hexo命令要在博客項(xiàng)目的根目錄，上面的就是tcbblog，而要執(zhí)行cloudbase命令，則需要到云開發(fā)項(xiàng)目的根目錄，我們可以使用cd ..回退到上級(jí)目錄

結(jié)合上面的知識(shí)不難得出，我們可以讓終端進(jìn)入云開發(fā)項(xiàng)目的根目錄之后執(zhí)行以下命令，也就是將tcbblog文件夾的二級(jí)目錄public里面的所有文件都上傳到靜態(tài)存儲(chǔ)的blog文件夾里：

cloudbase hosting:deploy ./tcbblog/public blog -e xly-xrlur

然后我們就可以使用你的域名或靜態(tài)存儲(chǔ)域名/blog打開你的靜態(tài)博客了。

靜態(tài)網(wǎng)站托管與云開發(fā)本身其實(shí)并沒有非常直接的聯(lián)系，我們也可以在其他靜態(tài)網(wǎng)站托管比如Github Pages里以及在PHP、Java、Python等開發(fā)的網(wǎng)頁里使用云開發(fā)，也就是說云開發(fā)的SDK并不依賴靜態(tài)網(wǎng)站托管服務(wù)，基本上只要是網(wǎng)頁就可以使用Web端云開發(fā)的SDK。靜態(tài)托管服務(wù)只是云開發(fā)為了貫徹免服務(wù)器而提供的一項(xiàng)服務(wù)，在靜態(tài)托管的網(wǎng)頁里使用Web端SDK一樣也能讓靜態(tài)的網(wǎng)頁動(dòng)態(tài)起來，擁有操作云存儲(chǔ)、云數(shù)據(jù)庫(kù)等的能力。