专栏首页鱼皮客栈5 分钟,从 0 到 1 上线个人网站!
原创

5 分钟,从 0 到 1 上线个人网站!

用最简单的方式,带你上线自己的网站!

大家好,我是鱼皮。

相信每位学编程的同学都想要拥有一个自己的网站,比如个人博客,可以拿来记录自己的学习过程、分享自己的文章、展示作品等,从而激励自己持续学习和总结。

那么今天这篇文章,目标很简单,我要用 新技术所有同学 从 0 到 1 快速上线一个自己的网站!

给我 5 分钟,我给你全世界。

上线网站极简教程

让我们先来了解下传统的上线网站流程。

传统方式

假如我们要上线个人博客网站,供其他同学访问,那么需要经历如下步骤:

  1. 准备一份个人博客网站的源代码
  2. 购买一台有公网 IP 的服务器
  3. 把网站文件放到服务器上,并安装 web 服务器软件提供网页访问能力
  4. 购买一个域名
  5. 配置 DNS 解析,把域名指向服务器的 IP 地址
  6. 如果要提高网站访问速度,自行购买 CDN

流程图如下:

传统网站上线流程

听起来就觉得麻烦,而且这一套流程下来最少也要 1 个小时。这也是为啥很多同学只是有上线个人网站的想法,却从未实现。

但是,昨天我却只用 5 分钟,就上线了自己的网站,怎么做到的呢?

下面引出今天的主角 Webify

Webify

Webify 是腾讯云提供的 一站式 Web 应用托管服务,帮助大家极速开发、部署、上线网站项目。

什么是一站式呢?

就是一条龙服务,只要你有一套网页代码,无论是静态、动态网站还是其他类型的 web 应用,都能使用 Webify 傻瓜式部署。由它提供服务器、默认域名、自定义域名、HTTPS、CDN 加速,提升 Web 应用的性能和安全性。

换言之,如果使用 Webify 上线个人博客,你只需要:

  1. 准备一份个人博客网站的源代码
  2. 进入 Webify 控制台,选择源码和配置
  3. 一键发布

流程大大精简了!

Webify 上线网站流程

此外,Webify 还提供基于 Git 工作流的 DevOps 流程,每次修改代码都能自动重新构建部署,不用再登录服务器自己操作了!

听起来挺爽,下面我们一起试着用 Webify 上线个人博客。

Webify 实战

地址:https://cloud.tencent.com/product/webify

首先进入 Web 应用托管平台,新建一个应用。

一个应用对应一个网站项目,这里提供两种新建应用的方式:Git 导入和从模板创建。

Web 应用托管平台

Git 导入创建应用

Git 导入适用于已有网站源代码的方式,只要你的代码存在于 Git 托管平台,就能直接在 Webify 导入。

比如我们想要上线个人博客,先要有一套博客源代码。可以自己写代码;也可以直接使用一些现成的站点生成器,比如 Hugo、Hexo 等(后面详细介绍),自动生成源代码;当然还可以下载、克隆别人的项目代码。搞到代码后,把它上传到 GitHub 或 Gitee 等代码托管平台就可以被 Webify 导入了。

导入之后需要根据应用的技术栈和类型,填写构建命令等配置。这里可以直接选择预设配置,比如你的项目用到了 Vue.js,可以直接选择对应的预设,不用填写就能自动配置:

新建应用

从模板创建应用

如果我们啥代码都没有,也搞不来代码,咋办?

也没有关系,Webify 内置了一些项目模板,直接选择需要的应用创建即可。比如我们要做个人博客,可以选择 Docusaurus 2 这款主流的站点生成器:

从模板创建

选中模板后,系统会自动把代码模板复制到新的 Git 仓库,和应用关联。

Webify 会自动给 Git 仓库配置 Webhooks,后续每当仓库的代码发生变更(push)时,都会自动触发应用的重新部署,无需再跑到服务器上改代码了!

自动配置 Webhooks

点击下一步,进入应用配置,由于我们使用的是系统预设模板,什么都不用改,用默认配置就行了。

应用配置

点击部署按钮,稍等几分钟,应用就创建成功了!

应用详情

可以在应用列表和部署记录中查看到新建完成的应用:

点击新建的应用,进入应用详情页:

应用详情

可以查看到应用的详细信息,比如系统为我们提供的默认项目域名,点击之后就能访问到已上线的博客网站啦!

生成的博客网站

应用详情中还有一个所属环境信息,那是啥呢?

其实在部署过程中,系统会自动创建一个 云开发 环境,根据配置的命令自动构建项目,将构建产物放到 静态网站托管 上。

可以在云开发控制台看到已经上传到服务器上的文件:

在静态网站托管页面,可以修改已上传的文件,修改 CDN 缓存设置等:

修改 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 视频教程,演示了另一个博客系统的上线。

指路:https://www.bilibili.com/video/BV11V411p7vf/

我是鱼皮,欢迎阅读 我从 0 自学进入腾讯的编程学习、实习、求职、考证、写书经历,不再迷茫!

我学计算机的四年,共勉!

