> hi 大家好，我是 DHL。公众号：ByteCode ，专注分享最新技术原创文章，涉及 Kotlin、Jetpack、算法动画、数据结构、系统源码、 LeetCode / 剑指 Offer / 多线程 / 国内外大厂算法题等等。这篇文章我们主要来介绍如何在没有服务器，没有域名，没有证书的情况下 **快速发布你的网站**，分为 **视频版** 和 **文字版**。 ## 视频版 [视频版地址：https://www.bilibili.com/video/BV1MT4y197Ra?share_source=copy_web](https://www.bilibili.com/video/BV1MT4y197Ra?share_source=copy_web) ## 文字版哈喽，大家好，我是 DHL，你有没有遇到过这么一个情况，希望通过域名就可以在手机，电脑，ipad 访问自己开发的网站，想去百度有不知道搜索什么关键词。知道怎么搜索，但是百度完了之后，看到需要学习这么多技术，就放弃了。网站花了很长时间终于部署好了，但是别人访问你的网站的时候总是提示这是一个不安全的网站，最后才知道还需要配置 Https 证书，设置端口等等。 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2aa196c5d5eb4797bfce7b83a9d76d49~tplv-k3u1fbpfcp-watermark.image?) 这一期的视频，将会帮助你快速解决这些问题，让不懂技术的小伙伴，没有服务器，没有域名，没有任何资源的情况下，也能够在几秒钟之内快速完成一个网站的部署，视频很短，请耐心看完，相信对你以后的工作和学习会有很大的帮助。 ### 部署网站都需要做那些事情首先我们先来看一下完成一个网站的部署都需要做那些事情： ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6067e3378014674bd1acfc52194a60f~tplv-k3u1fbpfcp-watermark.image?) 整个流程不仅麻烦、而且购买域名、服务器价格也是非常昂贵，但是有没有更加简单、高效的方式，可以快速的完成一个网站的部署。这就是我们今天重点介绍 Vercel，Vercel 帮我们把大部分工作都实现了自动化，可以在几秒钟之内完成一个网站的部署。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab29224431bf46958de9a26e1ee5ae53~tplv-k3u1fbpfcp-watermark.image?) ### Vercel 是一个什么样的网站 Vercel 它是一个免费的网站托管平台，也是我目前用过最好的网站托管平台，不仅仅可以部署静态网站，而且还可以部署动态网站，所以我们可以拿 vercel 充当你免费的服务器，主要有以下好处。 * 关联 github，只需要往 github 提交代码，它会自动获取最新的提交，然后自动部署 * 提供了免费的域名，省去了申请域名的问题，如果有自己的域名，还可以做个域名解析到这个平台上 * 提供了免费的 Https 证书，如果证书到期了，它会自动替换，完全不需要操心 * 傻瓜式的部署方式，它的操作非常简单，Vercel 提供了两种方式：通过命令行部署、通过 Vercel 提供管理后台部署，这期视频我们主要介绍通过命令行部署，因为命令行的部署方式更加简单 #### 通过命令行部署这些命令不需要记，使用的时候复制粘贴就行。每个命令是什么意思，我都已经备注好了，最后我会放在评论区分享给大家。 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be1d0a1ddee34784a571c1158e313ca1~tplv-k3u1fbpfcp-watermark.image?) **注册 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` 登陆你注册的账户。 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b85e02acab64bd199405b204f244542~tplv-k3u1fbpfcp-watermark.image?) 可以选择多种登陆方式，你用什么方式注册的，就选择什么登陆方式即可，这里我们选择 github 登陆，将会弹出一个网页，验证登陆成功之后，就可以部署你的网站了。完成一个网站的部署只需要三步： 1. 首先我们需要准备一个网页网页可以直接从网上去下载免费的网站模板，这里我已经提前下载好了一个网页，接下来我们要将这个网页部署到 Vercel，实现在任何设备上都可以访问 2. 进入你存放网页的文件夹打开终端输入 cd 将存放网页的文件夹拖入终端，按回车即可进入存放网页的文件夹 3. 然后输入 `vc` 上传你网页到 Vercel，在上传之前, Vercel 提示我们需要做简单的配置，这里什么都不需要管，一直回车就好了 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a6b7105aaf64704b7c3c02574586e26~tplv-k3u1fbpfcp-watermark.image?) 等待一会，部署完成之后 Vercel 将会生成一个以 vercel. App 结尾的域名，复制粘贴在浏览器上即可运行，到这里我们已经完成了网站的部署了。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7fbac1d09e114242ad98de7dbe999b1b~tplv-k3u1fbpfcp-watermark.image?) 如果生成的域名不是你想要的，我们也可以进入 Vercel 管理后台更改你的域名。（具体如何操作，可以查看视频） **通过命令 vc --prod 更新本地网页** 如果更新了已经部署成功的网页，比如修改了图片、文字等等，在终端下输入 `vc --prod`, 提示成功之后，刷新一下网页，你修改内容就会显示出来了。

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

