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

云開發(fā)為開發(fā)者提供靜態(tài)網(wǎng)頁托管的能力，我們可以把靜態(tài)資源（HTML、CSS、JavaScript、字體等）放到云開發(fā)的對象存儲 COS 里，這樣我們就可以無需域名和備案（云開發(fā)提供二級域名，但是建議綁定備案的域名），迅速完成網(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ā)環(huán)境才能開通靜態(tài)網(wǎng)頁托管服務(wù)，預(yù)付費方式（也就是包月型）環(huán)境不可開通。由小程序云開發(fā)創(chuàng)建的環(huán)境的按量付費，我們可以去微信開發(fā)者工具的云開發(fā)控制臺的設(shè)置里去開通，開通按量付費之后就不能再切回預(yù)付費了，不過按量付費更值得推薦。

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

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

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

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

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

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

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

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

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

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

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

比如我們上傳一個圖片如tcb.png，

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

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

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

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

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)站存儲空間里有哪些文件，比如我們要查看環(huán)境ID為xly-xrlur的文件列表信息：

cloudbase hosting:list -e xly-xrlur

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

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

cloudbase hosting:deploy localPath cloudPath -e envId

比如我們想將項目根目錄下的download文件夾里的內(nèi)容上傳到靜態(tài)網(wǎng)站存儲空間的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)站的存儲空間中的文件或文件夾，只要掌握了網(wǎng)絡(luò)存儲空間的路徑的寫法就很容易掌握啦：

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 是一個快速、簡潔且高效的博客框架，可以使用 Markdown（或其他渲染引擎）解析文章，而且還有豐富的博客主題可以選擇。

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

首先我們在終端輸入以下命令執(zhí)行 hexo 的全局安裝，

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


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

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

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


#命令行工具進入博客項目
cd tcbblog


#安裝博客項目的依賴
npm install

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

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

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

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

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

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

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

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

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

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

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

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

靜態(tài)網(wǎng)站托管與云開發(fā)本身其實并沒有非常直接的聯(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ù)器而提供的一項服務(wù)，在靜態(tài)托管的網(wǎng)頁里使用Web端SDK一樣也能讓靜態(tài)的網(wǎng)頁動態(tài)起來，擁有操作云存儲、云數(shù)據(jù)庫等的能力。