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

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

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



近期必读热门文章



DHL
+关注
目录
打赏
0
0
0
0
2
分享
相关文章
Android 应用优化策略:提升性能与用户体验
【4月更文挑战第21天】在移动应用开发领域,性能优化是一个持续的挑战。尤其对于Android平台,由于设备多样性和系统版本的碎片化,开发者需要采取多种策略确保应用流畅运行并给用户带来良好体验。本文将深入探讨针对Android应用的性能优化技巧,包括内存管理、UI渲染效率提升、多线程应用以及电池寿命优化等方面。这些建议旨在帮助开发者诊断和改进现有应用,或在开发新项目时提前考虑到性能因素。
2022阿里云免费SSL证书申请全过程(图文详解)
阿里云SSL证书免费申请流程:先0元支付SSL证书资源包,每个阿里云账号可以一年可以申请20个免费SSL证书,然后域名DNS验证,提交CA审核后就可以下载SSL证书到本地了
49978 4
2022阿里云免费SSL证书申请全过程(图文详解)
部署一个网站
【10月更文挑战第9天】
249 2
【保姆级教程】基于阿里云搭建网站,看这篇就够了!
本文演示了三种网站的搭建,分别是:博客、论坛、个人作品。从域名选择,到阿里云服务器的购买,到最后的网站搭建。
【保姆级教程】基于阿里云搭建网站,看这篇就够了!
用Docker搭建运行本地WordPress
WordPress需要部署在服务端,如果我们只是为了看下效果或者测试开发使用,那就需要直接部署在本地。而我之所以想要在本地部署也是因为打算开发一个WordPress 的插件,在服务器上搭建和测试插件太不方便了。按照以前的思路是需要在本地安装 phpStudy、XAMMP 这类服务器软件,现在有了Docker 可就方便多了,只用安装相应镜像跑起来就可以了
5分钟快速上线Web应用和API(Vercel)
上周有个童鞋问我如何快速搭建一个Web应用,想拿来练手,就不考虑购置服务器。我推荐了前段时间很火的Vercel,接下来我带你5分钟上手!
一文详解几种常见本地大模型个人知识库工具部署、微调及对比选型(1)
近年来,大模型在AI领域崭露头角,成为技术创新的重要驱动力。从AlphaGo的胜利到GPT系列的推出,大模型展现出了强大的语言生成、理解和多任务处理能力,预示着智能化转型的新阶段。然而,要将大模型的潜力转化为实际生产力,需要克服理论到实践的鸿沟,实现从实验室到现实世界的落地应用。阿里云去年在云栖大会上发布了一系列基于通义大模型的创新应用,标志着大模型技术开始走向大规模商业化和产业化。这些应用展示了大模型在交通、电力、金融、政务、教育等多个行业的广阔应用前景,并揭示了构建具有行业特色的“行业大模型”这一趋势,大模型知识库概念随之诞生。
152339 30
构建你的第一个Web应用:从零到部署
【8月更文挑战第33天】 在这篇文章中,我们将一起踏上构建一个基本Web应用的旅程。不同于传统的“安装这个、运行那个”教程,我们的目标是通过理解每一步的意义和目的来深化你的技术理解。我们将探索HTML、CSS、JavaScript的基础,并学习如何将它们结合起来创建一个简单的个人网站。接着,我们会介绍如何使用GitHub Pages进行免费部署,让你的应用上线。准备好了吗?让我们开始吧!
338 5
无影上新,AI助手晓颖来了!
无影上新,AI助手晓颖来了!
526 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问