快速入門 - 開發人員教學課程

本教學課程將協助您啟動並執行新的 Adob​​e Experience Manager (AEM) 專案。您將在十到二十分鐘內建立自己的網站，並能夠建立、預覽和發佈您自己的內容、樣式以及新增區塊。

先決條件：

本教學課程使用macOS、Chrome和Visual Studio Code作為開發環境，熒幕擷取畫面和指示會反映該設定。 您可以使用不同的作業系統、瀏覽器和程式碼編輯器，但您看到的UI和您必須採取的步驟可能會因此而有所不同。

開始使用樣板存放庫範本

開始遵循AEM最佳實務的最快速和最簡單方式，就是使用範本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.

注意：如果您正在使用Github Enterprise搭配IP篩選，您可以將下列IP新增至允許清單： 3.227.118.73

恭喜！您有一個新網站在執行中 https://<branch>--<repo>--<owner>.hlx.page/ 在上述範例中， https://main--my-website--lighthouse100.hlx.page/

使用Google Drive連結您自己的內容來源

在您的Boilerplate 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 階段，表示您的網站提供404s。

若要預覽內容，作者必須安裝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頻道 或 與我們聯絡。