点赞 还是要求一下的,祝大家都能心想事成、发大财、行大运。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    相信每位学编程的同学都想要拥有一个自己的网站,比如个人博客,可以拿来记录自己的学习过程、分享自己的文章、展示作品等,从而激励自己持续学习和总结。

    腾讯云开发TCB
  • 干货!从0到1教你打造一个令人上瘾的聊天机器人?

    在过去的几个月里,我一直在做机器人,做了很多个。以下是我在这个过程中总结出的一些经验:

    AI科技大本营
  • 『互联网架构』软件架构-从0到1认知分布式架构(上)(38)

    PS:另外分享一个心得:很多公司需要一套框架,业内有比较成熟的开源系统,但是技术经理还是要选择自主去开发一套,这是为什么呢?为了kpi,大公司kpi要求比较高,...

    IT架构圈
  • 只需1分钟,这个网站用AI分离歌曲的人声、伴奏和乐器声

    疫情期间,在家待着闲来无事,一些技术人员就喜欢以技术的方式找点乐子,顺带赚钱最好了。

    AI科技大本营
  • 手把手教你 3 分钟搞定个人网站 http 免费升级到 https

    阿里云有免费的 ssl 证书,一年时间没操作 ssl 证书了,阿里云竟然把免费证书入口给隐藏了,害我提交了一次工单。

    业余草
  • 从零开始部署到上线:手把手教你搭建属于自己的个人博客网站!

    现在是互联网逐渐发展,已经出现了很多可以供自己写博客的网站,大家可以在上面 发表自己的文章,供自己记录或者是供他人阅读。但是,可不可以自己搭建一个只属于自己的个...

    YO哥教你大数据
  • 服务器性能指标——负载(Load)分析及问题排查

    随着 Internet 的快速发展和业务量的不断提高,基于网络的数据访问流量迅速增长,特别是对数据 中心、大型企业以及门户网站等的访问,其访问流量甚至达到了 1...

    民工哥
  • 网络时钟同步才是智能变电站的基础建设

    在现代电网中,统一的时间系统对于电力系统的故障分析、监视控制及运行管理具有重要意义。变电站的对时是指站内的保护、测量、监控设备为了统一时间的需要,采用相应的对时...

    NTP网络同步时钟
  • 地铁有多挤,生活就有多不易

    张宏伦
  • 【谷歌机器学习课程公开了!】Google AI 教育项目今起免费开放,完美支持中文

    ---- 新智元报道 作者:马文、克雷格 【新智元导读】3月的第一天,谷歌就为各级别的AI开发者和研究人员带来了福利:免费的机器学习和人工智能课程。首...

    新智元
  • 【谷歌机器学习课程公开了!】Google AI 教育项目今起免费开放,完美支持中文

    【新智元导读】3月的第一天,谷歌就为各级别的AI开发者和研究人员带来了福利:免费的机器学习和人工智能课程。首先推出的机器学习速成班课程约为15小时,包括互动课程...

    朱晓霞
  • Caffe:CPU模式下使用openblas-openmp(多线程版本)

    版权声明:本文为博主原创文章,转载请注明源地址。 https://blog.csdn.net...

    用户1148648
  • 真的那么巧吗?——加油站停业改造就遇上停电

    2016年4月28日上午,腾讯数据中心高级工程师小K突然收到一张微信图片——《关于F加油站(腾讯B机房协议油站)停业改造升级的通知》。 ? 小K当时心想,改就...

    腾讯数据中心
  • 北斗授时,电网时钟基准急需高精度北斗授时服务

    由于历史的原因,我国目前的电力行业的时间同步系统的时钟源大都采用米国GPS系统做为主时钟源。 目前,GPS是米国军方控制的军民共用的系统,对全世界开放。我国目前...

    NTP网络同步时钟
  • 被攻击了!云开发监控告警实战

    前段时间,我的网站疑似被攻击了,今天带大家一起来事故现场看看,并且分享事故分析思路和事后防控手段。

    程序员鱼皮
  • 史上最全 Python 爬虫抓取的技巧总结

    学用python也有3个多月了,用得最多的还是各类爬虫脚本:写过抓代理本机验证的脚本,写过在discuz论坛中自动登录自动发贴的脚本,写过自动收邮件的脚本,写过...

    小小科
  • Java初级开发0608面试

    Docker是一个容器,就像是集装箱,将软件系统运行所需的环境如jdk、MySQL、消息队列等等装起来,这样就像是搬运货物一样,软件开发所需的环境就能在不同的硬...

    三分恶
  • Qt音视频开发24-ffmpeg音视频同步

    用ffmpeg来做音视频同步,个人认为这个是ffmpeg基础处理中最难的一个,无数人就卡在这里,怎么也不准,本人也是尝试过网上各种demo,基本上都是渣渣,要么...

    feiyangqingyun
  • 腾讯云最新优惠--腾讯云视频优惠-腾讯云在线教育-基础型套餐

    腾讯云音视频通话、直播、点播、小程序等丰富视频产品组合,特惠8折起 80%直播领军企业的信赖之选

    用户5892323

扫码关注云+社区

领取腾讯云代金券