WordPress에서 Eleventy Static Site Generator로 마이그레이션하는 방법

Eleventy는 정적 사이트 생성기입니다. 우리는 왜 정적 사이트 생성기를 사용하고 싶은지 탐구하고, 간단한 WordPress 사이트를 Eleventy로 변환하는 핵심을 살펴보고, 이러한 방식으로 콘텐츠를 관리할 때의 장단점에 대해 이야기할 것입니다. 갑시다!

정적 사이트 생성기란 무엇입니까?

저는 수십 년 전 1990년대 중반에 웹 개발 경력을 시작했습니다. 그때 HTML과 CSS는 웹사이트를 시작하고 실행하는 데 필요한 유일한 것이었습니다. 단순하고 정적인 웹사이트는 빠르고 반응이 좋았습니다. 그러나 현재로 빠르게 넘어가면 간단한 웹 사이트가 꽤 복잡할 수 있습니다.

WordPress의 경우 웹 페이지를 렌더링하는 데 필요한 사항을 생각해 보겠습니다. 호스트의 서버에서 실행되는 WordPress 서버 측 PHP는 메타데이터와 콘텐츠에 대해 MySQL 데이터베이스를 쿼리하는 무거운 작업을 수행하고 정적 파일 시스템에 저장된 이미지의 올바른 버전을 선택하고 모든 것을 테마 기반 템플릿으로 병합합니다. 브라우저로 반환합니다. 모든 페이지 요청에 대한 동적 프로세스이지만 WordPress에서 생성된 대부분의 웹 페이지는 실제로 그렇게 동적이지 않습니다. 전부는 아니지만 대부분의 방문자는 동일한 콘텐츠를 경험합니다.

정적 사이트 생성기는 모델을 수십 년 전의 접근 방식으로 바로 되돌립니다. 웹 페이지를 동적으로 조합하는 대신 정적 사이트 생성기는 콘텐츠를 Markdown 형식으로 가져와 템플릿과 병합하고 정적 웹 페이지를 만듭니다. 이 프로세스는 사용자가 사이트를 탐색할 때 요청 루프 외부에서 발생합니다. 모든 콘텐츠는 사전 생성되었으며 각 요청에 따라 번개처럼 빠르게 제공됩니다. 웹 서버는 말 그대로 그들이 광고하는 일, 즉 서비스를 수행합니다. 데이터베이스가 없습니다. 타사 플러그인이 없습니다. 순수한 HTML, CSS, JavaScript 및 이미지만 있으면 됩니다. 이 단순화된 기술 스택은 해커에게 더 작은 공격 표면과 동일합니다. 악용할 약간의 서버 측 인프라가 있으므로 사이트가 본질적으로 더 안전합니다.

선도적인 정적 사이트 생성기 역시 기능이 풍부하며, 이는 현대 콘텐츠 관리 시스템의 특징인 기술 스택에 대한 입찰에 대한 강력한 주장이 될 수 있습니다.

이 업계에 오래 있으면 Macromedia(Adobe 이전) Dreamweaver 제품을 기억할 것입니다. 나는 라이브러리 항목과 템플릿의 개념, 특히 여러 웹 페이지에서 일관성을 만드는 방법을 좋아했습니다. Eleventy의 경우 템플릿, 필터, 단축 코드 및 플러그인의 개념은 유사합니다. 저는 Smashing의 엔터프라이즈에서 JamStack으로 전환하는 것에 대해 읽은 후 이 전체 여정을 시작했습니다. 나는 또한 JAMstack에서 Mathias Biilmann & Phil Hawksworth의 무료 책인 Modern Web Development를 읽었고 내 소매를 걷어붙이고 내 자신의 무언가를 변환할 준비가 되었음을 알았습니다.

정적 사이트 생성기를 사용하지 않는 이유는 무엇입니까?

정적 사이트 생성기는 약간의 학습 곡선이 필요합니다. 콘텐츠를 입력하기 위해 편집 기능을 쉽게 전달할 수 없으며 특정 사용 사례로 인해 사용하지 못할 수 있습니다. 내가 보여줄 작업의 대부분은 Markdown과 명령줄을 통해 수행됩니다. 즉, 동적 데이터, 전자 상거래, 댓글 및 평가 시스템과 함께 정적 사이트 생성기를 사용하기 위한 많은 옵션이 있습니다.

