从 CodePen 到上线网站只需 3 个简单步骤：使用 EdgeOne Pages 部署

每个开发者都知道这种感觉：你刚刚在 CodePen 上创建了一些令人惊叹的东西——也许是一个炫酷的 CSS 动画，一个交互式 JavaScript 小部件，或者一个漂亮的落地页原型。现在你想与世界分享它，作为一个真正的、独立的网站。

传统部署通常需要处理 Git 配置、设置构建工具，或在复杂的托管平台中进行繁琐操作。而使用 EdgeOne Pages，你可以在短短 30 秒内将 CodePen 项目转变为一个实时的、生产就绪的网站。

30秒预览

在深入了解细节之前，让我们看看这个过程有多简单。整个工作流程仅需三步：导出 → 拖拽 → 部署。

就是这样。无需终端命令，无需配置文件，无需繁琐的账户设置。在你阅读这段文字的时间里，就已经可以完成第一个网站的部署。

我们提供完全免费的服务，无需注册即可立即体验企业级基础设施的强大功能。慷慨的免费资源配额让你无需担心很快触及使用限制，可以放心地开始你的项目。

上线的三个步骤

步骤1：导出你的CodePen项目

首先，导航到你的 CodePen 创作。在编辑器的右下角，你会找到"Export"按钮。点击它并从下拉菜单中选择"Export .zip"。

CodePen 将所有内容打包成一个整洁的 ZIP 文件。

重要提示：下载后，解压缩档案并 进入 dist 文件夹，确认 index.html 位于根级别。EdgeOne Pages 会自动查找在根目录中的任何 HTML 文件，因此正确的文件结构至关重要。

步骤2：拖放魔法

打开你的浏览器并导航至 Pages Drop。你会看到一个干净、直观的界面，有一个大型的放置区域。

只需将你的"dist"文件夹拖入放置区，平台会立即：

• 扫描你的文件
• 生成预览缩略图
• 验证你的项目结构
• 准备部署

视觉反馈是即时的——你会看到你的文件在实时处理中，让你确信一切正常。

步骤3：一键部署

在部署的地方你有两个选择：

1. 快速部署：只需点击"部署"按钮获取自动生成的 URL
2. 自定义子域名：在部署前输入一个易记的名称，如"my-awesome-pen"

点击"部署"，大约10秒内，你将收到你的实时URL：

https://my-awesome-pen.edgeone.app

恭喜！你的网站现在已在互联网上线，拥有 HTTPS 安全保护，通过 CDN 全球分发。

结论

在短短 30 秒内，你可以将任何 CodePen 作品转变为生产就绪的网站，享受企业级托管、全球 CDN 分发和自动 HTTPS——完全免费。

无需终端命令、配置文件或信用卡。无论你是资深开发者还是初学者，EdgeOne Pages 都能消除创意与发布之间的所有障碍。准备好部署了吗？前往 Pages Drop，亲自体验分享作品的简单方法。