个人博客前端模板_腾讯前端开发工程师,教你极速搭建一个个人博客网站
作者: bookerzhao,腾讯 CSIG web前端开发工程师
Github 为开源项目提供了用于静态页面展示的 Pages 服务,很多开发者都在上面托管了自己的静态网站和博客,不少开源项目的案例和文档页面也采用了这种方式。不过由于 Pages 的 CDN 节点大部分在国外,在国内的访问速度不是很理想,不少开发者希望能提升网站在国内的访问速度和稳定性,今天会介绍如何配合 Github Action 的持续集成服务和 云开发 Github Action 扩展,自动部署到访问速度更快的云开发静态托管服务。
云开发静态托管是云开发提供的一种静态网站托管能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持。
云开发静态托管介绍
云开发静态托管是云开发提供的静态网站托管的能力,静态资源(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-latest
name: Tencent Cloudbase Github Action Example
steps:
- name: Checkout
uses: actions/checkout@v2
# 使用云开发 Github Action 部署
- name: Deploy static to Tencent CloudBase
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
可以看到配置中主要用到了 云开发 Github Action 扩展 TencentCloudBase/cloudbase-action@v1 来部署静态文件。
注意配置文件中参数部分的 secretId、secretKey 、envId属于敏感信息,需要放在项目的 secret 存储中,这里不用填写真实的值,只需要按照上面实例填写变量即可。
staticSrcPath 这里填写了静态网站构建产生的目录 build,如果想把静态资源部署到云端的某个子目录而不是根目录,可以再配置一个参数 staticDestPath 。
配置云开发访问信息
我们还需要在项目的 Secrets 中配置 SECRET_ID、SECRET_KEY、ENV_ID 这几个私密信息,下面是具体的配置方式。
首先要开通云开发静态网站,可以参考开通指南:https://docs.cloudbase.net/hosting/,开通环境后在云开发环境列表 页面即可得到环境ID ENV_ID ,然后在腾讯云 访问管理 页面可以配置一对 API 访问密钥,也就是SECRET_ID、SECRET_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 来参与贡献。
开发者扶持
云开发还推出了【9.9元静态网站托管包年赞助计划】。只要你是技术博客/技术站点,迁移至云开发静态网站托管服务后,即可申请该赞助计划。 申请方式链接: https://url.cn/5nFAtxq 静态网站托管产品介绍:https://cloud.tencent.com/product/wh
个人博客前端模板_腾讯前端开发工程师,教你极速搭建一个个人博客网站相关推荐
- 极速搭建一个个人博客网站
作者:bookerzhao,腾讯 CSIG web前端开发工程师 Github 为开源项目提供了用于静态页面展示的 Pages 服务,很多开发者都在上面托管了自己的静态网站和博客,不少开源项目的案例和 ...
- 查看cpu使用率_腾讯游戏开发工程师:Linux 机器 CPU 毛刺问题排查
作者:jasonzxpan,腾讯 IEG 运营开发工程师 本文排查一个Linux 机器 CPU 毛刺问题,排查过程中不变更进程状态.也不会影响线上服务,最后还对 CPU 毛刺带来的风险进行了分析和验证 ...
- 闲置硬盘自制nas私有云_家里闲置硬盘怎么办?教你自己搭建一个私人云盘!
原标题:家里闲置硬盘怎么办?教你自己搭建一个私人云盘! 最近在家比较闲,把家里之前电脑硬盘升级到固态硬盘的那个500G的机械硬盘翻出来,看看如何利用起来,在家里放着也是浪费.因为有好多个人资源需要,但 ...
- 如何搭建一个独立博客——简明Github Pages与Hexo教程
(?)[-] http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/ 摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册.DN ...
- java 前端模板_前端模板引擎入门
模板引擎 模板引擎 起到 数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...
- 如何从零搭建一个hexo博客网站01
title: 如何从零搭建一个hexo博客网站01 #文章標題 categories: "Hexo教程" #文章分類目錄 可以省略 categories: "Hexo教程 ...
- 纯萌新手把手教你从零开始搭建自己的博客
纯萌新手把手教你从零开始搭建自己的博客 欢迎来我的博客看看 方法一:Gridea(推荐) 如果你是真的是像我一样的纯萌新,不是那种谦虚的大佬,那么不用想了,Gridea是你最好的选择. 不如先看看原作 ...
- 不会代码,如何搭建一个个人博客?
本科的时候不是计算机专业,学的自动化,也不太上进,尽顾着玩游戏了.那会一直觉得那些写博客的人超级牛逼,能够搭建自己个人博客的人更是牛逼哄哄的啊~ 前段时间,研究生课题没那么忙的时候,折腾着搭建了一个自 ...
- 利用Octopress搭建一个Github博客
小引 Octopress是利用Jekyll博客引擎开发的一个博客系统,生成的静态页面能够很好的在github page上展现.号称是hacker专属的一个博客系统(A blogging framewo ...
最新文章
- 浅显易懂 Makefile 入门 (12)— Makefile 常见的错误信息
- TensorRT 数据和表格示例
- [力扣] 501. 二叉搜索树中的众数
- 如何在Anaconda中实现多版本python Spyder共存
- android包结构规范,【Android】Android产品-开发规范
- 你的adonis用对了吗?不同因素的顺序竟然对结果有很大影响
- Qomo OpenProject Field Test 1发布!
- java 设置mysql 密码_Mysql修改设置root密码的命令及方法
- localdatetime获得时间搓_Java8 LocalDateTime获取时间戳(毫秒/秒)、LocalDateTime与String互转、Date与LocalDateTime互转...
- CentOS 开机优化程序
- new一个对象的完整过程
- 奇兔recovery卡刷教程_奇兔刷机小编为你详解recovery界面中的功能
- 360木马云查杀结果(非常有讽刺意义)
- 带您认识弱电工程中常见光纤接头,再也不用傻傻分不清楚
- openpyxl创建excel工作表
- 可靠数据传输(rdt)实现的底层原理
- mysql 索引加锁分析
- 剩余运算符和展开运算符
- 如何解决layui弹出层闪退的问题
- 创建第一个适用于Android的自定义Gradle插件-第2部分:在构建时生成资源
热门文章
- java jpa 模糊查询_JPA 以SQL实现分页不模糊查询(参数可能为空)
- Android 发起加入QQ群、打开网址、启动拨打电话界面
- 网页用数学公式编辑器 可以集成到FCKeditor
- 【数据库原理及应用】经典题库附答案(14章全)——第六章:关系数据库设计过程
- Matlab 2016b+TimeSat 3.1中文经典安装及使用教程(附下载地址)
- Android之BottomNavigationView实现底部按钮水纹波效果
- 剑指offer之数组中的逆序对
- SQL UNION 和 UNION ALL 操作符(mysql)
- 查询工资最低的3名员工的职工工号、姓名和收入_普法课堂|你有多久没有收到工资条了?...
- 如何用c语言验证一个定理,验证动量定理方法一