전체 사이트를 한 번에 변환할 필요도 없습니다. 설정이 복잡한 경우 작게 시작하여 정적 사이트 생성에 대해 어떻게 느끼는지 확인한 후 엔터프라이즈 규모에서 문제를 해결하기 위한 계획을 세울 수 있습니다. 또한 WordPress를 동급 최고의 헤드리스 콘텐츠 관리 시스템으로 계속 사용하고 SSG를 사용하여 WordPress 콘텐츠를 제공할 수도 있습니다.

정적 사이트 생성기로 Eleventy를 선택한 방법

인기 있는 정적 사이트 생성기를 빠르게 검색하면 시작하기에 좋은 많은 옵션을 찾을 수 있습니다. Eleventy, Gatsby, Hugo 및 Jekyll이 내 목록의 주요 경쟁자였습니다. 선택하는 방법? 나는 자연스럽게 하고 몇몇 친구들에게 물었다. Eleventy는 내 트위터 설문조사에서 확실한 리더였지만 "@eleven_ty는 자신이 무엇을 하고 있는지 모른다면 매우 친근하게 느껴진다"는 댓글이 결정적인 역할을 했습니다. 이봐, 나야! 불행하게도 분석 마비에 걸릴 수 있습니다. 오늘은 아니고... 여론조사와 댓글로 Eleventy를 선택해서 기분이 좋았습니다. 그 이후로 저는 GitHub를 사용하여 코드를 저장하고 Netlify를 사용하여 파일을 안전하게 제공하는 4개의 WordPress 사이트를 Eleventy로 변환했습니다. 그것이 바로 우리가 오늘 할 일이므로 소매를 걷어붙이고 다이빙을 합시다!

시작하기: 초기 사이트 부트스트랩

Eleventy에는 훌륭한 시작 프로젝트 모음이 있습니다. 우리는 Dan Urbanowicz의 eleventy-netlify-boilerplate를 시작점으로 사용할 것입니다. "Eleventy로 간단한 블로그 웹사이트를 구축하고 Netlify에 배포하기 위한 템플릿입니다. Netlify CMS 및 Netlify Forms를 포함합니다.” 시작하려면 "netlify에 배포"를 클릭하십시오. Netlify를 GitHub에 연결하고 리포지토리 이름을 지정하라는 메시지가 표시됩니다(내 이름은 스매싱-일레븐티-dawson). 그런 다음 "저장 및 배포"를 선택합니다.

그렇게 하면 몇 가지 일이 발생했습니다.

1. 상용구 프로젝트가 GitHub 계정에 추가되었습니다.
2. Netlify는 프로젝트에 동적 이름을 할당하고 빌드하고 배포했습니다.
3. Netlify는 프로젝트에서 Identity(CMS 기능을 사용하려는 경우)와 Forms(간단한 문의 양식)를 사용하도록 구성했습니다.

스크린샷에서 알 수 있듯이 도메인을 조달하거나 프로젝트에 매핑할 수 있으며 HTTPS로 사이트를 보호할 수도 있습니다. 호스트가 SSL에 대해 엄청난 비용을 청구했기 때문에 후자의 기능은 저에게 정말 매력적인 판매 포인트였습니다. Netlify에서는 무료입니다.

사이트 설정을 클릭한 다음 사이트 이름 변경을 클릭하여 내 사이트에 더 적합한 이름을 만들었습니다. jovial-goldberg-e9f7e9를 좋아하는 만큼 elizabeth-dawson-piano가 더 적합합니다. 결국, 그것이 우리가 변환하는 사이트입니다! elizabeth-dawson-piano.netlify.app을 방문하면 상용구 콘텐츠가 표시됩니다. 엄청난!

사이트 사용자 정의를 시작할 수 있도록 새 리포지토리를 로컬 시스템에 다운로드하겠습니다. 이 프로젝트에 대한 내 GitHub 리포지토리는 Visual Studio Code의 터미널에서 파일을 복사하는 데 사용할 수 있는 git clone 명령을 제공합니다.

• 자식 복제 →

그런 다음 상용구의 README 파일에 있는 나머지 지침에 따라 종속성을 로컬로 설치하고 _data/metadata.json 파일을 편집하여 프로젝트와 일치시키고 프로젝트를 로컬에서 실행합니다.

