比快更快,Github Action + 云开发部署静态网站

news/2024/5/17 13:34:41/文章来源:https://blog.csdn.net/TCB_CloudBase/article/details/106274781

Github 为开源项目提供了用于静态页面展示的 Pages 服务,很多开发者都在上面托管了自己的静态网站和博客,不少开源项目的案例和文档页面也采用了这种方式。不过由于 Pages 的 CDN 节点大部分在国外,在国内的访问速度不是很理想,不少开发者希望能提升网站在国内的访问速度和稳定性,今天会介绍如何配合 Github Action 的持续集成服务和 云开发 Github Action 扩展,自动部署到访问速度更快的云开发静态托管服务。

Pages 国内测速数据

云开发静态托管介绍

云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持。可以通过腾讯云控制台、命令行工具以及下面会提到的云开发 Github Action 进行管理部署。云开发提供了免费的二级域名(未绑定自定义域名时下行速度有限制),同时支持免费绑定开发者自己的自定义域名

首个环境可享受 1GB 容量和每月 5GB 流量的免费额度,对于访问量不是很大的个人博客应该足够了。如果流量大也没关系,计费是按照具体使用收费的按量付费方式,具体信息可以查看计费价格文档 https://cloud.tencent.com/product/wh/pricing

云开发静态托管部署的网站,还可以使用云开发的提供的一站式 Serverless 后端能力,例如云函数、云数据库、云存储、身份服务等。比如可以在静态托管的个人博客上面使用云函数和云数据库实现评论、留言板功能等,或者可以把博客的内容管理从原来的静态文件部署变为动态内容管理等,拓展的用法非常的多,开发者可以继续深入探索。

如何通过 Github Action 一键部署到云开发

下面演示如何将 Github 静态页面自动部署到云开发的静态托管,来获得稳定的访问速度和更多的扩展能力。

例如开发者的个人博客 Github 项目结构如下:

|-- src
|-- build
|-- README.md 

希望将项目下 build 目录生成的静态网站代码部署到云开发这边开通的静态网站托管的根目录下。

编写 Github Action 文件

首先在项目目录配置如下的 Github Action 文件 .github/workflows/main.yml,如果已经配置过 Github Action 就不需要重新创建了,然后参考下面的配置填写。

on: [push] # push 代码时触发jobs:deploy:runs-on: ubuntu-latestname: Tencent Cloudbase Github Action Examplesteps:- name: Checkoutuses: actions/checkout@v2# 使用云开发 Github Action 部署- name: Deploy static to Tencent CloudBaseid: deployStaticuses: TencentCloudBase/cloudbase-action@v1with:# 云开发的访问密钥 secretId 和 secretKeysecretId: ${{ secrets.SECRET_ID }}secretKey: ${{ secrets.SECRET_KEY }}# 云开发的环境idenvId: ${{ secrets.ENV_ID }}# Github 项目静态文件的路径staticSrcPath: build

可以看到配置中主要用到了 云开发 Github Action 扩展 TencentCloudBase/cloudbase-action@v1 来部署静态文件。

注意配置文件中参数部分的 secretIdsecretKeyenvId属于敏感信息,需要放在项目的 secret 存储中,这里不用填写真实的值,只需要按照上面实例填写变量即可。

staticSrcPath 这里填写了静态网站构建产生的目录 build,如果想把静态资源部署到云端的某个子目录而不是根目录,可以再配置一个参数 staticDestPath

配置云开发访问信息

我们还需要在项目的 Secrets 中配置 SECRET_IDSECRET_KEYENV_ID 这几个私密信息,下面是具体的配置方式。

首先要开通云开发静态网站,可以参考开通指南:https://docs.cloudbase.net/hosting/,开通环境后即可得到环境ID ENV_ID,然后在腾讯云 访问管理 页面可以配置一对 API 访问密钥,也就是SECRET_IDSECRET_KEY

然后在自己的 Github 项目内的 Setting/Secrets 里设置 SECRET_ID, SECRET_KEY, ENV_ID 信息即可。

配置完之后就可以提交代码体验自动部署了,每次 git push Actions 都会自动运行,将项目的静态资源部署到自己的云开发静态托管环境,部署成功之后即可通过云开发提供的二级域名访问来自己的网站。

