江苏龙网

  1. 首页 > 人文 > >

腾讯前端开发工程师，教你极速搭建一个个人博客网站

作者：bookerzhao ， 腾讯CSIGweb前端开发工程师
Github为开源项目提供了用于静态页面展示的Pages服务 ， 很多开发者都在上面托管了自己的静态网站和博客 ， 不少开源项目的案例和文档页面也采用了这种方式 。 不过由于Pages的CDN节点大部分在国外 ， 在国内的访问速度不是很理想 ， 不少开发者希望能提升网站在国内的访问速度和稳定性 ， 今天会介绍如何配合GithubAction的持续集成服务和云开发GithubAction扩展 ， 自动部署到访问速度更快的云开发静态托管服务 。
云开发静态托管是云开发提供的一种静态网站托管能力 ， 静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储COS和拥有多个边缘网点的腾讯云CDN提供支持 。
腾讯前端开发工程师，教你极速搭建一个个人博客网站 |--build
|--README.md
希望将项目下build目录生成的静态网站代码部署到云开发这边开通的静态网站托管的根目录下 。
编写GithubAction文件首先在项目目录配置如下的GithubAction文件.github/workflows/main.yml ， 如果已经配置过GithubAction就不需要重新创建了 ， 然后参考下面的配置填写 。
on:[push]#push代码时触发
jobs:
deploy:
runs-on:ubuntu-latest
name:TencentCloudbaseGithubActionExample
steps:
-name:Checkout
uses:actions/checkout@v2
#使用云开发GithubAction部署
-name:DeploystatictoTencentCloudBase
id:deployStatic
uses:TencentCloudBase/cloudbase-action@v1
with:
#云开发的访问密钥secretId和secretKey
secretId:${{secrets.SECRET_ID}}
secretKey:${{secrets.SECRET_KEY}}
#云开发的环境id
envId:${{secrets.ENV_ID}}
#Github项目静态文件的路径
staticSrcPath:build
可以看到配置中主要用到了云开发GithubAction扩展TencentCloudBase/cloudbase-action@v1来部署静态文件 。
注意配置文件中参数部分的secretId、secretKey、envId属于敏感信息 ， 需要放在项目的secret存储中 ， 这里不用填写真实的值 ， 只需要按照上面实例填写变量即可 。
staticSrcPath这里填写了静态网站构建产生的目录build ， 如果想把静态资源部署到云端的某个子目录而不是根目录 ， 可以再配置一个参数staticDestPath 。
配置云开发访问信息我们还需要在项目的Secrets中配置SECRET_ID、SECRET_KEY、ENV_ID这几个私密信息 ， 下面是具体的配置方式 。
首先要开通云开发静态网站 ， 可以参考开通指南： ， 开通环境后在云开发环境列表页面即可得到环境IDENV_ID ， 然后在腾讯云访问管理页面可以配置一对API访问密钥 ， 也就是SECRET_ID、SECRET_KEY 。
然后在自己的Github项目内的Setting/Secrets里设置SECRET_ID,SECRET_KEY,ENV_ID信息即可 。
自定义域名的方法可以参考这篇文档custom-domain.html
TencentCloudBaseGithubAction扩展市场地址：
TencentCloudBaseGithubAction代码开源地址：
欢迎大家多多体验、Star支持或者提交Issue/Pullrequest来参与贡献 。
开发者扶持【腾讯前端开发工程师，教你极速搭建一个个人博客网站】云开发还推出了【9.9元静态网站托管包年赞助计划】 。 只要你是技术博客/技术站点 ， 迁移至云开发静态网站托管服务后 ， 即可申请该赞助计划 。 申请方式链接：静态网站托管产品介绍：


    推荐阅读


    上一篇：599元 值得推荐的升降摄像头全面屏百元机

    下一篇：中国新闻网|美军舰擅闯中国西沙领海，南部战区警告驱离！