六维教程

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,平台自动重新部署
部署耗时 通常几十秒到几分钟
控制台功能 项目概览、部署记录、域名管理、环境变量、项目设置
支持的项目类型 静态站点、前端框架、后端服务、全栈应用
上一篇
EdgeOne Makers 教程
下一篇
EdgeOne Makers 部署基础