基于騰訊云COS對(duì)象存儲(chǔ)部署hexo博客并實(shí)現(xiàn)一鍵部署

本文首發(fā)自作者個(gè)人博客werty.cn , 轉(zhuǎn)載請(qǐng)注明出處， 原文：基于騰訊云COS對(duì)象存儲(chǔ)部署hexo博客并實(shí)現(xiàn)一鍵部署

前言

Hexo 是一個(gè)快速、簡(jiǎn)潔且高效的博客框架篡悟。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)斟赚，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁(yè)镐侯〔蠹蹋基于Hexo 我們可以很快的將本地的markdown文件轉(zhuǎn)為炫酷的個(gè)人博客頁(yè)面呵燕，對(duì)于喜歡使用markdown記錄書寫的開發(fā)者來(lái)說(shuō)提供了極大的便利棠绘。mark一時(shí)爽，一直mark一直爽~~

靜態(tài)網(wǎng)站是指只包含靜態(tài)內(nèi)容（如 HTML）或客戶端腳本的網(wǎng)站再扭，而動(dòng)態(tài)網(wǎng)站的內(nèi)容包含諸如 PHP氧苍、JSP 或 ASP.NET 等服務(wù)器端腳本，依賴服務(wù)器端處理泛范。

目前主流的對(duì)象存儲(chǔ)服務(wù)如AWS S3,阿里云 OSS, 騰訊云COS等均支持部署靜態(tài)網(wǎng)站让虐，依托于對(duì)象存儲(chǔ)帶來(lái)的高可用和低成本，我們可以很容易的以較低的成本搭建出一個(gè)基于Serverless架構(gòu)的高可用的個(gè)人博客網(wǎng)站罢荡。對(duì)于一般訪問(wèn)量的個(gè)人博客而言澄干，在一些云服務(wù)商平臺(tái)甚至可以實(shí)現(xiàn)免費(fèi)基于對(duì)象存儲(chǔ)建站，當(dāng)然國(guó)內(nèi)提供免費(fèi)額度的供應(yīng)商還是相對(duì)較少柠傍，即使如此，花費(fèi)的成本相較于使用云主機(jī)而言也算的上物美價(jià)廉了辩稽。

簡(jiǎn)單計(jì)算一下使用騰訊云COS建站的費(fèi)用

以上海區(qū)域?yàn)槔?定價(jià)標(biāo)準(zhǔn)如下（僅列出部署靜態(tài)網(wǎng)站后會(huì)產(chǎn)生費(fèi)用的項(xiàng)目）：

標(biāo)準(zhǔn)存儲(chǔ)費(fèi)用 0.13 元/GB/月

讀/寫請(qǐng)求費(fèi)用 0.01元/萬(wàn)次

外網(wǎng)下行流量 0.5元/GB

對(duì)一個(gè)一般的個(gè)人博客 我們假設(shè)網(wǎng)站空間大小為0.5GB 月PV為10萬(wàn)次 平均每次請(qǐng)求流量為50Kb 那么一個(gè)月的費(fèi)用為

0.5 × 0.13 + 0.01 × 10 + 0.5 × 100000 × 0.05 × 0.001 = 2.665

每個(gè)月不到3塊錢惧笛，事實(shí)上月請(qǐng)求量能夠達(dá)到10萬(wàn)的個(gè)人博客還是很少的，實(shí)際的成本可能更低逞泄，大家可能注意到患整，最大的費(fèi)用其實(shí)是流量費(fèi)用，因此我們?cè)谑褂脤?duì)象存儲(chǔ)建站的時(shí)候也要善于將公共請(qǐng)求分流到第三方喷众，如某些js擴(kuò)展各谚，選擇一個(gè)可靠的第三方CDN會(huì)為我們減少很多不必要的流量費(fèi)用，網(wǎng)站中的圖片也應(yīng)該進(jìn)行一定的壓縮優(yōu)化等

準(zhǔn)備

當(dāng)我們開始時(shí)我們需要做如下準(zhǔn)備：

• 域名 （需要備案到千，不備案可臨時(shí)使用COS提供的臨時(shí)域名）
• 本地部署好hexo環(huán)境 昌渤，參考文檔：https://hexo.io/zh-cn/docs/
• 騰訊云賬號(hào) 開通COS服務(wù) （建議使用V5版本COS控制臺(tái)，如為V4版本可提交工單讓后臺(tái)升級(jí)為V5版本）

