EdgeOne Makers 快速开始
看完上一篇 EdgeOne Makers 教程,你已经知道这个平台能干什么了。这篇直接上手,从零开始注册账号、创建第一个项目、部署一个简单页面,最后拿到可以访问的网址。整个过程大概 5 分钟。
注册账号
第一步当然是注册账号。打开 EdgeOne Makers 官网,点击右上角的”注册”按钮。
支持两种注册方式:
| 注册方式 | 说明 |
|---|---|
| 微信扫码 | 用手机微信扫一下二维码,快速注册 |
| 手机号注册 | 输入手机号,获取验证码,设置密码 |
注册完成后会跳转到控制台首页。控制台就是你管理所有项目的地方,后面创建项目、查看部署状态、配置域名都在这里操作。
创建第一个项目
登录成功后,点击页面上的”新建项目”按钮。
创建项目有两种方式:
方式一: 从 Git 仓库导入
这是最常用的方式。点击”从 Git 导入”,会看到一个授权页面,让你关联 GitHub、GitLab 或者 Bitbucket 账号。
授权完成后,会列出你所有的仓库。选一个仓库,点击”导入”按钮。
平台会自动检测项目类型。如果是 Vue、React、Next.js 这些主流框架,会自动配置好构建命令和输出目录,你不用改任何东西。
方式二: 使用模板快速创建
如果你还没有现成的项目,可以用平台提供的模板。点击”使用模板”,会看到一些预设的项目模板,比如静态博客、Vue 项目、React 项目等。
选一个模板,给项目起个名字,点击”创建”。平台会帮你生成代码并立即部署。
部署简单页面
这里用最简单的例子演示。假设你有一个静态 HTML 页面,就一个 index.html 文件。
先在本地创建一个项目文件夹,里面放一个 index.html 文件:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个 EdgeOne Makers 项目</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.container {
text-align: center;
padding: 2rem;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
p {
font-size: 1.2rem;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello EdgeOne Makers</h1>
<p>我的第一个项目已经部署成功了</p>
</div>
</body>
</html>
把这个文件夹推送到 GitHub 上,建一个仓库,比如叫 my-first-edgeone-project。
然后回到 EdgeOne Makers 控制台,点击”新建项目”,选择”从 Git 导入”,找到刚才的仓库,点击”导入”。
平台会自动检测到这是一个静态 HTML 项目,构建配置不用改。直接点击”部署”按钮。
等几十秒钟,部署就完成了。
访问你的网站
部署完成后,页面会自动跳转到项目详情页。在这里可以看到分配给你的访问地址。
EdgeOne Makers 会给每个项目分配一个默认的子域名,格式是:
https://你的项目名.edgeone.app
点击这个链接,就能看到你刚才部署的页面了。
打开链接后,如果看到”Hello EdgeOne Makers”的页面,说明部署成功了。恭喜,你已经完成了第一个项目的部署。
项目结构说明
看一下刚才创建的项目在控制台里有哪些内容。
| 区域 | 说明 |
|---|---|
| 项目概览 | 显示项目的基本信息,包括访问地址、部署状态、最近部署记录 |
| 部署记录 | 列出所有部署历史,每次 git push 都会生成一条新记录 |
| 域名管理 | 绑定自定义域名,配置 SSL 证书 |
| 环境变量 | 配置 API 密钥等敏感信息 |
| 项目设置 | 修改项目名称、删除项目、管理团队成员权限 |
点”部署记录”可以看到刚才那次部署的详细信息,包括构建日志、部署时间、触发方式等。
更新项目内容
部署完成后,如果想更新网站内容,操作很简单。
在本地修改 index.html 文件,比如把标题改成”Hello EdgeOne Makers v2”。
然后提交代码并推送到 GitHub:
git add index.html
git commit -m "更新标题"
git push
推送完成后,EdgeOne Makers 会自动检测到代码更新,触发一次新的部署。等几十秒钟后,刷新网站就能看到更新后的内容了。
这就是 Git 集成部署的好处,不用手动上传文件,push 一下就能自动更新线上。
速查卡片
| 要点 | 说明 |
|---|---|
| 注册方式 | 微信扫码或手机号注册 |
| 创建项目方式 | 从 Git 仓库导入或使用模板创建 |
| 默认域名格式 | https://项目名.edgeone.app |
| 部署触发方式 | git push 自动触发,或手动点击部署按钮 |
| 项目更新方式 | 本地修改代码后 push,平台自动重新部署 |
| 部署耗时 | 通常几十秒到几分钟 |
| 控制台功能 | 项目概览、部署记录、域名管理、环境变量、项目设置 |
| 支持的项目类型 | 静态站点、前端框架、后端服务、全栈应用 |