• npm install @11ty/eleventy
• npm install
• npx eleventy --serve --quiet

마지막 명령으로 Eleventy는 localhost:8080 에서 로컬 개발 사이트를 시작하고 변경 사항을 감시하기 시작합니다.

WordPress 게시물, 페이지 및 이미지 보존

우리가 변환하는 사이트는 elizabethrdawson.wordpress.com의 기존 WordPress 사이트입니다. 사이트는 간단하지만 기존 콘텐츠를 최대한 활용하는 것이 좋습니다. 복사하여 붙여넣기를 그렇게 좋아하는 사람은 없겠죠? WordPress는 내보내기 기능을 사용하여 쉽게 만듭니다.

콘텐츠 내보내기는 사이트 콘텐츠의 XML 추출이 포함된 zip 파일을 제공합니다. 미디어 라이브러리 내보내기는 사이트 이미지의 zip 파일을 제공합니다. 이 연습의 모델로 사용하기로 선택한 사이트는 3페이지로 된 간단한 사이트이며 Wordpress.com에서 호스팅됩니다. 자체 호스팅하는 경우 도구 > 내보내기로 이동하여 XML 추출을 가져올 수 있지만 호스트에 따라 FTP를 사용하여 이미지를 다운로드해야 할 수도 있습니다.

편집기에서 XML 파일을 열면 거의 소용이 없을 것입니다. Eleventy에서 사용할 언어인 Markdown에 개별 게시물을 가져오는 방법이 필요합니다. 다행스럽게도 WordPress 게시물과 페이지를 Markdown으로 변환하는 패키지가 있습니다. 해당 리포지토리를 컴퓨터에 복제하고 XML 파일을 같은 디렉터리에 넣습니다. 디렉토리 목록은 다음과 같아야 합니다.

XML에서 게시물을 추출하려는 경우 기본적으로 작동합니다. 그러나 샘플 사이트는 3페이지이므로 약간의 조정이 필요합니다. parser.js 의 39행에서 계속하기 전에 "post"를 "page"로 변경합니다.

wordpress-export-to-markdown 디렉토리에서 "npm install"을 수행했는지 확인한 다음 "node index.js"를 입력하고 프롬프트를 따르십시오.

그 과정에서 welcome.md , about.md 및 contact.md 라는 세 개의 파일이 생성되었습니다. 각각에는 페이지의 제목과 날짜를 설명하는 머리말과 XML에서 추출한 콘텐츠의 마크다운이 있습니다. '서론'은 새로운 용어일 수 있으며 "pages" 디렉토리의 샘플 .md 파일 상단에 있는 섹션을 보면 파일 상단에 데이터 섹션이 표시됩니다. Eleventy는 사이트를 사용자 정의하는 데 도움이 되는 다양한 전면 자료를 지원하며 제목과 날짜는 시작에 불과합니다. 샘플 페이지의 머리말 섹션에서 다음을 볼 수 있습니다.

 eleventyNavigation: key: Home order: 0

이 구문을 사용하여 사이트 탐색에 페이지를 자동으로 추가할 수 있습니다. 새 페이지와 함께 이것을 유지하고 싶었기 때문에 페이지의 내용을 복사하여 집, 연락처 등에 대한 기존 상용구 .md 파일에 붙여넣었습니다. 샘플 사이트에는 현재 블로그가 없으므로 "posts" 디렉토리에서 .md 파일도 삭제합니다. 이제 내 로컬 미리 보기 사이트가 다음과 같으므로 도착합니다!

업데이트를 커밋하고 GitHub에 푸시하기에 좋은 시기인 것 같습니다. 업데이트를 커밋하면 몇 가지 일이 발생합니다. 업데이트가 이루어졌다는 GitHub의 알림에 따라 Netlify는 빌드를 실행하고 라이브 사이트를 업데이트합니다. 파일을 업데이트하고 저장할 때 로컬에서 발생하는 것과 동일한 프로세스입니다. Eleventy는 Markdown 파일을 HTML 페이지로 변환합니다. 실제로 _site 디렉토리를 로컬로 보면 정적 서비스를 제공할 준비가 된 HTML 버전의 웹사이트를 볼 수 있습니다. 따라서 커밋 직후 elizabeth-dawson-piano.netlify.app으로 이동하면 로컬에서 본 것과 동일한 업데이트가 표시됩니다.

이미지 추가

