前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >拥抱腾讯云服务:Github Actions+COS,快速搭建你的Wiki文档

拥抱腾讯云服务:Github Actions+COS,快速搭建你的Wiki文档

作者头像
云存储
修改2019-11-29 18:47:43
3K0
修改2019-11-29 18:47:43
举报
文章被收录于专栏:腾讯云存储腾讯云存储

作者介绍

叶嘉梁:腾讯云高级前端工程师,多年从事云计算相关前端工作。现负责腾讯云对象存储前端的工作,致力于挖掘更多云服务的玩法。

想要一个自己的静态站点,没有服务器 ? 想要所写即所得的方式,书写自己的文档? 想要一推到代码仓库,就自动完成站点部署?

  Github Page貌似已经满足了,但是访问慢,有没更快的云服务可用?

  不清楚上面的问题,是否在大家的日常中出现,但这些问题以前确实困扰着我,也相信困扰了很多同学,于是,有了本文。先让看客们瞅瞅成品http://cos.galen-yip.com (请复制到浏览器打开)。

  如何用腾讯云COS对象存储快速搭建一个在国内就能快速访问的Wiki文档站点?

  下面给熟悉或者不熟悉腾讯云对象存储COS的同学普及下COS静态网站这个最实用的功能。

准备工具

本文会用到Docsify+Github(可选)+Github Actions(可选)+腾讯云对象存储COS

下面分别介绍需要用到的几个工具:

  • Docsify

  按Docsify官网的说法,这是“一个神奇的文档网站生成工具”。他会动态的把你的Markdown转换成html,这点真是不要太方便,不止产品同学喜欢,身为研发同学也爱得不行。当然,选择它还有原因,就是 [ 好看 ],简洁舒服。

  • Github

  这个就不介绍了,全球最大的 x 友交流社区。

  • Github Actions

  Github 的持续集成服务,详细内容:https://dwz.cn/XB4jDdIz(手动复制到浏览器打开)

  • 腾讯云对象存储COS

  今天的主角,简单说,可以认为它是一个容量不限的存储空间。今儿要用到他的静态网站功能,即免服务器,把你用Docsify写的Markdown文件,以静态页面的方式,提供了一个页面地址供你进行访问。


实操开始

一、安装 Docsify ,用 Markdown 书写 wiki

代码语言:javascript
复制
// 安装、初始化,以及预览
// 前提条件是本地安装了Node/Npm,以及 npm 
npm i docsify-cli -g
docsify init ./cos-website-demo  
docsify serve cos-website-demo

  之后修改目录下的cos-website-demo/README.md即可实时更新。

  如果以上的操作没法完成,可以参考官网中手动初始化的方式:https://docsify.js.org/#/zh-cn/quickstart

(请手动复制到浏览器打开)

  而我们只需要做 3 步:

  ① 修改 index.html 中的'name';

  ② 编辑 _sidebar.md 修改成你需要的左侧菜单;

  ③ 修改具体的'md'文件即可;

二、Github Actions + COS自动部署

2.1、思路 ( 不关心者可直接跳到 2.2 )

  我们使用Github进行代码管理,当完成文档书写后,如果在代码提交时,即可自动部署,那滋味想想可真是舒服。

  这自然想到了Github自带的CI服务Github Actions。思路比较简单,在代码提交时去做一些事情,比如这里是在代码提交时,触发Action去把文档部署到 COS。

  那Github Actions如何上传文档到 COS ?去调用一个复杂的脚本,写一段代码来上传?方案可行,但蛮麻烦的。有没简单点的办法呢,比如就调用命令行?刚好,COS侧官方提供了coscmd的命令行工具,上传文件调用类似'coscmd upload ./a.jpg a.jpg' 即可完成对 a.jpg 的上传。

  但在 Orange-ci 中无法直接调用 coscmd,需要以插件的形式来调用。那剩下的就是配置好COS,写好ci的yml 文件即可。

  那剩下的就是配置好 COS 以及 Github Actions 即可。

2.2、配置 COS 静态网站功能

  首先,登录 COS 控制台,创建好一个公有读私有写的存储桶。比如我创建了地域为广州, 名称为 cos-website-demo-1251496585 的存储桶(注:详细的静态网站配置请点击查看底部相关文档)。

  然后,点击存储桶名称,进入存储桶详情,点击【基础配置】,滚动到下方,找到【静态网站】,直接开启即可( 强制HTTPS别开启 )。

  图中访问节点:https://cos-website-demo-125149

6585.cos-website.ap-guangzhou.myqcloud.com即COS为你提供的静态站点地址,但因为新建的存储桶中目前没有任何内容,因此还需配合后续操作。

