把你的网页发布到互联网
首先我们要明白一个概念:上一章我们做的网页,还只是躺在你电脑里的“本地文件”,没法发给朋友玩。
要想让它变成一个人人都能访问的网址链接,我们需要在电脑上安装一套专业的工具,把它发布到vercel海外服务器上。
前置需知:一眼识 Vercel
1. Vercel 是什么?
Vercel 是一个全球化的网站托管平台。
2. 它能干什么?
它的功能非常单一且核心:把你的“代码文件”变成一个“公网链接”。
- 输入:你开发好的网页代码。
- 处理:Vercel 会自动在它的服务器上运行这些代码。
- 输出:它给你一个以 .vercel.app 结尾的网址。
- 结果:海外网友,在浏览器输入这个网址,就能访问你做的网页。
3. 有什么好处?(为什么选它)
对于新手来说,它有三大核心优势:
💰 完全免费
只要你不做大型商业项目,个人使用一分钱都不用花。
🤖 无需运维
不需要购买服务器、配置 Linux。你只管写代码,服务器的事全自动处理。
⚡ 即刻上线
海外服务器,无需 ICP 备案(省去 15-20 天等待),上传即刻可见。
📚 核心教学参考文档
前提:此步骤需要网络环境畅通(需科学上网)
📚
必备五件套清单
请跟着教程,确保你的电脑里装好了以下 5 个东西(教程里有详细下载地址):
Terminal (终端)
电脑自带的“黑框框”,用来给电脑发号施令的指挥官。
Node.js
网页代码的运行环境,相当于汽车的“发动机”。
Python
AI 编程必备语言包,后续进阶的核心基石。
Git
用来传输和管理代码的“传送门”。
Github
去注册个账号,这是你的“云端代码仓库”,用来存放你的作品。
❤️ 【温馨提示:遇到报错怎么办?】
如果在安装或运行中遇到红色的报错代码,千万不要自己死磕!
大家都没系统学过计算机,遇到问题很正常。请一定要学会利用你手边最强的资源——AI。
正确姿势:
把报错的画面截图,直接发给 Trae/ChatGPT/Claude,问它:
“我遇到了这个报错,这是什么原因?请告诉我怎么解决?”
🚩 本关任务打卡
请完成以下动作,并将结果发到群里:
- 1晒仓库:把你的 Github 项目链接 发群里。
- 2晒作品:将项目部署到海外服务器 Vercel 上,生成一个 vercel.app 后缀的网址,把这个网页链接发群里,让大家点开看看!
标记为已完成
任务打卡:我已完成五件套安装并发布作品!