원본 사이트의 이미지를 사용합니다. .eleventy.js 파일에서 정적 이미지 자산이 static/img 폴더에 있어야 함을 알 수 있습니다. 각 페이지에는 영웅 이미지가 있으며 여기에서 앞부분이 정말 잘 작동합니다. 각 페이지의 머리말 섹션에 영웅 이미지에 대한 참조를 추가하겠습니다.

 hero: `/static/img/performance.jpg`

Eleventy는 _includes/layouts 폴더에 페이지 레이아웃을 유지합니다. base.njk 는 모든 페이지 유형에서 사용되므로 영웅 이미지를 원하는 위치이므로 탐색 바로 아래에 이 코드를 추가합니다.

 {% if (hero) %} <img class="page-hero" src="{{ hero }}" alt="Hero image for {{ title }}" /> {% endif %}

또한 CSS 클래스를 사용하여 정렬하고 적절한 패딩을 제공하여 정보 페이지에 엘리자베스의 사진에 대한 이미지 태그를 포함했습니다. 이제 커밋하고 정확히 무엇이 변경되었는지 확인할 좋은 시간입니다.

플러그인으로 YouTube 플레이어 포함

홈페이지에 유튜브 영상이 몇 개 있습니다. 플러그인을 사용하여 Youtube의 Embed 코드를 자동으로 생성해 봅시다. eleventy-plugin-youtube-embed는 이를 위한 훌륭한 옵션입니다. 설치 지침은 매우 명확합니다. npm으로 패키지를 설치한 다음 .eleventy.js 파일에 포함합니다. 더 이상 변경하지 않으면 해당 YouTube URL이 내장 플레이어로 변환됩니다. (커밋 참조)

컬렉션 및 필터 사용

이 사이트에는 블로그가 필요하지 않지만 사람들에게 다가오는 이벤트에 대해 알릴 방법이 필요합니다. 모든 의도와 목적을 위한 우리의 이벤트는 블로그 게시물과 같습니다. 각각에는 제목, 설명 및 날짜가 있습니다.

이 새로운 컬렉션 기반 페이지를 만드는 데 필요한 몇 가지 단계가 있습니다.

• 페이지 디렉토리에 새 events.md 파일을 만듭니다.
• 게시물 디렉토리에 몇 가지 이벤트를 추가합니다. 홀리데이 콘서트, 봄 콘서트, 가을 리사이틀용 .md 파일을 추가했습니다.
• 이러한 이벤트를 컬렉션으로 처리할 수 있도록 .eleventy.js 에 컬렉션 정의를 만듭니다. 컬렉션을 정의하는 방법은 다음과 같습니다. Posts 디렉토리에 있는 모든 Markdown 파일을 수집하고 머리말에 지정된 위치가 없는 모든 파일을 걸러냅니다.

 eleventyConfig.addCollection("events", (collection) => collection.getFilteredByGlob("posts/*.md").filter( post => { return ( item.data.location ? post : false ); }) );

• 컬렉션에 대한 참조를 events.md 파일에 추가하여 각 이벤트를 테이블의 항목으로 표시합니다. 컬렉션을 반복하는 방법은 다음과 같습니다.

 <table> <thead> <tr> <th>Date</th> <th>Title</th> <th>Location</th> </tr> </thead> <tbody> {%- for post in collections.events -%} <tr> <td>{{ post.date }}</td> <td><a href="{{ post.url }}">{{ post.data.title }}</a></td> <td>{{ post.data.location }}</td> </tr> {%- endfor -%} </tbody> </table>

그러나 날짜 형식이 매우 좋지 않습니다.

운 좋게도 상용구 .eleventy.js 파일에는 이미 readableDate라는 필터가 있습니다. Markdown 파일 및 템플릿의 콘텐츠에 필터를 사용하는 것은 쉽습니다.

 {{ post.date | readableDate }}

이제 날짜 형식이 올바르게 지정되었습니다! Eleventy의 필터 문서에서는 프레임워크에서 사용할 수 있는 필터와 고유한 필터를 추가하는 방법에 대해 자세히 설명합니다. (참조: 커밋)

CSS로 사이트 디자인 다듬기

