拥抱腾讯云服务：Github Actions+COS，快速搭建你的Wiki文档
- 2019 年 11 月 28 日
- 笔记
作者介绍
叶嘉梁：腾讯云高级前端工程师，多年从事云计算相关前端工作。现负责腾讯云对象存储前端的工作，致力于挖掘更多云服务的玩法。
想要一个自己的静态站点，没有服务器 ？ 想要所写即所得的方式，书写自己的文档？ 想要一推到代码仓库，就自动完成站点部署？
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访问，但下方提供了２种方式：
１、页面加速
如果你的站点访问量较大，希望做访问加速，或者你希望使用 https 的方式来访问。那这里可以结合“腾讯云CDN”来使用，这一块COS已经集成进来，提供了简单的方式来帮你设置。
同样是上图，打开存储桶详情，进到【域名管理】，找到下方的【自定义加速域名】，点击添加域名，加速地域选择国内，源站类型选择 静态网站类型，点击保存。
然后在域名的DNS厂商处添加上域名的CNAME记录，指向图中CNAME的域名http://xxx.cdn.dnsv1.com。等待5分钟CDN进行配置下发，至此，即完成了CDN的接入。
如果你需要使用 https 访问，则可进到CDN控制台，找到你刚添加的域名，进入域名详情，点击【高级配置】，找到【HTTPS配置】进行相关的操作即可。（腾讯云目前还能申请免费的 HTTPS 证书）
２、自动刷新CDN
再细心的贤者们，会发现，如果接入了CDN，CDN是会有缓存的，那提交Git后的自动部署到COS，通过添加的域名访问站点的话，会始终命中CDN缓存，除非CDN默认的缓存过期了（默认30天）。
那怎么让COS让文件的更新反馈到CDN节点上呢？这里可以使用“云服务SCF”，这里就不做额外的讲解了。
可以直接参考(请复制到浏览器打开):
https://cloud.tencent.com/developer/article/1114117
———————————结语————————————
整个流程下来，过程没有复杂的，乃至觉得麻烦的，可以在本地写成文档后，直接通过 COS 控制台把文件上传上来，这也基本完成了静态网站的部署。让繁重的运维工作给更专业的人去做【拥抱云服务，让业务上云：就选腾讯云（请允许我打个小广告－呵呵－）】。
如果你有更多的玩法，或者有使用上的问题或建议，欢迎给我留言！