云开发静态托管测速数据

配置自定义域名

云开发提供的免费的二级域名下行速度有所限制,开发者最好绑定一个自己的域名,绑定域名是免费的,还可以在腾讯云配置一个免费的 SSL 证书,来通过 HTTPS 访问自己的网站。

自定义域名的方法可以参考这篇文档 https://docs.cloudbase.net/hosting/custom-domain.html

配置完成后,测试下部署在云开发静态托管的网站的访问速度,根据测速数据可以看到各地的访问速度都非常快。

更多扩展玩法

云开发 Tencent CloudBase Github Action 这个扩展会 Github 项目自动部署到云开发环境,目前支持静态托管功能,后续会支持其他资源的部署,比如可以把用 Node JS 、 Java、PHP 等语言开发的服务端项目一键部署到云开发,来获得 Serverless 化的动态网站服务。或者自动化部署带有数据库、前端、后端的全栈应用

Tencent CloudBase Github Action 扩展市场地址
https://github.com/marketplace/actions/tencent-cloudbase-github-action

Tencent CloudBase Github Action 代码开源地址
https://github.com/TencentCloudBase/cloudbase-action

欢迎大家多多体验、Star 支持或者提交 Issue / Pull request 来参与贡献。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_816656.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

新能力|静态网站托管自定义域名支持强制 HTTPS

前言 我们的请求在互联网中通过 HTTP 协议传递时是基于明文来进行传输的,由于无法对通信整体进行加密,在此过程中遭到攻击的隐患较大。因此,数据加密传输、更加安全的 HTTPS 访问成为如今主流的传输方式。 云开发 Cloudbase 各项 API 原生支…

如何用极低成本解决网站托管烦恼?

运维工程师、开发工程师、系统管理员… 网站托管庞大的人力成本令人头秃! 呜呼,拿什么来拯救你?我的网站托管! 咚咚咚,敲黑板,划重点! 云开发联合DNSPod为您低价打造开通云开发托管、注册域名…

1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站

今天来教大家部署一个属于自己的第一个静态网站,因为这里借助小程序云开发的静态服务器资源,所以可以轻松的实现自己网站的部署,部署完以后可以在电脑浏览器,手机浏览器,微信公众号里面展示。 老规矩,先看效…

一键部署!教你用云开发极速建站

无论是对于个人开发者还是企业,都经常需要通过一个网站去展示自己、与用户建立连接。生活论坛、地方门户、图片社区、博客站点…通过自己手把手去选框架、写代码又太耗时间。 借助云开发的一键部署能力,你不需要一行一行地写 HTML、CSS,也不…

简单几步,用云函数上传文件至静态网站托管

前言 云开发CloudBase为开发者提供静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由对象存储 COS 和拥有多个边缘网点的 CDN 提供支持。 本篇文章将使用云开发 Node.js 管理端 SDK演示,只需简单几步即可在云…

一键部署!这样搭建一个文档网站真的很简单!

本文由贝壳找房的前端工程师刘成帅(Jacob)带来,文中介绍了如何运用云开发CloudBase,免服务器、免域名快速搭建个人站点的方式。一起学习吧~ 前言 最近笔者在复习 JavaScript 基础知识,刚看完 《JavaScript 高级程序设…

监控和告警 | 网站被攻击了?

前段时间,我的网站疑似被攻击了,今天带大家一起来事故现场看看,并且分享事故分析思路和事后防控手段。 孽起 先看看我是怎么发现网站被攻击的吧。 通常,为了保证线上网站和后台服务的稳定运行,我们需要给项目添加监…

用云开发Webify,5分钟上线新网站!

用最简单的方式,带你上线自己的网站! 大家好,我是鱼皮。 相信每位学编程的同学都想要拥有一个自己的网站,比如个人博客,可以拿来记录自己的学习过程、分享自己的文章、展示作品等,从而激励自己持续学习和总…

Webify个人网站扶持计划:免费托管你的网站

再小的网站都有自己的价值,Webify 致力于帮助有情怀的站点先跑起来。 为了让更多开发者聚焦于网站本身的内容建设,而无需操心部署流程以及访问量与托管费用不对等的情况。 Webify 特别推出个人站点扶持计划: 将博客/论坛/官网等任意形式的个…