開始

為hexo安裝一鍵部署到qcloud cos插件

進(jìn)入hexo項(xiàng)目目錄執(zhí)行下列命令安裝hexo-deployer-qcloud-cos部署器

npm install hexo-deployer-qcloud-cos --save

再hexo項(xiàng)目配置文件中添加下列參數(shù)

deploy:
    type: qcloud-cos
    cosRegion: <您的cos bucket所在區(qū)域代碼>
    cosSecretId: <您的cos accessKeyId>
    cosSecretKey: <您的cos accessKeySecret>
    cosBucket: <您的cos bucket名稱>
    cosAppid:  <您的騰訊云賬戶appid>
    remotePath: <您要部署的目錄,默認(rèn)為根目錄,默認(rèn)無(wú)需設(shè)置>

說(shuō)明：hexo-deployer-qcloud-cos插件為本文作者所開發(fā)憔四，使用中如果遇到插件問(wèn)題膀息，可以到作者github中反饋,如果覺得好用般眉，點(diǎn)個(gè)Star將是最大的支持！

獲取配置參數(shù)

首先我們需要在騰訊云控制臺(tái)獲取下列所需的配置參數(shù)：

COS術(shù)語(yǔ)請(qǐng)參考 COS術(shù)語(yǔ)信息

獲取APPID

訪問(wèn)騰訊云控制臺(tái) 點(diǎn)擊右上角用戶名 > 賬戶信息 可以查看到APPID冗酿，寫入

image

image

獲取SecretId和SecretKey

點(diǎn)擊控制臺(tái)右上角用戶名 > 訪問(wèn)管理

說(shuō)明：此處為遵循云服務(wù)安全最佳實(shí)踐埠对，使用角色創(chuàng)建用戶。如果圖一時(shí)方便裁替，可以直接使用訪問(wèn)管理頁(yè)面的【訪問(wèn)密鑰】> 【API密鑰管理】創(chuàng)建密鑰后使用项玛，該密鑰擁有控制您騰訊云賬戶所有資源的能力，強(qiáng)烈建議不要這么做胯究！

image

進(jìn)入后點(diǎn)擊用戶 > 新建用戶

image

選擇自定義創(chuàng)建

image

輸入用戶名稱稍计，訪問(wèn)方式僅勾選編程訪問(wèn)，點(diǎn)擊下一步

image

在策略搜索框中輸入QcloudCOSFullAccess 搜索后勾選該策略裕循，點(diǎn)擊下一步

image

確認(rèn)信息無(wú)誤后點(diǎn)擊完成

image

記錄該頁(yè)面中的SecretId和SecretKey臣嚣，寫入配置文件_config.yml 中

image

獲取bucket和region

首先從騰訊云可用地域代碼 中選擇距離自己較近或者自己喜歡的區(qū)域，記錄區(qū)域代碼和區(qū)域名稱

image

bucket是我們創(chuàng)建的對(duì)象存儲(chǔ)的空間名稱剥哑，這里我們有兩種方式可以創(chuàng)建bucket

• 方法1 使用 hexo-deployer-qcloud-cos插件自動(dòng)創(chuàng)建

  將我們想要?jiǎng)?chuàng)建的bucket名稱寫入配置文件硅则，然后執(zhí)行hexo 部署命令 （部署命令參考文檔）

  hexo d
  

  部署工具在部署前會(huì)檢測(cè)bucket是否存在，如果不存在株婴，會(huì)在命令行中出現(xiàn)自動(dòng)創(chuàng)建bucket確認(rèn)怎虫，如圖，輸入y確認(rèn)創(chuàng)建

  image

  創(chuàng)建成功后困介，將出現(xiàn)是否立即部署命令大审，輸入y可立即部署，此處我們直接立即部署座哩，便于后續(xù)測(cè)試

  image

  注意：bucket名稱在cos所有區(qū)域是唯一的

