通过 Pages 快速部署网站

本文将引导您如何通过 Pages 快速创建并部署网站,帮助您快速上手了解如何使用 Pages 服务。

Pages 是基于 Tencent EdgeOne 基础设施打造的前端开发和部署平台,专为现代 Web 开发设计,帮助开发者快速构建、部署静态站点和无服务器应用。通过集成边缘函数能力,实现高效的内容交付和动态功能扩展,支持全球用户的快速访问。

步骤一:选择创建方式

确认完成以上准备工作后,即可开始接入至 EdgeOne。
2. 根据以下不同的情况下选择创建 Pages 项目的方式。
首次登录控制台
已有其他类型资源后创建项目
如果您是首次登录控制台,或者当前在 EdgeOne 内没有任何资源,则会进入场景选择大厅,在此界面内,鼠标移动至创建项目,可选通过“导入 Git 仓库”、“从模板开始”或“直接上传”三种方式来创建项目。

如果您当前是首次创建 Pages 项目,但是已有其他资源,可通过点击最上方的 Pages Tab,切换后在该 Tab 下选择创建 Pages 项目的方式。

创建方式
说明
通过导入 Git 仓库创建
需关联至 Git 仓库提供商,从 Git 仓库内导入代码创建网站。
通过模板创建
可选从 EdgeOne 预制的模板快速创建一个网站。
通过上传文件创建
可自行上传当前的项目代码到 EdgeOne,根据上传的代码内容来部署站点。
注意:如果您选择上传文件的方式,则当前项目无法切换到 Git 集成。您必须创建一个具有 Git 集成的新项目才能使用自动部署。

步骤二:连接 Git 仓库

说明:
如果选择的创建方式是“直接上传”,可忽略这一步,直接跳转至第三步。
选择“通过导入 Git 仓库创建”或者“通过模板创建”时,要求您关联当前的 Git 提供商,当前已支持 Github,Gitee 等 Git 提供商的接入,下面以 Github 的接入方式为例:
1. 在控制台页面,点击“Github”以链接您的仓库。



2. 授予 EdgeOne 访问您仓库的权限,点击 Authorize EO Pages



3.选择您要部署的仓库或授权所有仓库,点击 Install




步骤三:自定义构建

根据您创建项目时所选的方式不同,在处理构建的操作上会有所区别,具体如下:
导入 Git 仓库
从模板开始
直接上传
连接到 Git 仓库后,您需要填写构建配置。此步骤对于项目能否正确编译和顺利部署至关重要。
1. 选择您要部署的仓库。



2. 输入您的构建命令。如果不确定,请检查 package.json 中的 scripts 部分的值。选择加速区域时,不同的区域决定了项目分配的节点资源,以及添加自定义域名的时候是否需要备案,详情可参考 域名管理 - 加速区域



3. 检查您的配置项,确认无误后,点击开始部署,Pages 将自动构建您的项目并将其部署到全球边缘网络。
我们针对各种使用场景提供了丰富的模板。下面将向您展示如何通过模板快速启动并部署项目,后续您可以基于我们的模板进行开发,持续构建与部署。
1. 授权 Github 后,选择一个需要部署的模板。

2. 设置项目名称及仓库名称,亦可调整仓库属性。选择加速区域时,不同的区域决定了项目分配的节点资源,以及添加自定义域名的时候是否需要备案,详情可参考 域名管理 - 加速区域

3. 点击立即创建,我们将在您的 GitHub 账户上基于该模板创建一个仓库部署过程将自动开始。您可以将此仓库克隆到本地进行进一步开发,并根据需要推送更改。
您可以将项目构建后的资产直接上传到 Pages 并将其部署到 EdgeOne 全球网络。如果您想集成自己的构建平台或从本地计算机上传,您应该选择直接上传而不是导入 Git 仓库。
1. 在创建项目时选择了“直接上传”之后将进入如下页面。

2. 填写完“项目名称”跟“加速区域”后,将项目资产拖拽到指定区域。

3. 点击开始部署,资产上传后会开始创建项目,随后跳转至部署详情页,待部署成功后,您可以通过预览链接查看项目验证生效状态。

步骤四:验证生效状态

在部署完成后,看到如下图表示部署成功!



您可以通过在构建部署菜单内右上角的预览按钮生成部署预览链接,访问针对该版本的页面内容。



您也可以通过“项目概览”页面的右上角的“预览”按钮,来生成项目预览链接,访问最新版本的页面内容。




如何自定义域名

在验证预览内容没有问题后,我们强烈建议您立即添加自定义域名访问,以确保您的项目在长期访问中更具专业性和可信度。有关如何添加自定义域名的详细信息,请参阅 域名管理 - 自定义域名 章节。

如何创建一个新部署

根据您创建项目时所选的方式不同,在创建新部署的操作上会有所区别,具体如下:
导入 Git 仓库/从模板开始
直接上传
当新的提交推送到主干分支时,EdgeOne 将自动拉取并部署最新的提交。



您也可以通过构建部署列表的“重新部署”按钮,使用当前部署的相同源代码和最新项目配置创建新部署。



通过构建部署页面的“新建部署”可以部署新版本。

将新版本的项目资产拖拽到指定区域,部署环境默认为“生产环境”,可切换为“预览环境”。

说明:
生产环境:更新至用户访问的线上网站,立即生效。
预览环境:在隔离环境中验证更改,不影响正式数据。

相关问题排障

如果部署的版本与仓库不同,请确保拉取最新版本。
如果直接上传部署成功后页面 404,可排查上传的文件夹根目录下有没有 index.html 文件。
如有其他问题,可查看我们的文档 排障指南,也可以扫描右上角的“开发者沟通群”二维码,加群与我们联系。