Next.js + 云开发Webify 打造绝佳网站

Next.js酷在哪里? 之前使用 Next.js strapi 做了一个简单博客站点也顺道写了一篇 Next.js 简明教程,之后 Next 本身一直在迅猛发展。利用代 js 能力来说做到了: 极佳的开发体验极佳的网站最佳的”动“,“静”平衡 从特性上来说…

十年老站长心声:我为什么选择把 Hexo 网站迁移到 Webify

前 言 我的这个博客站点大约始建于2010年以前,使用过 dlog、pjblog、zblog 等博客程序,也手动建立使用过纯静态 HTML 页面,大约2010年开始使用 WordPress。最近几年有感于 WordPress 过于臃肿复杂,而我的目的只是想写点什么&…

不套用模版,用微搭低代码开发企业门户网站

移动互联网时代,要快速打造企业品牌形象,越来越多企业选择小程序、H5等移动端形态构建门户网站。 如果拥有自己的门户网站,就意味着企业能够覆盖用户的更多碎片时间,使自己的品牌更加深入人心,使客户咨询等服务更加便…

内蒙古包钢钢管:用腾讯云微搭搭建企业门户网站,开启传统企业数字化转型之路

包钢钢管厂研发负责人: 作为一个国有的钢管厂企业,我们需要一个简单便捷、快速高效的搭建工具,联通我们的员工和客户,而微搭就是这样一款工具,它与微信和企业微信原生地互相结合。 企业背景 在我国行业数字化浪潮的趋…

php 企业网站 mail_花都新零售企业管理系统价位

花都新零售企业管理系统价位 ewttre花都新零售企业管理系统价位 实际上软件设计的主要任务就是将软件分解成模块是指能实现某个功能的数据和程序说明、可执行程序的程序单元。如今的短视频,沦为抄袭的重灾区。一些优质的短视频,未经允许被“搬运工”和“…

网站无法连接mysql_nacos无法连接mysql的解决方法

原因nacos的pom依赖的mysql版本与mysql版本不一致导致步骤1:修改pom文件中mysql为对应版本依赖mysqlmysql-connector-java8.0.19步骤2:building项目解决编译报错(删除旧依赖)步骤3:重新打包 mvn -Prelease-nacos -Dmaven.test.skiptrue clean…

iis服务器怎么部署php网站,iis服务器怎么部署php网站

iis服务器怎么部署php网站 内容精选换一换华为云帮助中心,为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档,帮助您快速上手使用华为云服务。PHPWind(简称:PW)是一个基于PHP和MySQL的开源…

html5标签seo的作用,seo标签是什么意思,简述seo网站标签的作用

在HTML代码中,能适当布局一些优化标签,会给网站带来意想不到的结果。那么关于SEO优化标签的用处你真的知晓么? 跟随赢客互动小编的脚步一起认识下以下这些seo标签吧!1.标题标签在网页html代码中标签是定义在最重要的标题&#xff…

linux国产操作系统下载网站,三分钟快速安装国产操作系统Ylmf OS

雨林木风旗下国产操作系统Ylmf OS 4.0已经发布,(具体见http://www.linuxidc.com/Linux/2011-06/36739.htm)靓丽清爽的系统界面和丰富的系统应用立刻引起广大网友的热烈关注。但是不少网友对Linux操作系统有天生的恐惧感,担心其复杂的分区操作和安装方法对…

王者荣耀测试自己本命英雄软件,王者荣耀本命英雄测试网站分享 2021本命英雄测试入口...

王者荣耀本命英雄测试网站在其中还是非常的有用的,根据我们的性格能够给我们带来不同的选择,每个在面对相同的情况都是会做出不同的选择的,根据这些选择,我们能够找到最适合我们的英雄,下面就是具体的王者荣耀本命英雄…

让搜索引擎快速收录网站

让搜索引擎快速收录网站或许很多朋友面临这样的窘境,网站刚上线,提交完搜索引擎,可是搜索引擎并没有马上收录网站,而是过了很长一段时间才收录网站的首页。这是一个可能让人发疯的问题,如果每一个新站都等很长一段时间…