代码不止，文章不停

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

--- 最后推荐长期更新和维护的项目： * 个人博客，将所有文章进行分类，欢迎前去查看 [https://hi-dhl.com](https://hi-dhl.com) * KtKit 小巧而实用，用 Kotlin 语言编写的工具库，欢迎前去查看 [KtKit](https://github.com/hi-dhl/KtKit) * 计划建立一个最全、最新的 AndroidX Jetpack 相关组件的实战项目以及相关组件原理分析文章，正在逐渐增加 Jetpack 新成员，仓库持续更新，欢迎前去查看 [AndroidX-Jetpack-Practice](https://github.com/hi-dhl/AndroidX-Jetpack-Practice) * LeetCode / 剑指 offer / 国内外大厂面试题 / 多线程题解，语言 Java 和 kotlin，包含多种解法、解题思路、时间复杂度、空间复杂度分析
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db906a26bae54f57a3c255648996ee4e~tplv-k3u1fbpfcp-watermark.image?) * 剑指 offer 及国内外大厂面试题解：[在线阅读](https://offer.hi-dhl.com) * LeetCode 系列题解：[在线阅读](https://leetcode.hi-dhl.com) **近期必读热门文章** * [这是最棒的效率工具集，打通 Notion x 云盘 x 其他笔记软件，写作、设计、开发都会用到工具](https://mp.weixin.qq.com/s/mshdTnxML-BtfcgO15ni5Q) * [Android 12 已来，你的 App 崩溃了吗？](https://mp.weixin.qq.com/s/NuqAYoUq_0OorM1rVHUEHA) * [Kotlin 宣布一个重磅特性](https://mp.weixin.qq.com/s/oS8r2DieTYBhFuyWF6jx9w) * [Google 宣布废弃 LiveData.observe 方法](https://mp.weixin.qq.com/s/fp1ZOmqAcEBv2f7ec1r-zw) * [使用 kotlin 需要注意的一个细节](https://mp.weixin.qq.com/s/7ZoBeSK97j4YWXTGX9vEYA) * [影响性能的 Kotlin 代码（一）](https://mp.weixin.qq.com/s/8dAbt1-mcCVLWLXKC-1_xw) * [Jetpack Splashscreen 解析 | 助力新生代 IT 农民工事半功倍](https://mp.weixin.qq.com/s/1jTdPgXbNl38smOnN2k1MA) * [为数不多的人知道的 Kotlin 技巧及解析(三)](https://mp.weixin.qq.com/s/lcLJB0MFaYX1lQXtJ3M88g) * [揭秘 Kotlin 中的 == 和 ===](https://mp.weixin.qq.com/s/sYj_-wqENr9Jaw1p8iP4Jg) * [Kotlin 密封类进化了](https://mp.weixin.qq.com/s/0O-ZnbVnHUnh3jCnthKgHA) * [Kotlin 中的密封类优于带标签的类](https://mp.weixin.qq.com/s/VNxFVGvDU-X3lfenehkGtw) * [Kotlin Sealed 是什么？为什么 Google 都在用](https://mp.weixin.qq.com/s/X1jEUFS8vmRF9ybkmVy5zQ)