基于腾讯云COS对象存储部署hexo博客并实现一键部署

基于腾讯云COS对象存储部署hexo博客并实现一键部署

本文首发自作者个人博客werty.cn , 转载请注明出处, 原文:基于腾讯云COS对象存储部署hexo博客并实现一键部署

前言

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。基于Hexo 我们可以很快的将本地的markdown文件转为炫酷的个人博客页面,对于喜欢使用markdown记录书写的开发者来说提供了极大的便利。mark一时爽,一直mark一直爽~~

静态网站是指只包含静态内容(如 HTML)或客户端脚本的网站,而动态网站的内容包含诸如 PHP、JSP 或 ASP.NET 等服务器端脚本,依赖服务器端处理。

目前主流的对象存储服务如AWS S3,阿里云 OSS, 腾讯云COS等均支持部署静态网站,依托于对象存储带来的高可用和低成本,我们可以很容易的以较低的成本搭建出一个基于Serverless架构的高可用的个人博客网站。对于一般访问量的个人博客而言,在一些云服务商平台甚至可以实现免费基于对象存储建站,当然国内提供免费额度的供应商还是相对较少,即使如此,花费的成本相较于使用云主机而言也算的上物美价廉了。

简单计算一下使用腾讯云COS建站的费用

以上海区域为例 定价标准如下(仅列出部署静态网站后会产生费用的项目):

标准存储费用 0.13 元/GB/月

读/写请求费用 0.01元/万次

外网下行流量 0.5元/GB

对一个一般的个人博客 我们假设网站空间大小为0.5GB 月PV为10万次 平均每次请求流量为50Kb 那么一个月的费用为

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

每个月不到3块钱,事实上月请求量能够达到10万的个人博客还是很少的,实际的成本可能更低,大家可能注意到,最大的费用其实是流量费用,因此我们在使用对象存储建站的时候也要善于将公共请求分流到第三方,如某些js扩展,选择一个可靠的第三方CDN会为我们减少很多不必要的流量费用,网站中的图片也应该进行一定的压缩优化等

准备

当我们开始时我们需要做如下准备:

  • 域名 (需要备案,不备案可临时使用COS提供的临时域名)
  • 本地部署好hexo环境 ,参考文档:https://hexo.io/zh-cn/docs/
  • 腾讯云账号 开通COS服务 (建议使用V5版本COS控制台,如为V4版本可提交工单让后台升级为V5版本)

开始

为hexo安装一键部署到qcloud cos插件

进入hexo项目目录执行下列命令安装hexo-deployer-qcloud-cos部署器

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

再hexo项目配置文件中添加下列参数

deploy:
    type: qcloud-cos
    cosRegion: <您的cos bucket所在区域代码>
    cosSecretId: <您的cos accessKeyId>
    cosSecretKey: <您的cos accessKeySecret>
    cosBucket: <您的cos bucket名称>
    cosAppid:  <您的腾讯云账户appid>
    remotePath: <您要部署的目录,默认为根目录,默认无需设置>

说明:hexo-deployer-qcloud-cos插件为本文作者所开发,使用中如果遇到插件问题,可以到作者github中反馈,如果觉得好用,点个Star将是最大的支持!

获取配置参数

首先我们需要在腾讯云控制台获取下列所需的配置参数:

名称 描述
APPID 开发者访问 COS 服务时拥有的用户维度唯一资源标识,用以标识资源
SecretId 开发者拥有的项目身份识别 ID,用以身份认证
SecretKey 开发者拥有的项目身份密钥
Bucket COS 中用于存储数据的容器名称
Region Bucket所在的地域信息。

COS术语请参考 COS术语信息

获取APPID

访问腾讯云控制台 点击右上角用户名 > 账户信息 可以查看到APPID,写入

image
image

获取SecretId和SecretKey

点击控制台右上角用户名 > 访问管理

说明:此处为遵循云服务安全最佳实践,使用角色创建用户。如果图一时方便,可以直接使用访问管理页面的【访问密钥】> 【API密钥管理】创建密钥后使用,该密钥拥有控制您腾讯云账户所有资源的能力,强烈建议不要这么做!

image

进入后点击用户 > 新建用户

image

选择自定义创建

image

输入用户名称,访问方式仅勾选编程访问,点击下一步

image

在策略搜索框中输入QcloudCOSFullAccess 搜索后勾选该策略,点击下一步

image

确认信息无误后点击完成

image

记录该页面中的SecretId和SecretKey,写入配置文件_config.yml 中

image

获取bucket和region

首先从腾讯云可用地域代码 中选择距离自己较近或者自己喜欢的区域,记录区域代码和区域名称

image

bucket是我们创建的对象存储的空间名称,这里我们有两种方式可以创建bucket

  • 方法1 使用 hexo-deployer-qcloud-cos插件自动创建

    将我们想要创建的bucket名称写入配置文件,然后执行hexo 部署命令 (部署命令参考文档

    hexo d
    

    部署工具在部署前会检测bucket是否存在,如果不存在,会在命令行中出现自动创建bucket确认,如图,输入y确认创建

    image

    创建成功后,将出现是否立即部署命令,输入y可立即部署,此处我们直接立即部署,便于后续测试

    image

    注意:bucket名称在cos所有区域是唯一的

  • 方法2 使用腾讯云控制台手动创建

    使用腾讯云控制台手动创建bucket的流程此处不再演示,大家可以参照官方文档 创建存储桶

    注意:

    • 用于部署静态网站的bucket访问权限必须设为public-read 即公共读!否则即使设置对象文件权限为公开,仍将会导致COS静态网站的索引文档功能失效
    • 控制台创建的存储桶名称格式为<bucket>-<appid>格式,如newbucket-125000000在设置配置文件时,bucket只需要输入-前面的部分即可

修改存储桶bucket设置

开启静态网站设置

进入控制台对象存储管理页面,如进入后不是V5控制台,建议提交工单升级为V5版本

image

点击刚刚创建的存储桶名称,进入存储桶详情页面,点击基础配置

image

页面滑到底部,找到静态网站栏目,开启静态网站,索引文档设置为index.html

image

设置自定义域名

点击存储桶详情页面的域名管理选项卡,在自定义源站域名栏目下点击添加域名,源站类型选择【静态网站源站】,在域名位置输入博客要解析的域名,点击保存,复制CNAME值,到域名服务商处设置解析,此处需要设置的域名必须时已经备案过的域名,若域名尚未备案,则不能设置。

image

吐槽:说到这里不得不吐槽腾讯云的“基础设施即代码”能力做的还是比较粗糙,自定义域名没有提供任何API可供操作,提交工单也未能提供一个解决方案,在开发hexo-deployer-qclouod-cos部署器插件时,最初的打算是自动创建存储桶后,自动完成静态网站和自定义域名相关的配置,然而现在只能是一个美丽的梦想了。。。。。。

解析域名

此处以腾讯云的控制台为例,说明如何添加cname解析

进入域名管理控制台,点击我的域名,全部域名 点击解析

image

输入主机记录,记录类型选CNAME,记录值输入上一步设置自定义域名时的静态网站源站的CNAME值,点击保存即可

然后访问demo.werty.cn

image

已经可以正常访问了 至此使用COS搭建静态网站的教程就此完结

补充:

如果添加解析后,常见错误原因:

  • 访问域名提示NoSuchWebsiteConfiguration,请检查静态网站设置是否保存
image
  • 访问域名提示NoSuchKey,请检查是否未开启静态网站的索引文档功能或存储桶域名管理添加的域名是否为默认源站,如果是【默认源站】,请修改为【静态网站源站】,修改后,一定注意点击保存!
image

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343