• 方法2 使用騰訊云控制臺(tái)手動(dòng)創(chuàng)建

  使用騰訊云控制臺(tái)手動(dòng)創(chuàng)建bucket的流程此處不再演示徒扶，大家可以參照官方文檔 創(chuàng)建存儲(chǔ)桶

  注意：

  • 用于部署靜態(tài)網(wǎng)站的bucket訪問(wèn)權(quán)限必須設(shè)為public-read 即公共讀！否則即使設(shè)置對(duì)象文件權(quán)限為公開根穷，仍將會(huì)導(dǎo)致COS靜態(tài)網(wǎng)站的索引文檔功能失效
  • 控制臺(tái)創(chuàng)建的存儲(chǔ)桶名稱格式為<bucket>-<appid>格式姜骡，如newbucket-125000000在設(shè)置配置文件時(shí)，bucket只需要輸入-前面的部分即可

修改存儲(chǔ)桶bucket設(shè)置

開啟靜態(tài)網(wǎng)站設(shè)置

進(jìn)入控制臺(tái)對(duì)象存儲(chǔ)管理頁(yè)面屿良，如進(jìn)入后不是V5控制臺(tái)圈澈，建議提交工單升級(jí)為V5版本

image

點(diǎn)擊剛剛創(chuàng)建的存儲(chǔ)桶名稱，進(jìn)入存儲(chǔ)桶詳情頁(yè)面尘惧，點(diǎn)擊基礎(chǔ)配置

image

頁(yè)面滑到底部康栈，找到靜態(tài)網(wǎng)站欄目，開啟靜態(tài)網(wǎng)站，索引文檔設(shè)置為index.html

image

設(shè)置自定義域名

點(diǎn)擊存儲(chǔ)桶詳情頁(yè)面的域名管理選項(xiàng)卡谅将，在自定義源站域名欄目下點(diǎn)擊添加域名漾狼，源站類型選擇【靜態(tài)網(wǎng)站源站】，在域名位置輸入博客要解析的域名饥臂，點(diǎn)擊保存逊躁，復(fù)制CNAME值，到域名服務(wù)商處設(shè)置解析隅熙，此處需要設(shè)置的域名必須時(shí)已經(jīng)備案過(guò)的域名稽煤，若域名尚未備案，則不能設(shè)置囚戚。

image

吐槽：說(shuō)到這里不得不吐槽騰訊云的“基礎(chǔ)設(shè)施即代碼”能力做的還是比較粗糙酵熙，自定義域名沒有提供任何API可供操作，提交工單也未能提供一個(gè)解決方案驰坊，在開發(fā)hexo-deployer-qclouod-cos部署器插件時(shí)匾二，最初的打算是自動(dòng)創(chuàng)建存儲(chǔ)桶后，自動(dòng)完成靜態(tài)網(wǎng)站和自定義域名相關(guān)的配置拳芙，然而現(xiàn)在只能是一個(gè)美麗的夢(mèng)想了察藐。。舟扎。分飞。。睹限。

解析域名

此處以騰訊云的控制臺(tái)為例譬猫，說(shuō)明如何添加cname解析

進(jìn)入域名管理控制臺(tái)，點(diǎn)擊我的域名羡疗，全部域名 點(diǎn)擊解析

image

輸入主機(jī)記錄染服，記錄類型選CNAME,記錄值輸入上一步設(shè)置自定義域名時(shí)的靜態(tài)網(wǎng)站源站的CNAME值，點(diǎn)擊保存即可

然后訪問(wèn)demo.werty.cn

image

已經(jīng)可以正常訪問(wèn)了 至此使用COS搭建靜態(tài)網(wǎng)站的教程就此完結(jié)

補(bǔ)充：

如果添加解析后叨恨，常見錯(cuò)誤原因：

• 訪問(wèn)域名提示NoSuchWebsiteConfiguration,請(qǐng)檢查靜態(tài)網(wǎng)站設(shè)置是否保存

image

• 訪問(wèn)域名提示NoSuchKey肌索，請(qǐng)檢查是否未開啟靜態(tài)網(wǎng)站的索引文檔功能或存儲(chǔ)桶域名管理添加的域名是否為默認(rèn)源站，如果是【默認(rèn)源站】特碳，請(qǐng)修改為【靜態(tài)網(wǎng)站源站】，修改后晕换，一定注意點(diǎn)擊保存午乓！

image

<center>---完---</center>