1分钟搭建一个网站,网站部署从未如此简单,不懂技术也可以

本文涉及的产品
.cn 域名,1个 12个月
简介: 这篇文章我们主要来介绍如何在没有服务器,没有域名,没有证书的情况下 快速发布你的网站,分为 视频版 和 文字版。

image.png


hi 大家好,我是 DHL。公众号:ByteCode ,专注分享最新技术原创文章,涉及 Kotlin、Jetpack、算法动画、数据结构、系统源码、 LeetCode / 剑指 Offer / 多线程 / 国内外大厂算法题等等。


这篇文章我们主要来介绍如何在没有服务器,没有域名,没有证书的情况下 快速发布你的网站,分为 视频版文字版


视频版



视频版地址:https://www.bilibili.com/video/BV1MT4y197Ra?share_source=copy_web


文字版



哈喽,大家好,我是 DHL,你有没有遇到过这么一个情况,希望通过域名就可以在手机,电脑,ipad 访问自己开发的网站,想去百度有不知道搜索什么关键词。


知道怎么搜索,但是百度完了之后,看到需要学习这么多技术,就放弃了。


网站花了很长时间终于部署好了,但是别人访问你的网站的时候总是提示这是一个不安全的网站,最后才知道还需要配置 Https 证书,设置端口等等。


image.png


这一期的视频,将会帮助你快速解决这些问题,让不懂技术的小伙伴,没有服务器,没有域名,没有任何资源的情况下,也能够在几秒钟之内快速完成一个网站的部署,视频很短,请耐心看完,相信对你以后的工作和学习会有很大的帮助。


部署网站都需要做那些事情


首先我们先来看一下完成一个网站的部署都需要做那些事情:


image.png


整个流程不仅麻烦、而且购买域名、服务器价格也是非常昂贵,但是有没有更加简单、高效的方式,可以快速的完成一个网站的部署。


这就是我们今天重点介绍 Vercel,Vercel 帮我们把大部分工作都实现了自动化,可以在几秒钟之内完成一个网站的部署。


image.png


Vercel 是一个什么样的网站


Vercel 它是一个免费的网站托管平台,也是我目前用过最好的网站托管平台,不仅仅可以部署静态网站,而且还可以部署动态网站,所以我们可以拿 vercel 充当你免费的服务器,主要有以下好处。


  • 关联 github,只需要往 github 提交代码,它会自动获取最新的提交,然后自动部署
  • 提供了免费的域名,省去了申请域名的问题,如果有自己的域名,还可以做个域名解析到这个平台上
  • 提供了免费的 Https 证书,如果证书到期了,它会自动替换,完全不需要操心
  • 傻瓜式的部署方式,它的操作非常简单,Vercel 提供了两种方式:通过命令行部署、通过 Vercel 提供管理后台部署,这期视频我们主要介绍通过命令行部署,因为命令行的部署方式更加简单


通过命令行部署


这些命令不需要记,使用的时候复制粘贴就行。每个命令是什么意思,我都已经备注好了,最后我会放在评论区分享给大家。


image.png


注册 Vercel 账号


在使用之前需要注册 Vercel 账号,Vercel 提供了多种方式支持 Github 也支持邮箱注册,所以你可以选择一个常用的方式。


安装和登录 Vercel 客户端


当我们注册好账号之后,需要安装 Vercel 客户端,Vercel 提供了两种安装方式 npm 和 yarn。


npm i -g vercel
或者 
yarn global add vercel


PS:如果提示 npm 或者 yarn 没有找到,需要安装 npm 或者 yarn,安装教程我会放在评论区


首先我们打开终端。Mac 用户通过  command (花键) + 空格打开搜索框输入终端。 Win 用户可以使用 PowerShell,复制粘贴对应的命令,即可开始下载安装 Vercel 客户端。


登陆和发布你的网页(具体如何操作,可以查看视频)


安装完成之后,输入 vc login 登陆你注册的账户。


image.png


可以选择多种登陆方式,你用什么方式注册的,就选择什么登陆方式即可,这里我们选择 github 登陆,将会弹出一个网页,验证登陆成功之后,就可以部署你的网站了。完成一个网站的部署只需要三步:


  1. 首先我们需要准备一个网页
    网页可以直接从网上去下载免费的网站模板,这里我已经提前下载好了一个网页,接下来我们要将这个网页部署到 Vercel,实现在任何设备上都可以访问
  2. 进入你存放网页的文件夹
    打开终端输入 cd 将存放网页的文件夹拖入终端,按回车即可进入存放网页的文件夹
  3. 然后输入 vc 上传你网页到 Vercel,在上传之前, Vercel 提示我们需要做简单的配置,这里什么都不需要管,一直回车就好了


