快速入门 - 开发人员教程

本教程将帮助您启动并运行新的 Adobe Experience Manager (AEM) 项目。在十到二十分钟内，您就可以创建自己的网站，并能够创建、预览和发布您自己的内容、样式以及添加新区块。

先决条件：

本教程使用macOS、Chrome和Visual Studio Code作为开发环境，并且屏幕截图和说明反映了此设置。 您可以使用不同的操作系统、浏览器和代码编辑器，但您看到的UI和必须执行的步骤可能会相应地有所不同。

模板存储库模板入门

开始遵循AEM最佳实践的最快速、最简单的方法是使用Boilerplate GitHub存储库作为模板创建存储库。

https://github.com/adobe/aem-boilerplate

只需单击 Use this template 按钮并选择 Create a new repository，并选择要创建此存储库的位置。

我们建议将存储库设置为 public.

GitHub中剩下的唯一步骤是安装 AEM代码同步GitHub应用程序 访问此链接以访问您的存储库： https://github.com/apps/aem-code-sync/installations/new

在 Repository access AEM代码同步应用程序的设置，确保选择 Only select Repositories (非 All Repositories)。 然后选择新创建的存储库，并单击 Save.

注意：如果您正在使用具有IP过滤功能的Github Enterprise，则可以将以下IP添加到允许列表中： 3.227.118.73

恭喜！您有一个新网站正在运行 https://<branch>--<repo>--<owner>.hlx.page/ 在上例中，是 https://main--my-website--lighthouse100.hlx.page/

使用Google Drive链接您自己的内容源

在您创建样板GitHub存储库的分支中，网站指向Google Drive中的现有内容源。 请参阅 此文件夹 对于某些示例内容。

此内容是只读的，但可以将其复制到您的Google Drive文件夹中作为起点。

要创作自己的内容，请在自己的Google驱动器中创建一个文件夹，然后与Adobe Experience Manager用户共享该文件夹(helix@adobe.com)。

开始创作您自己的内容的一个好方法是复制 index， nav 和 footer 并从示例内容中了解内容结构。 nav 和 footer 在项目中不是经常更改，它有特殊的结构。 项目中的大多数文件看起来更类似于 index.

打开文件，并将整个内容复制/粘贴到您自己的Google驱动器中的相应文件中。 您还可以通过以下方式下载文件 Download All 或下载单个文件。 但是，请记住要将下载的 .docx 当您将文件上传到Google驱动器中的文件夹时，这些文件会返回原生Google文档。

现在您已拥有内容，需要将该内容连接到GitHub存储库。 要执行此操作，请更改中的引用 fstab.yaml GitHub存储库中到刚刚共享的文件夹。
将文件夹URL从Google驱动器复制/粘贴到 fstab.yaml.

请注意，进行更改后，您将看到 404 not found 错误，因为您的内容尚未预览。 请参阅下一部分，了解如何开始创作和预览您的内容。 如果您复制了 index， nav 和 footer 这三者都是单独的文档，都有自己的预览和发布周期，因此请确保根据需要预览（和发布）所有文档。

提交更改并将您自己的内容源关联到您的网站。

预览和发布您的内容

完成最后一个步骤后，您的新内容源不为空，但任何内容均未提升到 preview 或 live 阶段，这意味着您的网站提供404服务。

要预览内容，作者必须安装SidekickChrome扩展。 查找 此处为Chrome扩展.

将扩展添加到Chrome后，请别忘了固定它，因为这样可以更轻松地找到它。

要设置Chrome扩展，请转到您之前共享的Google驱动器文件夹，然后单击浏览器工具栏中的扩展图标，然后选择 Add this project.

安装扩展并添加项目后，您便可以从Google Drive预览和发布内容。

选择所有三个文档，然后单击固定扩展激活AEM Sidekick。 此时将显示一个新工具栏。 单击 preview 或 publish 按钮将触发相应的操作。

打开 index 做些改动。 单击固定扩展以激活Sidekick，然后单击 Preview 按钮，它将触发预览操作并使用内容的预览演绎版打开新选项卡。

开始开发样式和功能

要开始开发，最简单的做法是安装AEM命令行界面(CLI)，然后使用以下命令在本地克隆存储库。

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

从此处，将更改到您的项目文件夹中，然后使用以下方式启动本地开发环境。

cd <repo>
aem up

这将打开 http://localhost:3000/ 并且您已准备好进行更改。
一个好的开始位置是 blocks 文件夹是项目的大部分样式和代码所在的位置。 只需在 .css 或 .js 您应该会立即在浏览器中看到这些更改。

准备好推送更改后，只需使用Git添加、提交和推送您的代码到预览中(https://<branch>--<repo>--<owner>.hlx.page/)和生产(https://<branch>--<repo>--<owner>.hlx.live/)个站点。

就是这样，你成功了！ 恭喜，您的第一个站点已启动并正在运行。 如果您在本教程中需要帮助，请 加入我们的Discord频道 或 联系我们。