정적 사이트 생성기 Eleventy로 워드프레스 사이트 옮기기

엘레벤티^Elventy 는 정적 사이트 생성기^{static site generator}입니다. 먼저 정적 사이트 생성기를 사용하려는 이유에 대해 살펴본 뒤 워드프레스 사이트를 엘레벤티로 변환하는 방법을 알아보고 엘레벤티로 사이트를 관리하는 것의 장단점에 대해 이야기해보겠습니다.

정적 사이트 생성기란?

저는 HTML과 CSS가 웹사이트를 운영하기 위한 유일한 방법이었던 1990년대 중반에 웹 개발자 일을 시작했습니다. 그 시절에 만들어진 정적 웹사이트들은 간단하고 빠르며 반응형이었습니다. 하지만 그때와 달리 요즘에는 간단했던 웹사이트들도 꽤 복잡해질 때가 많습니다. 워드프레스를 예로 들어 생각해봅시다. 페이지를 렌더링하기 위해 호스트 서버에서 돌아가는 PHP는 MySQL 데이터베이스에 무거운 쿼리를 던져 메타데이터와 데이터 내용을 받습니다. 그리고 정적 파일 시스템에 저장된 이미지들의 알맞은 버전을 확인한 뒤, 이 모든 것을 테마 기반 템플릿에 병합해 브라우저에 반환합니다. 이러한 과정이 모든 페이지 요청에 대한 동적^dynamic 프로세스이긴 합니다. 하지만 많은 방문자가 동일한 콘텐츠를 경험하는 것으로 보아 이렇게 복잡한 과정을 거쳐 만든 사이트도 그렇게 동적이진 않아 보입니다.

정적 사이트 생성기로 웹사이트 제작에 접근하는 방식은 수십 년 전 제가 처음 이 일을 시작할 때 사용된 접근법과 동일합니다. 웹 페이지를 동적으로 조립하는 대신 마크다운^markdown으로 콘텐츠를 가져와 템플릿과 병합한 뒤 정적 웹 페이지를 만듭니다. 이 프로세스는 사용자들이 사이트를 탐색하며 보내는 요청^request과는 별개로 이루어집니다. 즉 모든 콘텐츠는 미리 생성되어 있기 때문에 모든 요청에 대해서 아주 빠르게 대응할 수 있습니다.

이 방식에서 웹 서버는 데이터베이스를 사용하지도 않고, 제3자 플러그인도 없이 말 그대로 서빙^serving을 합니다. 다시 말해 웹 서버는 순수한 HTML, CSS, 자바스크립트 그리고 이미지들만 사용합니다. 이렇게 단순화된 기술 스택으로 사이트를 만들면 서버 측에서 사용하는 인프라가 적어 해커들의 공격으로부터 더 안전하다는 장점이 있습니다.

또한 유명한 정적 사이트 생성기들은 기능^feature이 풍부하다는 장점도 있습니다. 풍부한 기능은 현대 콘텐츠 관리 방식에서 벗어날 매력적인 이유이기도 합니다.

이 업계 종사자라면 아마 매크로미디어^Macromedia(어도비의 이전 버전)의 드림위버^Dreamweaver 제품을 기억하실 겁니다. 저는 라이브러리의 아이템과 템플릿 개념을 좋아했습니다. 특히 그것들이 많은 웹 페이지들 사이에서 일관성을 보장한다는 점이 마음에 들었습니다. 엘레벤티의 템플릿^templates, 필터^filters, 단축된 코드^shortcodes와 플러그인^plugins의 개념은 이러한 과거 방식들과 유사합니다. 저는 이렇게 엘레벤티로 웹사이트를 제작하는 것에 대한 공부를 스매싱 매거진의 “워드프레스를 Jamstack으로 옮기는 과정^{How Smashing Magazine Manages Content: Migration From WordPress To JAMstack}“ 이라는 글을 읽은 뒤 시작했습니다. 그리고 저는 마티어스 빌만^{Mathias Biilmann}과 필 혹스워스^{Phil Hawksworth}의 《Modern Web Development on the JAMStack》이라는 무료 책자를 읽고 직접 해봐야겠다고 다짐했습니다.

정적 사이트 생성기를 사용해보는 것은 어떨까요?

