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



近期必读热门文章



目录
相关文章
|
3月前
|
移动开发 安全 SEO
如何自己搭建一个网站
今天的文章总结适合0基础,网站搭建的技巧和流程,哪怕你是小白,不会编程,也可以制作非常漂亮且实用的企业网站、政务网站、学校网站等,如果想做个人博客更是不在话下。希望我的经验能帮助更多没有过多的经费、没有建站基础的朋友。用户跟着我的文章流程基本上一周就可以快速搭建出一个高端、大气、具有营销型、自动SEO、H5的网站。
|
关系型数据库 MySQL Apache
Discuz贴吧建站的搭建及维护(windows系统)
Discuz贴吧建站的搭建及维护(windows系统)
223 0
|
NoSQL Redis
个人博客 网站部署
个人博客 网站部署
74 0
|
关系型数据库 PHP Apache
搭建Magento电子商务网站
Magento是一款开源电商网站框架,其丰富的模块化架构体系及拓展功能可为大中型站点提供解决方案。本教程主要介绍如何在CentOS 7.7操作系统的ECS实例上部署LAMP环境及搭建Magento电子商务网站。
|
域名解析 弹性计算 安全
用阿里云服务器搭建一个自己的网站(网站已上线啦)
用阿里云服务器搭建一个自己的网站(网站已上线啦),使用阿里云服务器快速搭建网站教程,先为云服务器安装宝塔面板,然后在宝塔面板上新建站点,阿里云服务器网以搭建WordPress网站博客为例,来详细说下从阿里云服务器CPU内存配置选择、Web环境、域名解析到网站上线全流程:
253 0
|
存储 自然语言处理 安全
wordpress搭建外贸网站容易吗?
wordpress搭建外贸网站容易吗?WordPress是一款优秀的开源网站建设工具,可用于搭建各类型网站,包括外贸网站。以下是创建外贸网站所需的一些步骤:
wordpress搭建外贸网站容易吗?
|
域名解析 小程序 网络协议
1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站
1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站
202 0
|
SQL 安全 前端开发
5 个常见的 WordPress 建站安全问题
最常见的 WordPress 安全问题发生在您的网站受到威胁之前或之后。黑客的目标是从前端(您的 WordPress 仪表板)或服务器端(通过插入脚本或恶意文件)在管理员级别获得对您的 WordPress 网站的未授权访问
|
开发者
云上 WordPress 网站的管理|学习笔记
快速学习云上 WordPress 网站的管理
云上 WordPress 网站的管理|学习笔记
|
弹性计算 关系型数据库 MySQL
阿里云学生服务器初体验与基本网站搭建
一.自我介绍 二.PHP环境搭建 1.进入ECS控制台,连接服务器 2.下载安装PHP 3.下载安装扩展包 4.启动PHP 5.设置开机自启 6.重启PHP 三.apache的安装 1.下载安装apache 2.启动apache 3.检查apache状态 四.网页上传 1.使用xftp连接数据库 2.上传自己的网页 五.总结
阿里云学生服务器初体验与基本网站搭建