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

作者介绍

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

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

  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

// 安装、初始化,以及预览
// 前提条件是本地安装了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 控制台把文件上传上来,这也基本完成了静态网站的部署。让繁重的运维工作给更专业的人去做【拥抱云服务,让业务上云:就选腾讯云(请允许我打个小广告-呵呵-)】。

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

本文分享自微信公众号 - 腾讯云存储(gh_30cb70e39822)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python爱好部落

IOS App测试的那些坑和解决方案

在测试中常见的,如 xcode 版本问题,打包证书问题,闪退无法重现,不好抓 log, 上架被拒问题等等。本文总结一些常见的坑,可以完美绕过去。

18840
来自专栏用户1052078的专栏

Gitlab 数据搬家迁移

两台服务器的Gitlab版本必须是统一的,如有不统一,请先进行升级统一。 Gitlab版本升级教程:

13210
来自专栏新智元

深度神经网络可解释性方法汇总,附Tensorflow代码实现

理解神经网络:人们一直觉得深度学习可解释性较弱。然而,理解神经网络的研究一直也没有停止过,本文就来介绍几种神经网络的可解释性方法,并配有能够在Jupyter下运...

18550
来自专栏数据森麟

我用python帮朋友做了猪肉数据分析图,结果……

打开官网,找到并跳转到猪价网址 http://zhujia.zhuwang.cc/

12620
来自专栏python爱好部落

IOS自动化的那些经验

在自动化中,IOS我们可以用libimobiledevice来辅助做一些工作,用xcrun simctl可以来操纵模拟器,具体咋用呢?

13420
来自专栏用户1052078的专栏

git配置同时使用 Gitlab、Github、Gitee(码云) 共存的开发环境

Host github.com HostName github.com User git #默认就是git,可以不写 IdentityFile ~/.ss...

14710
来自专栏用户5521492的专栏

别再让我帮你盖楼了行不?给个脚本自动盖楼领喵币,附APK

要知道阿里每年都会发放大量红包、各种优惠券和各种互助游戏......而这两天,马爸爸的“ATM”们可都沉迷于这些个互助游戏里不可自拔,吾日三省吾身:签到了?做任...

16340
来自专栏眯眯眼猫头鹰的小树杈

猫头鹰的深夜翻译:开发者必须了解的分支发布模型

想要深入了解Git和中心化代码版本管理系统的优缺点比较,可以在网上自行查询,这个话题一直争论不休。作为一个开发者,我更倾向于使用Git。Git确实改变了开发者对...

7610
来自专栏千里行走

rocketmq-6:golang实现的生产可用rocketmq-exporter

数据来源:从rocketmq-console的http请求获取数据。也就是说RocketmqExporter必须依赖rocketmq-console。好吧,我承...

33420
来自专栏服务端技术杂谈

左耳朵耗子谈架构师和技术专家

有一些技术人员一旦到了软件架构师和专家的级别,就会停止学习留在原地了,有时候他们做似乎开始变得封闭了。做技术这么长时间,经历了好些“有趣”的事,我这里例举一些,...

10220

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励