정적 사이트 생성기는 콘텐츠들을 편집하는 기능이 어렵고, 특수한 케이스들을 다루기도 쉽지 않기 때문에 이것을 잘 활용하기 위해서는 약간의 노력이 필요합니다. 우리는 마크다운과 커맨드라인을 주로 사용할 것입니다. 비록 배우는 데 조금 어려움이 있지만 정적 사이트 생성기를 배워두면 동적 데이터, 이커머스, 댓글 그리고 평가 시스템 같은 다양한 옵션과 같이 사용할 있어 유용할 것입니다.

전체 사이트를 한 번에 다 바꿀 필요는 없습니다. 바꾸고자 하는 사이트가 복잡하다면 다 바꾸려고 하기보다는 조금씩 바꿔가면서 정적 사이트 제작에 대해 먼저 감을 익히길 바랍니다. 또한 콘텐츠를 워드프레스에서 생성/편집/관리하면서^{Headless CMS}, 정적 사이트 제작기^{Static Site Generator, SSG}로 제공할 수도 있습니다. 콘텐츠 관리 시스템으로 계속 쓰면서 SSG로 콘텐츠를 제공할 수도 있습니다.

왜 꼭 엘레벤티일까요?

인기 있는 정적 사이트 생성기를 검색해보면 엘레벤티^Eleventy, 개츠비^Gatsby, 휴고^Hugo, 지킬^Jekyll 등 여러 좋은 옵션을 찾을 수 있을 겁니다. 이들 중 어느 것을 골라야 할까요? 저에게 가장 잘 맞는 것을 고른 뒤 친구들에게도 물어봤습니다. 트위터^{my Twitter poll}에 물어본 결과, 엘레벤티를 추천하는 댓글이 많았습니다. 가장 결정적으로는 “@eleven_ty는 자신이 무엇을 하는지 모르면 매우 친근하게 느껴진다”는 댓글을 보고 바로 저라는 생각이 들어 엘레벤티를 골랐습니다. 그후로 저는 네 개의 워드프레스 사이트를 엘레벤티로 바꾼 뒤 깃허브에 코드를 저장하고 네틀리파이^Netlify를 통해 파일을 안전하게 서브했습니다. 오늘 우리가 할 것도 바로 이 작업입니다. 시작해봅시다!

시작하기: 기존 사이트 작업하기

엘레벤티에는 스타터들을 위한 프로젝트들이 많습니다. 우리는 “엘레벤티로 간단한 블로그 웹사이트를 구축하고 네틀리파이에 배포하기 위한 템플릿. 에틀리파이 CSM 및 네틀리파이 Forms 포함”이라고 쓰인 댄 어바노비치^{Dan Urbanowicz}의 eleventy-netlify-boilerplate 에서 시작하려고 합니다. “Deploy to Netlify” 버튼을 눌러 시작하시면 됩니다. 네틀리파이를 깃허브에 연결한 뒤, 레포지터리의 이름을 정하고(저는 smashing-eleventy-dawson으로 지었습니다) “Save&Deploy”를 누르면 됩니다. 이 과정을 다하고 나면 다음과 같은 몇 가지 일이 벌어집니다.

1. 보일러플레이트^boilerplate 프로젝트가 여러분의 깃허브에 추가됩니다.
2. 네틀리파이가 프로젝트에 동적 이름을 할당하고 빌드한 뒤 배포합니다.
3. 네틀리파이가 프로젝트에서 Identity(CMS 기능을 이용하고 싶은 경우)나 Forms(간단한 문의 양식을 사용할 경우)를 사용하도록 설정합니다.

캡처된 이미지에서 알 수 있듯 우리는 이 도메인을 확보하거나 프로젝트에 매핑할 수 있으며, HTTPS로 사이트를 보호할 수도 있습니다. 특히 HTTPS로 사이트를 보호하는 기능은 네틀리파이에서는 무료이기 때문에 SSL에 엄청난 비용을 썼던 저에게는 특히 더 매력적이었습니다.

Site Settings를 클릭한 뒤 Change Site Name을 클릭하면 사이트 이름을 변경할 수 있습니다. 저는 jovial-goldberg-e9f7e9를 좋아하는 만큼 Elizabeth-dawson-piano도 적합하다고 생각해서 이것으로 바꿨습니다. 이제 이 사이트가 우리가 변환할 사이트가 되는 것입니다. elizabeth-dawson-piano.netlify.app에 방문하면 더 많은 보일러플레이트를 찾을 수 있습니다. 멋지지 않나요?