자, 이제 꽤 견고한 사이트가 생성되었습니다. 페이지, 영웅 이미지, 이벤트 목록 및 문의 양식이 있습니다. 우리는 어떤 테마의 선택에도 제약을 받지 않으므로 사이트의 디자인으로 우리가 원하는 모든 것을 할 수 있습니다... 하늘이 한계입니다! 사이트를 성능, 반응성 및 미학적으로 만족스럽게 만드는 것은 귀하에게 달려 있습니다. 최종 커밋에 적용하기 위해 몇 가지 스타일과 마크업을 변경했습니다.

이제 우리는 우리의 모든 노력을 세상에 말할 수 있습니다. 이 사이트를 게시해 보겠습니다.

사이트 게시

아, 하지만 기다려. 이미 게시되었습니다! 우리는 GitHub에 대한 업데이트가 자동으로 Netlify에 전파되고 신선하고 빠른 HTML로 다시 빌드되는 이 멋진 워크플로에서 작업해 왔습니다. 업데이트는 git push만큼 쉽습니다. Netlify는 git의 변경 사항을 감지하고 마크다운을 HTML로 처리하고 정적 사이트를 제공합니다. 사용자 지정 도메인을 완료하고 준비가 되면 Netlify에서 기존 도메인을 무료로 사용할 수 있습니다. 사용자 지정 도메인에서 Netlify의 무료 HTTPS 인증서를 활용하는 방법을 포함하여 모든 세부 정보를 보려면 사이트 설정 > 도메인 관리를 방문하십시오.

고급: 이미지, 문의 양식 및 콘텐츠 관리

이것은 단지 몇 개의 이미지만 있는 간단한 사이트였습니다. 하지만 더 복잡한 사이트가 있을 수 있습니다. Netlify의 Large Media 서비스를 사용하면 전체 해상도 이미지를 GitHub에 업로드할 수 있고 이미지에 대한 포인터를 Large Media에 저장할 수 있습니다. 그렇게 하면 GitHub 리포지토리가 이미지 데이터로 가득 차지 않고 사이트에 마크업을 쉽게 추가하여 요청 시 최적화된 이미지 자르기 및 크기를 요청할 수 있습니다. 나는 더 큰 규모의 사이트에서 이것을 시도했고 응답성과 설정의 용이성에 정말 만족했습니다.

상용구와 함께 설치된 문의 양식을 기억하십니까? 그냥 작동합니다. 문의 양식을 제출하면 Netlify의 관리 섹션에서 제출 내용을 볼 수 있습니다. 귀하의 사이트에 대해 "양식"을 선택하십시오. 새 양식 제출을 받았을 때 이메일을 보내도록 Netlify를 구성할 수 있으며 양식 코드에 사용자 지정 확인 페이지를 추가할 수도 있습니다. 예를 들어 사이트의 /contact/success 페이지를 만든 다음 form 태그( form.njk )에 action="/contact/success" 를 추가하여 양식이 제출되면 사용자를 해당 페이지로 리디렉션합니다.

상용구는 Netlify의 콘텐츠 관리자와 함께 사용할 사이트도 구성합니다. 비기술자에게 잘 작동하도록 구성하는 것은 기사의 범위를 벗어납니다. 그러나 템플릿을 정의하고 Netlify의 콘텐츠 관리자에서 수행한 업데이트를 GitHub에 다시 동기화하고 사이트의 자동 재배포를 트리거하도록 할 수 있습니다. 하지만 마크다운에서 업데이트를 만들고 GitHub로 푸시하는 워크플로에 익숙하다면 이 기능이 필요하지 않을 수 있습니다.

• 최종 변환된 웹사이트(결과)
• GitHub 리포지토리

추가 읽기

다음은 이 튜토리얼 전체에서 사용되는 리소스에 대한 몇 가지 링크이며 더 자세히 알고 싶다면 몇 가지 고급 개념입니다.

• "Smashing Magazine이 콘텐츠를 관리하는 방법: WordPress에서 JAMstack으로 마이그레이션", Sarah Drasner
• "JAMstack에서 현대적인 웹 개발", Mathias Biilmann & Phil Hawksworth
• "Eleventy는 더 간단한 정적 사이트 생성기입니다." Eleventy Docs
• Eleventy Docs, "스타터 프로젝트"
• "대형 미디어 문서", Netlify
• "구성 옵션", Netlify CMS
• "WordPress 사이트를 Eleventy로 변환한 후 배운 12가지 사항" Scott Dawson