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

本教學課程將協助您啟動並執行新的 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

在AEM Code Sync App的Repository access設定中，確定您選取Only select Repositories （非All Repositories）。 然後選取您新建立的存放庫，並按一下Save。

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

恭喜！您有一個新網站在https://<branch>--<repo>--<owner>.aem.page/上執行，在上例中是https://main–mysite–aemtutorial.aem.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 Docs。

現在您已擁有內容，必須將該內容連結至GitHub存放庫。 若要這麼做，請將GitHub存放庫中fstab.yaml的參考變更為您剛共用的資料夾。
將資料夾URL從您的Google磁碟複製/貼上至fstab.yaml。

請注意，進行此變更後，您將會看到404 not found 個錯誤，因為您的內容尚未預覽。 請參閱下一節以瞭解如何開始撰寫和預覽您的內容。 如果您複製了index、nav和footer，這三者都是獨立的檔案，有自己的預覽和發佈週期，因此請務必視需要預覽（和發佈）所有這些檔案。

提交您的變更，而且您已將自己的內容來源連結至網站。

預覽和發佈您的內容

完成最後一個步驟後，您的新內容來源並非空白，但沒有任何內容已升級至preview或live 階段，這表示您的網站提供404個專案。

若要預覽內容，作者必須安裝Sidekick Chrome擴充功能。 在Chrome網站商店🔗中尋找Chrome擴充功能。

將擴充功能新增至Chrome後，別忘了釘選它，這樣會更容易找到。

若要設定Chrome擴充功能，請前往您先前共用的Google磁碟機資料夾，然後按一下瀏覽器工具列中的擴充功能圖示，並選取「Add this project」。

只要已安裝擴充功能並新增專案，您就可以從Google Drive預覽和發佈內容。

選取所有三個檔案，然後按一下您的釘選擴充功能以啟動AEM Sidekick。 新工具列隨即出現。 按一下preview或publish按鈕將會觸發對應的作業。

開啟index檔案並進行一些變更。 按一下您的釘選擴充功能，然後按一下「Preview」按鈕以啟動Sidekick，這將會觸發預覽操作，並開啟包含預覽內容轉譯的新索引標籤。

開始開發樣式和功能

若要開始開發，最簡單的做法是安裝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>.aem.page/)和生產(https://<branch>--<repo>--<owner>.aem.live/)網站即可。

就這樣，您已成功！ 恭喜，您的第一個網站已啟動且執行中。 若您在本教學課程中需要協助，請 加入我們的Discord頻道 或 與我們聯絡。