우리가 사이트 커스터마이징을 시작하기 위해서는 로컬 기기에 새로운 레포지터리를 다운로드해야 합니다. 프로젝트를 위한 저의 깃허브 레포지터리에서 git clone 커맨드를 가져와 Visual Studio Code 터미널에 넣어주면 다운로드가 완료됩니다.

• Clone git →

보일러플레이트 README 파일^{boilerplate’s README file}에 있는 지시 사항에 따라 dependencies를 로컬에 설치하면 됩니다. _data/metadata.json 파일을 여러분의 프로젝트에 맞게 수정한 뒤 프로젝트를 로컬에서 돌려봅시다.

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

마지막 커맨드를 통해 엘레벤티는 localhost:8080에서 사이트를 로컬로 서브하면서 개발 과정에서 앞으로 생길 변화들을 감지할 준비를 마칩니다.

워드프레스의 포스트, 페이지, 이미지들을 보존하는 방법

우리가 변환하고 있는 사이트는 기존 워드프레스 사이트인 elizabethrdawson.wordpress.com 입니다. 사이트는 간단하지만 복사/붙여넣기를 줄이기 위해 기존 콘텐츠를 최대한 활용하기로 했습니다. 또한 우리는 사이트를 변환할 때 워드프레스의 내보내기 기능을 아주 유용하게 쓸 것입니다.

Export Content는 XML로 된 콘텐츠 zip 파일을 제공합니다. Export Media Library는 사이트의 이미지를 zip 파일로 제공합니다. 제가 선택한 3페이지짜리 사이트는 WordPress.com에서 호스팅되고 있는데 만약 사이트를 여러분이 직접 호스팅하고 있다면 Tools>Export에서 XML을 추출하면 됩니다.  호스트에 따라서 이미지를 다운로드하기 위해 FTP를 사용해야 할 수도 있습니다.

XML 파일을 에디터에서 열면 별로 효용이 없습니다. 개별적인 포스트들을 엘레벤티에서 사용되는 언어인 마크다운으로 가져올 방법이 필요합니다. 다행히 워드프레스에 포스트와 페이지들을 마크다운으로 변환해주는 패키지가 있습니다. 이 레포지터리를 여러분의 로컬 기기에 클론한 뒤 XML 파일을 그 디렉터리에 넣으면 됩니다. 이 작업을 진행했다면 여러분의 디렉터리 리스트는 아래와 같아야 합니다.

XML에서 곧바로 포스트를 추출할 수도 있겠지만 샘플 사이트가 3 페이지이기 때문에 약간 조정해야 합니다. 우선 parser.js의 39번 줄에 “post”를 “page”로 바꿔야 합니다.

이 과정에서 welcome.md, about.md, contact.md 세 개의 파일이 생성됩니다. 각각의 파일마다 페이지 제목, 날짜 그리고 XML에서 추출한 마크다운을 설명하는 front matter가 있습니다. front matter가 생소하다면 “pages” 디렉터리의 .md 파일들 중 하나에 들어가 보세요. 파일 가장 윗부분에 데이터 섹션이 표시되는 것을 보실 수 있을 것입니다. 엘레벤티는 다양한 front matter를 통해 제목, 날짜뿐 아니라 여러분이 사이트를 만드는 데 도움이 되는 기능들을 제공합니다. .md 파일들의 front matter 부분에서도 이러한 기능을 볼 수 있습니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/wvzQWWp’>wvzQWWp</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

이 구문을 사용하면 사이트 탐색에 자동으로 페이지를 추가할 수 있습니다. 저는 Home, Contact, 그리고 About 파트를 우리가 만들 샘플 페이지에도 넣고 싶어서 boilerplate.md에 복사/붙여넣기를 해두었습니다. 그리고 우리의 샘플 사이트에서 Blog는 필요 없기 때문에 post 디렉터리에서 .md 파일들을 다 삭제했습니다. 지금까지 우리가 해낸 작업을 로컬에서 미리 보면 다음과 같습니다.