2.3、串联 Github、Github Actions、COS

  首先开通 Github Actions,因为目前Github Actions还处于测试阶段,需要到这里进行申请:https://dwz.cn/mqDs2mmn(手动复制到浏览器打开)。

  开通后,可以在Github仓库看到 Actions 这一栏。

  其次,把腾讯云的个人账号 API 密钥,配置到 Github 平台上,用于之后 Github Actions 发起到 COS的请求。

点击【Settings】->【Secrets】后添加密钥信息,腾讯云账号的SECRET_ID、SECRET_KEY可在腾讯云控制台获取。

  然后,在本地Docsify生成的目录中,根目录下创建.github/workflows 目录,然后创建main.yml 文件,在里面写上传文件到COS的逻辑。

  值得注意的是,前面我们在Secrets里配置了腾讯云的密钥信息,正是在这里使用。把密钥存在Github中,通过env来注入变量。

  其中,有 2 个地方需要修改下:

  ① 存储桶名称改为刚刚创建的,可在 COS 控制台获取;

  ② 存储桶的地域修改为刚选择的,如果你也创建的是广州,则无需修改;

2.4、提交Git,验收成果。

  贤者的时刻到了,键盘敲下git push,听着enter键清脆的回响,码农的快乐往往就是这么朴实无华且枯燥。

  在Github Actions的页面中静待一会,提示构建成功则可以去验收我们的站点。

  打开 2.2 中 COS 访问节点处给出的 URL 地址,我的是:

https://cos-website-demo-1251496585.cos-website.ap-guangzhou.myqcloud.com (你需要改为你的存储桶名称及地域)。

  到此,我们基本完成了任务,一个外网可访问的文档页面就有了,如果有修改,只需要推送到git即可等待它自动部署。

2.5、使用自定义域名

  贤者们不难发现,我们最终得到COS提供的域名:

htttp://xxxx.cos-website.ap-guangzhou.myqcloud.com开头给的示例地址却是:http://cos.galen-yip.com。

  这里 COS 提供了绑定自定义域名的功能,打开存储桶详情,进到【域名管理】,找到下方的【自定义源站域名】,在此添加自己的域名(因为前面存储桶选择的国内大陆地域,所以要求域名必须已备案,如果是选择的海外,则无要求)。

  源站类型选择静态网站,添加完域名后,在域名的DNS厂商处添加上域名的CNAME记录,指向原本COS提供的静态站点域名 :

http://xxxx.cos-website.ap-guangzhou.myqcloud.com。

配置完毕,等候DNS生效即可。

  至此,则可以通过我们自己的域名来访问文档站点,如:http://cos.galen-yip.com


  由于cos暂不支持HTTPS证书的托管,因此通过自定义域名没法用https访问,但下方提供了2种方式:

  1、页面加速

  如果你的站点访问量较大,希望做访问加速,或者你希望使用 https 的方式来访问。那这里可以结合“腾讯云CDN”来使用,这一块COS已经集成进来,提供了简单的方式来帮你设置。

  同样是上图,打开存储桶详情,进到【域名管理】,找到下方的【自定义加速域名】,点击添加域名,加速地域选择国内,源站类型选择 静态网站类型,点击保存。

  然后在域名的DNS厂商处添加上域名的CNAME记录,指向图中CNAME的域名http://xxx.cdn.dnsv1.com。等待5分钟CDN进行配置下发,至此,即完成了CDN的接入。

  如果你需要使用 https 访问,则可进到CDN控制台,找到你刚添加的域名,进入域名详情,点击【高级配置】,找到【HTTPS配置】进行相关的操作即可。(腾讯云目前还能申请免费的 HTTPS 证书)

  2、自动刷新CDN

  再细心的贤者们,会发现,如果接入了CDN,CDN是会有缓存的,那提交Git后的自动部署到COS,通过添加的域名访问站点的话,会始终命中CDN缓存,除非CDN默认的缓存过期了(默认30天)。

  那怎么让COS让文件的更新反馈到CDN节点上呢?这里可以使用“云服务SCF”,这里就不做额外的讲解了。

扫一扫关注  有惊喜
扫一扫关注 有惊喜


整个流程下来,过程没有复杂的,乃至觉得麻烦的,可以在本地写成文档后,直接通过 COS 控制台把文件上传上来,这也基本完成了静态网站的部署。让繁重的运维工作给更专业的人去做【拥抱云服务,让业务上云:就选腾讯云(请允许我打个小广告-呵呵-)】。

如果你有更多的玩法,或者有使用上的问题或建议,欢迎给我留言!

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-10-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 腾讯云存储 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档