image.png


等待一会,部署完成之后 Vercel 将会生成一个以 vercel. App 结尾的域名,复制粘贴在浏览器上即可运行,到这里我们已经完成了网站的部署了。


image.png


如果生成的域名不是你想要的,我们也可以进入 Vercel 管理后台更改你的域名。(具体如何操作,可以查看视频)


通过命令 vc --prod 更新本地网页


如果更新了已经部署成功的网页,比如修改了图片、文字等等,在终端下输入 vc --prod, 提示成功之后,刷新一下网页,你修改内容就会显示出来了。


如果有帮助点个赞就是对我最大的鼓励


代码不止,文章不停


欢迎关注公众号:ByteCode,持续分享最新的技术


最后推荐长期更新和维护的项目:


  • 个人博客,将所有文章进行分类,欢迎前去查看 hi-dhl.com
  • KtKit 小巧而实用,用 Kotlin 语言编写的工具库,欢迎前去查看 KtKit
  • 计划建立一个最全、最新的 AndroidX Jetpack 相关组件的实战项目以及相关组件原理分析文章,正在逐渐增加 Jetpack 新成员,仓库持续更新,欢迎前去查看 AndroidX-Jetpack-Practice
  • LeetCode / 剑指 offer / 国内外大厂面试题 / 多线程题解,语言 Java 和 kotlin,包含多种解法、解题思路、时间复杂度、空间复杂度分析


image.png



近期必读热门文章



目录
相关文章
|
安全 关系型数据库 Linux
一文教你搭建个人网盘filerun,拥有私人文件服务器
一文教你搭建个人网盘filerun,拥有私人文件服务器
一文教你搭建个人网盘filerun,拥有私人文件服务器
|
14天前
|
安全
教你如何10分钟搭建一个网站?
在快节奏的互联网上,做很多时间都需要快,包括网站搭建、也可以做到快速搭建,今天给大家分享一个10分钟搭建网站的过程
|
21天前
|
移动开发 安全 SEO
如何自己搭建一个网站
今天的文章总结适合0基础,网站搭建的技巧和流程,哪怕你是小白,不会编程,也可以制作非常漂亮且实用的企业网站、政务网站、学校网站等,如果想做个人博客更是不在话下。希望我的经验能帮助更多没有过多的经费、没有建站基础的朋友。用户跟着我的文章流程基本上一周就可以快速搭建出一个高端、大气、具有营销型、自动SEO、H5的网站。
|
12月前
|
安全 数据管理 数据安全/隐私保护
PDS实现企业网盘搭建心得体会
在试用基于PDS实现企业网盘搭建的过程中,我发现这是一个强大而灵活的解决方案,可以满足企业对于数据管理和共享的各种需求
85 2
|
12月前
|
NoSQL Redis
个人博客 网站部署
个人博客 网站部署
60 0
|
域名解析 弹性计算 安全
用阿里云服务器搭建一个自己的网站(网站已上线啦)
用阿里云服务器搭建一个自己的网站(网站已上线啦),使用阿里云服务器快速搭建网站教程,先为云服务器安装宝塔面板,然后在宝塔面板上新建站点,阿里云服务器网以搭建WordPress网站博客为例,来详细说下从阿里云服务器CPU内存配置选择、Web环境、域名解析到网站上线全流程:
217 0
|
域名解析 小程序 网络协议
1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站
1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站
142 0
|
域名解析 关系型数据库 MySQL
使用阿里云轻量服务器搭建WordPress网站上线全流程
阿里云轻量应用服务器通过WordPress应用镜像可以一键搭建WordPress博客,以及轻量服务器控制台WordPress配置方法
1175 0
使用阿里云轻量服务器搭建WordPress网站上线全流程
|
数据安全/隐私保护
阿里云服务器部署网页
本文主要介绍了使用阿里云服务器,借助FTP软件和宝塔面板,远程连接云服务器实现个人网页文件的上传与部署。
阿里云服务器部署网页
|
数据库 JavaScript 关系型数据库
使用阿里云服务搭建自己的网站
使用阿里云搭建自己的网站
下一篇
无影云桌面