拥抱腾讯云服务：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 -gdocsify 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 控制台把文件上传上来，这也基本完成了静态网站的部署。让繁重的运维工作给更专业的人去做【拥抱云服务，让业务上云：就选腾讯云（请允许我打个小广告－呵呵－）】。

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

　　相关文章阅读：

　　十分钟搞定“傻瓜式”的静态网站搭建托管之旅

你点的每个赞，我都认真当成了喜欢