이쯤에서 우리는 지금까지 우리의 작업들을 깃허브에 commit, push해보도록 하겠습니다. 제가 commit을 하면 몇 가지 일이 벌어집니다. 우선 깃허브에서 업데이트가 되었다고 알려줍니다. 그러면 네틀리파이는 이를 실행해 사이트를 빌드하고 업데이트합니다. 더 구체적으로는 로컬 기기에서 파일을 업데이트하고 저장하는 것처럼 엘레벤티는 마크다운 파일을 HTML 페이지로 변환합니다. 그러면 로컬에 있는 _site  디렉터리에 여러분의 사이트가 HTML 버전으로 저장됩니다. 그래서 commit을 한 뒤 바로 Elizabeth-dawson-piano.netlify.app으로 이동하면 로컬에서 업데이트된 것과 똑같이 업데이트되는 것을 볼 수 있습니다.

이미지 추가하기

우리는 기존 사이트의 이미지를 사용할 것입니다. 그러기 위해서는 .eleventy.js 파일에 있는 영웅이 그려진 정적 이미지들을 static/img 폴더에 넣어야 합니다. 여기서 주의 깊게 볼 점은 각 페이지마다 영웅 그림을 넣기 위해서는 front matter 가 아주 중요한 역할을 한다는 것입니다. 모든 페이지의 front matter 섹션에 이제 영웅 그림의 레퍼런스를 넣어봅시다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/rNMQLLb’>rNMQLLb</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

엘레벤티는 _includes/layouts 폴더에 페이지 레이아웃을 저장합니다. base.njk 은 모든 페이지 타입에 다 적용되기 때문에 탐색 바로 아래 줄에 이 코드를 추가해 영웅 이미지를 넣을 것입니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/RwGqRGK’>RwGqRGK</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

저는 About 페이지에 CSS 클래스를 이용해 알맞은 테두리를 넣은 엘리자베스의 사진을 이미지 태그로 추가했습니다. 이제는 commit한 뒤 무엇이 바뀌었는지 확인해봅시다.

플러그인을 사용해 유튜브 플레이어 삽입하기

홈페이지에는 유튜브 비디오가 몇 개 있습니다. eleventy-plugin-youtube-embed를 이용해 플러그인으로 유튜브 코드를 자동으로 추가해보겠습니다. 설치는 매우 간단합니다. npm을 사용해 패키지를 설치하고 그 패키지를 .eleventy.js 파일에 추가하면 됩니다. 이 작업을 거치면 특별히 다른 처리를 해주지 않아도 유튜브 url들이 내장 플레이어로 변환됩니다(commit 참조).

collection과 filter 사용하기

이 사이트에 블로그가 필요 없긴 하지만 우리는 사람들에게 예정된 이벤트들에 대해 알려야 하고, 이벤트 알림은 그 의도와 목적을 고려해보았을 때 블로그 포스트와 매우 유사합니다. 각각의 이벤트들은 제목이 있고, 설명이 필요하며, 날짜도 있어야 하기 때문입니다.

그래서 우리는 collection 을 기반으로 한 이러한 페이지를 만들고자 합니다. 그러기 위해서는 다음과 같은 단계들을 거쳐야 합니다.

• pages 디렉터리에 md 라는 파일을 새로 만듭니다.
• posts 디렉터리에 몇 가지 이벤트들을 추가합니다. 저는 연휴 콘서트, 봄 콘서트, 가을 독주회를 위한 .md  파일들을 추가했습니다.
• 우리가 이 이벤트를 collection으로 다룰 수 있도록 .eleventy.js에 collection을 정의합니다. 마크다운 파일들을 posts 디렉터리에 모으고 front matter에 쓰이지 않은 모든 것을 다 필터링해 collection을 정의합니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/JjReKbd’>JjReKbd</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

• 각 이벤트를 테이블의 엔트리로 지정한 뒤, events.md 파일에 collection 참조^reference를 추가합니다. collection의 반복은 다음과 같습니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/JjReKEd’>JjReKEd</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

그러나 날짜 형식이 마음에 들지 않습니다.

보일러플레이트의 .eleventy.js 파일에 필터링해 두었던 readableDate를 사용하면 날짜 형식을 해결할 수 있습니다. 마크다운 파일 내용과 템플릿에 필터를 사용하는 것은 쉽습니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/abmQZJb’>abmQZJb</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

이제 날짜 형식이 올바르게 지정되었습니다!

Eleventy’s filter documentation에는 어떤 필터들이 프레임워크에 사용될 수 있는지, 자체 필터는 어떻게 추가하는지에 대해 자세하게 나와 있습니다(commit 참조).

CSS로 사이트 디자인 다듬기

