共计 2420 个字符,预计需要花费 7 分钟才能阅读完成。
用最简略的形式,带你上线本人的网站!
大家好,我是鱼皮。
置信每位学编程的同学都想要领有一个本人的网站,比方集体博客,能够拿来记录本人的学习过程、分享本人的文章、展现作品等,从而激励本人继续学习和总结。
那么明天这篇文章,指标很简略,我要用 新技术 带 所有同学 从 0 到 1 疾速上线一个本人的网站!
给我 5 分钟,我给你全世界。
上线网站极简教程
让咱们先来理解下传统的上线网站流程。
传统形式
如果咱们要上线集体博客网站,供其他同学拜访,那么须要经验如下步骤:
- 筹备一份集体博客网站的源代码
- 购买一台有公网 IP 的服务器
- 把网站文件放到服务器上,并装置 web 服务器软件提供网页拜访能力
- 购买一个域名
- 配置 DNS 解析,把域名指向服务器的 IP 地址
- 如果要进步网站访问速度,自行购买 CDN
流程图如下:
听起来就感觉麻烦,而且这一套流程下来起码也要 1 个小时。这也是为啥很多同学只是有上线集体网站的想法,却从未实现。
然而,昨天我却只用 5 分钟,就上线了本人的网站,怎么做到的呢?
上面引出明天的配角 Webify
。
Webify
Webify 是腾讯云提供的 一站式 Web 利用托管服务,帮忙大家极速开发、部署、上线网站我的项目。
什么是一站式呢?
就是一条龙服务,只有你有一套网页代码,无论是动态、动静网站还是其余类型的 web 利用,都能应用 Webify 傻瓜式部署。由它提供服务器、默认域名、自定义域名、HTTPS、CDN 减速,晋升 Web 利用的性能和安全性。
换言之,如果应用 Webify 上线集体博客,你只须要:
- 筹备一份集体博客网站的源代码
- 进入 Webify 控制台,抉择源码和配置
- 一键公布
流程大大精简了!
此外,Webify 还提供基于 Git 工作流的 DevOps 流程,每次批改代码都能主动从新构建部署,不必再登录服务器本人操作了!
听起来挺爽,上面咱们一起试着用 Webify 上线集体博客。
Webify 实战
地址:https://cloud.tencent.com/product/webify
首先进入 Web 利用托管平台,新建一个利用。
一个利用对应一个网站我的项目,这里提供两种新建利用的形式:Git 导入和从模板创立。
Git 导入创立利用
Git 导入实用于已有网站源代码的形式,只有你的代码存在于 Git 托管平台,就能间接在 Webify 导入。
比方咱们想要上线集体博客,先要有一套博客源代码。能够本人写代码;也能够间接应用一些现成的站点生成器,比方 Hugo、Hexo 等(前面具体介绍),主动生成源代码;当然还能够下载、克隆他人的我的项目代码。搞到代码后,把它上传到 GitHub 或 Gitee 等代码托管平台就能够被 Webify 导入了。
导入之后须要依据利用的技术栈和类型,填写构建命令等配置。这里能够间接抉择预设配置,比方你的我的项目用到了 Vue.js,能够间接抉择对应的预设,不必填写就能主动配置:
从模板创立利用
如果咱们啥代码都没有,也搞不来代码,咋办?
也没有关系,Webify 内置了一些我的项目模板,间接抉择须要的利用创立即可。比方咱们要做集体博客,能够抉择 Docusaurus 2 这款支流的站点生成器:
选中模板后,零碎会主动把代码模板复制到新的 Git 仓库,和利用关联。
Webify 会主动给 Git 仓库配置 Webhooks,后续每当仓库的代码产生变更(push)时,都会主动触发利用的重新部署,无需再跑到服务器上改代码了!
点击下一步,进入利用配置,因为咱们应用的是零碎预设模板,什么都不必改,用默认配置就行了。
点击部署按钮,稍等几分钟,利用就创立胜利了!
利用详情
能够在利用列表和部署记录中查看到新建实现的利用:
点击新建的利用,进入利用详情页:
能够查看到利用的详细信息,比方零碎为咱们提供的默认我的项目域名,点击之后就能拜访到已上线的博客网站啦!
利用详情中还有一个所属环境信息,那是啥呢?
其实在部署过程中,零碎会主动创立一个 云开发
环境,依据配置的命令主动构建我的项目,将构建产物放到 动态网站托管
上。
能够在云开发控制台看到曾经上传到服务器上的文件:
在动态网站托管页面,能够批改已上传的文件,批改 CDN 缓存设置等:
想要理解什么是云开发?欢送浏览我之前的文章:我和云开发。
进入利用详情的设置页,能够给我的项目增加自定义域名、批改利用构建配置、删除利用等:
继续公布
上面让咱们给本人的博客网站增加一篇文章,进入到利用对应的 Git 仓库,在 docs/tutorial-basics
门路下新建一个 .md
后缀文件,输出博客题目和内容。
点击 commit
按钮,本次代码改变将主动 push 到主分支:
当然,更好的形式是把代码仓库拉取到本地,在本地批改后再 push 到近程。能够先 push 到 dev 分支,确认代码没问题后再合并到 master 分支。
代码 push 之后,事件会通过 Webhooks 传递给 Webify,主动触发重新部署,等一段时间后就能够看到新的部署记录:
再次拜访网站地址,就可能看到新增的博客啦!
如果没有立刻看到更新,可能是因为 CDN 的缓存(默认 2 分钟),导致没有拉取到最新的资源,等个几分钟就好了。
OK,从 0 到 1 上线网站成就达成。前面大家能够参考 Docusaurus 站点生成器的官网文档,更改代码和配置,进一步定制本人的博客。
应用感触
其实这个货色并不算新技术了,产品状态和体验上相似 Vercel 和 Github Pages。不过长处是 Webify 在国内,提供了高速 CDN;还可能和其余云产品买通、造成体系。
应用 Webify 上线网站还是很爽的,整个流程非常简单、易上手,着实省去了很多本人上线网站的琐碎流程。无论是对想疾速上线本人网站的同学、还是 web 开发爱好者,都是不错的抉择。
还有重要的一点要揭示大家,世上没有收费的午餐,Webify 依靠于云开发,也是要免费的(提供 1 个月的收费体验),但绝对于本人购买服务器(即便是学生机),性价比也是更高的。
最初,我还公布了 Webify 疾速上手视频教程演示了另一个博客零碎的上线,欢送观看。
Webify 疾速上手视频教程
技术交换群