发布上线:从你的屏幕到全世界
发布上线:从你的屏幕到全世界
先说一个扎心的事实:只存在于你电脑上的页面不算发布。没人能看到,没人能使用,也没人能告诉你它有多棒。**发布只意味着一件事——一个全世界任何人都能打开的 URL。**这就是「我在学编程」和「我做出了东西」之间的分界线。
好消息是?拿到一个 URL 如今是最容易的部分。免费服务几秒钟就能搞定:
- Netlify Drop——打开网站,把你的 HTML 文件拖到页面上,拿到一个可访问的 URL。整个流程就这么多。
- Vercel——关联一个文件夹或 GitHub 仓库,点击部署,完成。(本学院就跑在它上面。)
万一卡住了怎么办?你可是 vibe coder——问 AI。「一步步带我把这个 HTML 文件部署到 Netlify」这样的提示词效果极好。部署曾经是编程里最吓人的部分,现在它只是一场对话。
不过在你把文件拖到任何地方之前,「能运行」的页面和「可以发布」的页面之间还是有差别的。真正的网站有专业的细节:浏览器标签页里像样的标题,搜索引擎和链接预览能展示的描述,让你的链接在 WhatsApp 或 X 上被分享时足够好看的社交标签,还有一个写着「这是真人做的——来,分享它」的页脚。在这最后一节课里,你将给第 4 模块的灵感板加上的正是这些细节。
你的路径上接下来是什么
这是 Vibe Coding 基础的最后一课——但它只是从零到高手路径的第一步。接下来你会认识浏览器中的 Claude Code(一个能通过对话构建整个项目的 AI),然后在自己的机器上安装真正的工具,最终构建你自己的 AI 智能体。你现在知道网页是怎么造出来的了。是时候多造一些了。
开始发布吧。
操作说明
给页面一个真正的 <title>——把「Untitled」换成一个配得上浏览器标签页的名字。这是搜索引擎和书签最先展示的东西。
提示： 在 <head> 里找到 `<title>Untitled</title>`,改成类似 `<title>Idea Board — Never Lose a Spark</title>` 的内容。至少几个字符——让它属于你。
在 <head> 里添加一个 <meta name="description"> 标签——用一句话告诉搜索引擎(和好奇的人类)你的应用是干什么的。
添加 Open Graph 标签——<meta property="og:title"> 和 <meta property="og:description">。它们决定你的链接在 WhatsApp、X 或 LinkedIn 上被分享时的样子。
在卡片底部添加一个 <footer>,放上「Built with vibes」署名和一个 <a id="share-link">——每个发布的产品都会署名。
你的代码
描述你想为这一步构建的内容，我来编写代码——然后点击「应用」把它放进你的编辑器。 本步骤：给页面一个真正的 <title>——把「Untitled」换成一个配得上浏览器标签页的名字。这是搜索引擎和书签最先展示的东西。