이제 우리는 여러 페이지, 영웅 이미지, 이벤트 리스트 그리고 계약 폼을 갖춘 제법 그럴싸한 사이트를 만들었습니다. 사이트 디자인은 테마에 국한되지 않아도 됩니다. 사이트를 예쁘고 성능이 좋으며 반응형으로 만드는 것은 여러분의 몫입니다. 제가 몇 가지 스타일과 마크업을 바꿔 마지막으로 commit을 해보도록 하겠습니다.

이제 이 사이트를 배포해봅시다.

사이트 배포하는 법

기뻐해도 될 점은 사이트가 이미 배포되었다는 점입니다. 깃^git을 업데이트하면 네틀리파이가 깃의 변화를 감지하고 마크다운을 HTML로 바꾼 뒤, 정적 사이트를 서브합니다. 만일 여기까지 다한 뒤 커스텀 도메인이 필요하다면 네틀리파이를 사용해 기존 도메인을 무료로 이용하면 됩니다.  Site Settings> Domain Management에 가면 네틀리파이로 커스텀 도메인에 어떻게 HTTPS를 무료로 사용할 수 있는지 자세히 안내되어 있습니다.

더 나아가기: 이미지, 연락 폼 그리고 콘텐츠 관리

만일 여러분의 사이트가 지금까지 만든 것들보다 더 복잡하다면, 네틀리파이의 Large Media 서비스^{Netlify’s Large Media service} 를 이용하면 됩니다. 라지 미디어^{Large Media} 서비스를 이용하면 고해상도 이미지들을 깃허브에 올린 뒤, 라지 미디어에 이미지 포인터들을 저장할 수 있습니다. 이렇게 하면 깃허브 레포지터리의 용량을 많이 쓰지도 않을 뿐더러 사진 자르기나 크기가 조정된 사진을 요청하기 위해 쉽게 마크업을 추가할 수 있습니다. 제가 운영하는 한 사이트를 바꾸면서 이 방법을 사용했는데 반응성과 쉬운 셋업에 정말 만족했습니다.

혹시 보일러플레이트와 함께 설치했던 연락 폼을 기억하나요? 연락 폼 역시 잘 작동합니다. 만일 여러분이 연락 폼을 제출하면 네틀리파이의 administration 섹션에서 여러분이 제출한 폼을 볼 수 있습니다. 또 새 답변을 받을 때마다 여러분에게 이메일을 보내도록 설정할 수도 있고, 사용자가 자신이 작성한 폼 내용을 확인할 수 있는 페이지를 추가하는 코드도 넣을 수 있습니다. 예를 들어 /contact/success라는 페이지를 사이트에 추가한 뒤 form.njk 속 form 태그에 action="/contact/success"를 추가해 폼이 성공적으로 제출되었음을 사용자에게 알려줄 수 있습니다.

보일러플레이트는 Netlify’s content manager도 사용할 수 있도록 되어 있습니다. 그러나 비전문가들에게 이것을 적절하게 사용하는 방법을 설명하는 것은 이 글의 목적과 수준에서 벗어납니다. 여러분이 여러 기능을 능숙하게 사용할 줄 안다고 해도 이러한 기능까지는 필요 없을 겁니다. 간단히 언급하자면 네틀리파이의 content manager를 이용해 여러분은 템플릿을 정의하거나 네틀리파이의 content manager에서 업데이트한 내용을 깃허브에 동기화한 뒤 사이트의 자동 재배포를 시작할 수 있습니다.

• 최종 변환된 웹사이트^{Final Converted Website}(결과)
• 깃허브 레포지터리^{GitHub Repository}

더 읽어볼 만한 자료

이 튜토리얼에서 사용한 자료, 조금 더 심화된 개념들을 담고 있는 자료들을 첨부했습니다.

• 새러 드레스너 ^{Sarah Drasner}의 “How Smashing Magazine Manages Content: Migration From WordPress To JAMstack”
• 마티아스 빌만 ^{Mathias Biilmann}, 필 혹스워스^{Phil Hawksworth}의 “Modern Web Development On The JAMstack”
• 엘레벤티 Docs “Eleventy Is A Simpler Static Site Generator”
• 엘레벤티 Docs “Starter Projects”
• 네틀리파이 “Large Media Docs”
• 네틀리파이 CMS “Configuration Options”
• 스콧 도슨^{Scott Dawson}의 “12 Things I Learned After Converting WordPress Sites to Eleventy”