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

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

本文由贝壳找房的前端工程师刘成帅(Jacob)带来,文中介绍了如何运用云开发CloudBase,免服务器、免域名快速搭建个人站点的方式。一起学习吧~

前言

最近笔者在复习 JavaScript 基础知识,刚看完 《JavaScript 高级程序设计(第四版)》,想再找一些优秀代码库巩固一下学到的内容,自然而然的就想到了 Lodash

此库在笔者公司使用率极高,因此想深入研究下源码并输出系列分析文章。而线上大多源码分析大多都是自己搭建的文档网站,于是就到了这篇文章的主题,快速搭建一个文档网站。

其实笔者是有一个服务器的,但是服务器确实带宽有限,再加上还得自己配置 NGINX、GitHub Action 以及 https 证书等内容。

很巧看到了云开发 CloudBase 服务,可以快速搭建静态网站,如果你没有域名的话会自动分配一个域名,也可以很方便地申请并配置 https 证书,如果搭配 GitHub Action 使用的话可以说是完全不用考虑服务器维护的内容了。

接下来就来讲一下如何搭建以及部署。

搭建及部署

本文是以 VuePress 为例进行搭建部署,VitePress、Next、Docsify 等部署大同小异。

项目初始化

1 . 安装 CLI

npm install -g @cloudbase/cli@latest

2 . 初始化一个应用

tcb new cloudbase-test vuepress

使用该 CLI 是需要进行登录的,如果 CLI 检测到你当前没有登录的话会自动打开浏览器跳转到腾讯云登录页面,登录成功后返回命令行,继续下一步操作:

接下来选择你认为合适的一个服务器地点,在这里我选择上海。

接下来会选择关联环境,如果你当前没有环境的话可直接选择「创建新环境」,CLI 会自动打开浏览器跳转到「创建新环境」页面,创建新环境如下图,在这里我选择使用 VuePress 模板进行创建:

选择完成后点击下一步即可:


创建成功后返回命令行,会显示正在初始化环境,稍等几分钟就可以直接创建项目。创建成功后会生成以下目录结构的项目:

├── README.md
├── cloudbaserc.json
├── guides
│   └── README.md
└── package.json

项目部署

1 . 安装依赖

npm i

2 . 构建部署

npm run deploy

3 . 部署成功

执行 npm run deploy 稍等片刻之后即可部署成功,命令行会返回一个访问域名,笔者的为:https://cloudbase-test-9gccjnk3e393c02a-1256377994.tcloudbaseapp.com/vuepress/ ,点击即可访问示例网站,如下:

到这里为止,其实部署工作就算是结束了,无需自己配置 NGINX 等复杂繁琐的操作,这就是云服务的魅力,同时该服务按量计费,对于笔者来说费用可以说是非常低了。

但是,仅此还不够,我们要配置 GitHub Action 之后,才能算完全放手部署这件事,做到完全自动化,将日常工作精力专注于文档编写就可以了。

GitHub Action 配置

如果初始化了一个项目的话,会看到项目中有一个 cloudbaserc.json 文件,该文件为 CloudBase 配置文件,文件中有一个 envId 配置项,这属于敏感信息,请注意千万不要上传到 GitHub 中,将该配置信息从 cloudbaserc.json删除

既然不能上传的话,我们应该如何配置呢,答案很简单,使用 GitHub secret 即可。需要在 腾讯云控制台 新建秘钥,新建完成后,打开你的 GitHub 仓库进行如下设置:

创建 ENVID、SECRETID、SECRETKEY 三条 secret,其中 ENVID 在 应用列表中可见,配置完成后如下所示:

接下来在项目的 .github/workflows 目录下创建 deploy.yml 文件,内容如下:

name: 自动化部署on:push:branches: [ master ]pull_request:branches: [ master ]jobs:deploy:runs-on: ubuntu-latestname: deploysteps:- name: Checkoutuses: actions/checkout@v2- name: Deploy to Tencent CloudBaseuses: TencentCloudBase/cloudbase-action@v2with:secretId: ${{ secrets.SECRETID }}secretKey: ${{ secrets.SECRETKEY }}envId: ${{ secrets.ENVID }}

然后将你的项目代码 push 到 GitHub 就可以完成自动化部署了,之后就可以专心进行文档编写,无需关心服务器维护这样的事情了。

总结

像云开发CloudBase 这样的云服务可以说真的方便了很多,可以直接部署自己的静态博客或者文档等站点,一键部署,无需运维,岂不美哉。

前面说到笔者最近正在写 lodash 源码解析,地址是:lodash.lcs.show。

GitHub 地址为: https://github.com/jacob-lcs/lodash-source-code-analysis,当然还处于刚开始的阶段,大家有兴趣的话欢迎关注。

产品介绍

云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、自动弹性扩缩的后端云服务,包含计算、存储、托管等serverless化能力,可用于云端一体化开发多种端应用(小程序,公众号,Web 应用,Flutter 客户端等),帮助开发者统一构建和管理后端服务和云资源,避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
开通云开发:https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档:https://cloud.tencent.com/product/tcb?from=12763
技术文档:https://cloudbase.net?from=10004
技术交流加Q群:601134960
最新资讯关注微信公众号【腾讯云云开发】

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

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

相关文章

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

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

用云开发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本命英雄测试入口...

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

让搜索引擎快速收录网站

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

针对Seoer提出的争议性问题进行解答

很多东西都没有唯一、没有绝对,seo技术和知识同样也是如此,可能适合自己的优化方法和套路,对别人不会起到多少的效果,因为seo是一个综合性的评判,它跟行业的不同、网站的不同、甚至细节的不同都会有截然不同的结果&…

边玩边学,15个学习Python 的编程游戏网站!

经常听到有朋友说,学习编程是一件非常枯燥无味的事情。其实,大家有没有认真想过,可能是我们的学习方法不对? 比方说,你有没有想过,可以通过打游戏来学编程? 今天我想跟大家分享几个网站&#…

关于下载cuda和cudnn官方网站访问不了的替代方案

一、背景 最近一段时间在做深度学习Tensorflow2.x的项目,由于涉及到了docker环境下的tensorfow的GPU加速,于是我就在电脑(飞行堡垒)装双系统win10ubuntu,后改成了win10上面装WSL(Win10的linux子系统)。由于前边装双系统的过程中系统出了一些…

url后面的参数是什么_网络运营之SEO优化:如何做网站URL优化

网站URL链接是组成一个完整网站不可缺少的重要部分,在日常工作和生活中,我们几乎脱离不了URL链接。当前主流搜索引擎的存在也是依靠海量的URL链接才能正常运作,网站SEO优化工作同样需要考虑URL链接的优化。今天就跟大家聊聊“SEO优化之如何做…

6月第4周国内B2B类网站排名Top15:阿里巴巴居首

IDC评述网(idcps.com)07月03日报道:根据国际统计机构Alexa公布的最新数据显示,6月第4周(2013-06-24至2013-06-30),我国B2B类网站中,阿里巴巴以100538的周均用户覆盖数摇摇领先于其他网站,持续稳…

读后小结:《大型网站技术架构:核心原理与案例分析》

浏览《大型网站技术架构:核心原理与案例分析》,然后作了一个小结(下图),作为知识结构梳理,分享大家,并以备参考。 PS:需要在新窗口/标签打开,或下载,才可查看原图。 於霄云中心 20…