시작하기 - 개발자 튜토리얼

이 튜토리얼에서는 새로운 AEM(Adobe Experience Manager) 프로젝트를 시작하고 실행하게 됩니다. 10~20분 만에 나만의 사이트를 구축하고, 콘텐츠를 만들고, 스타일링하고, 미리 보고, 게시하고, 새 블록을 추가할 수 있습니다.

사전 요구 사항:

이 자습서에서는 macOS, Chrome 및 Visual Studio 코드를 개발 환경으로 사용하며 스크린샷과 지침은 해당 설정을 반영합니다. 다른 운영 체제, 브라우저 및 코드 편집기를 사용할 수 있지만 표시되는 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 드라이브를 사용하여 고유한 콘텐츠 소스 연결

Boilerplate GitHub 리포지토리의 포크에서 사이트는 Google 드라이브의 기존 콘텐츠 소스를 가리킵니다. 다음을 참조하십시오 이 폴더 콘텐츠 예시.

이 콘텐츠는 읽기 전용이지만 시작점으로 사용하기 위해 Google 드라이브 폴더에 복사할 수 있습니다.

나만의 콘텐츠를 제작하려면 나만의 Google 드라이브에 폴더를 만들고 이 폴더를 Adobe Experience Manager 사용자와 공유(helix@adobe.com).

콘텐츠 작성을 시작하는 좋은 방법은 복사하는 것입니다 index, nav 및 footer 샘플 콘텐츠에서 콘텐츠 구조를 숙지하십시오. nav 및 footer 는 프로젝트에서 자주 변경되지 않으며 특수 구조가 있습니다. 프로젝트에 있는 대부분의 파일은 index.

파일을 열고 전체 콘텐츠를 자신의 Google 드라이브에 있는 해당 파일에 복사하거나 붙여 넣습니다. 다음을 통해 파일을 다운로드할 수도 있습니다. Download All 또는 개별 파일을 다운로드하십시오. 그러나 다운로드한 를 변환해야 합니다 .docx 파일을 Google 드라이브의 폴더에 업로드할 때 기본 Google 문서로 다시 돌아갑니다.

이제 콘텐츠가 준비되었으므로 해당 콘텐츠를 GitHub 저장소에 연결해야 합니다. 다음에서 참조를 변경하여 이 작업을 수행합니다 fstab.yaml GitHub 저장소에서 방금 공유한 폴더로 이동합니다.
Google 드라이브에서 폴더 URL 복사/붙여넣기 fstab.yaml.

이 변경 사항을 적용하면 다음 내용이 표시됩니다. 404 not found 콘텐츠를 아직 미리 보지 않았으므로 오류가 발생합니다. 다음 섹션을 참조하여 콘텐츠 작성 및 미리보기를 시작하는 방법을 확인하십시오. 복사한 경우 index, nav 및 footer 이 세 가지 문서는 모두 자체 미리보기 및 게시 주기가 있는 별도의 문서이므로 필요한 경우 모두 미리보기(및 게시)해야 합니다.

변경 사항을 커밋하고 자신의 콘텐츠 소스를 웹 사이트에 연결했습니다.

콘텐츠 미리보기 및 게시

마지막 단계를 완료한 후 새 콘텐츠 소스는 비어 있지 않지만 해당 콘텐츠가 로 승격된 것은 없습니다. preview 또는 live stages는 웹 사이트에서 404s를 제공함을 의미합니다.

콘텐츠를 미리 보려면 작성자가 Sidekick Chrome 확장 기능을 설치해야 합니다. 다음 찾기 Chrome 확장 프로그램 위치.

Chrome에 확장을 추가한 후 고정하면 쉽게 찾을 수 있습니다.

Chrome 확장 프로그램을 설정하려면 이전에 공유한 Google 드라이브 폴더로 이동하여 브라우저 도구 모음에서 확장 프로그램 아이콘을 클릭하고 을 선택합니다 Add this project.

확장이 설치되고 프로젝트가 추가되면 바로 Google 드라이브에서 콘텐츠를 미리 보고 게시할 준비가 된 것입니다.

세 개의 문서를 모두 선택하고 고정된 확장을 클릭하여 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/) 사이트.

됐습니다. 성공했습니다! 축하합니다. 첫 번째 사이트가 실행 중입니다. 자습서에 대한 도움이 필요한 경우 디스코드 채널에 참여 또는 저희에게 연락하세요