110개의 정적 사이트 생성기 자세히 알아보기

하지만 먼저 — "정적 사이트"가 무엇을 의미하는지 빠르게 검토한 다음 생성기가 제공하는 것이 무엇인지 살펴보겠습니다. 정적 사이트는 정적 콘텐츠로 구성됩니다. HTML, CSS, 자산 및 모든 콘텐츠는 웹사이트 호스트로 푸시하기 전에 이미 함께 컴파일됩니다. 이것은 런타임에 데이터베이스 쿼리(예: WordPress) 또는 API 클라이언트 측(예: 서버 측 렌더링이 없는 JavaScript 프레임워크)에서 콘텐츠를 가져오는 동적 사이트와 다릅니다.

정적 사이트 생성기는 콘텐츠를 정적 HTML로 컴파일하는 환경 및 빌드 프로세서입니다. 일반적으로 콘텐츠 작성 시 유연성을 제공하고(예: Markdown 지원) 템플릿 방법을 포함하는 도우미를 제공합니다. 따라서 HTML 페이지를 하나씩 작성하고 반복되는 부분을 복사하여 붙여넣는 대신 생성기는 특정 템플릿 언어를 통해 이러한 항목을 구성 요소로 나누는 것을 지원합니다. 그런 다음 생성기의 빌드 프로세스는 모든 것을 함께 가져와 웹 사이트로 제공될 웹 호스트에 업로드할 수 있는 최종 HTML을 출력합니다. 사용하는 웹 호스트에 따라 이 빌드 프로세스는 호스트에서 수행할 수도 있습니다.

많은 정적 사이트 생성기를 사용할 수 있습니다. Jekyll, Hugo, Gatsby, Next 및 Nuxt와 같은 것을 들어봤거나 사용해본 적이 있을 것입니다. 전체 목록은 Jamstack.org에서 제공합니다.

Eleventy가 다른 정적 사이트 생성기와 다른 점은 무엇입니까?

Eleventy는 빌드와 브라우저 모두에서 매우 빠릅니다. 이는 콘텐츠를 제공하기 위해 클라이언트 측 JavaScript 번들을 로드할 필요가 없기 때문입니다(Gatsby와 비교). 파일 시스템 페이지 생성이 기본적으로 정적 HTML로 설정되기 때문에 서버 측 렌더링은 여기서도 문제가 되지 않습니다.

Eleventy를 정말 독특하게 만드는 것은 최대 10개의 다른 템플릿 언어 중에서 선택하고 혼합할 수 있는 기능입니다.

혼합 언어는 동일한 파일에서 또는 레이아웃 간에 발생할 수 있습니다. 예를 들어, 나는 종종 Nunjucks 레이아웃에 제공되는 Markdown으로 주요 콘텐츠를 작성합니다. 일부 프로젝트에서는 Markdown 파일에 있는 동안 Nunjucks를 사용하여 일부 데이터를 반복할 수 있는 것이 유용하다는 것을 알았습니다. 언어를 결합하는 이 기능은 매우 강력하며 귀하와 귀하의 프로젝트에 가장 적합한 작성 및 작성 워크플로를 설계할 수 있습니다.

Eleventy에는 BrowserSync를 사용하여 사이트를 로컬로 제공하고 파일 변경 시 핫 리로드를 활성화하는 --serve 플래그가 포함되어 있습니다. 이것은 매우 편리하며 정적 사이트 생성기를 찾는 것이 아니라 Gulp와 같은 빌드 도구에서 업그레이드하려는 경우 염두에 두는 것이 좋습니다.

제로 구성의 일부로 모든 사이트 파일이 프로젝트 루트에 있을 수 있습니다. 입력 및 출력 디렉토리를 변경하려면 .eleventy.js 라는 루트 파일로 예상되는 Eleventy 구성을 생성할 수 있습니다. 다음은 이 수정 방법을 보여주는 빠른 스니펫입니다.

 module.exports = function (eleventyConfig) { return { dir: { // default: [site root] input: "src", // default: _site output: "public", }, }; };

앞서 언급했듯이 기본 동작은 일반적으로 특히 빠르게 시작하는 데 큰 이점이 있는 파일 시스템 페이지 생성입니다. 이것은 사용자 지정 permalink 를 할당하여 쉽게 재정의할 수 있으며 파일당, 전체 디렉터리 또는 데이터 집합에 대해 동적으로 수행할 수 있습니다. Permalink는 또한 우리가 잠시 후에 탐구할 또 다른 초능력을 제공합니다!

독특하게도 빌드하는 동안 JavaScript를 사용하고 필터와 단축 코드를 활용하여 해당 콘텐츠와 데이터에 대한 콘텐츠, 데이터 및 변환을 준비할 수 있습니다(이에 대해서는 나중에 설명하겠습니다). 다시 말하지만, 이 모든 것은 JavaScript 번들 클라이언트 측을 추가하지 않고도 발생하지만 여전히 JavaScript를 템플릿 언어로 사용할 수 있습니다.

중요 참고 사항 : JavaScript 지식이 없거나 전혀 없어도 Eleventy를 성공적으로 사용할 수 있습니다.

Gatsby와 같은 다른 SSG나 WordPress와 같은 환경과 달리 대부분의 Eleventy 사이트에는 플러그인이 필요하지 않습니다. 일부 플러그인을 사용할 수 있지만 필수 기능에는 필요하지 않습니다.

Eleventy로 구축할 때 필요에 따라 기능을 추가할 수 있습니다. 사실, HTML만 사용할 수 있고 다른 템플릿 언어로는 작업할 수 없습니다. Eleventy는 프로젝트에 필요한 만큼만 복잡합니다!

필수 110 개념 이해하기

Eleventy 프로젝트를 성공적으로 만드는 데 도움이 되는 몇 가지 용어와 개념을 살펴보겠습니다.

레이아웃 및 템플릿

이러한 용어를 상호 교환 가능한 것으로 생각할 수 있지만 Eleventy의 맥락에서 문맥적 의미가 있습니다.

• 템플릿은 모든 콘텐츠 파일의 총칭입니다.
• 레이아웃은 다른 콘텐츠를 래핑하는 특수 템플릿입니다.

예를 들어 템플릿 은 모든 Markdown 파일을 참조하는 반면 레이아웃 은 템플릿 콘텐츠용 슬롯과 HTML5 상용구가 포함된 Nunjucks 파일일 수 있습니다. 시작하기 섹션에서 이 작업을 수행하는 방법을 배웁니다.

필터 및 단축 코드

콘텐츠 출력을 수정하고 재사용 가능한 템플릿 부분을 만드는 추가 방법입니다. Nunjucks, Liquid, Handlebars 및 JavaScript 템플릿과 함께 사용할 수 있습니다. 필터와 단축 코드는 .eleventy.js 내에서 정의됩니다.

선택한 템플릿 언어에서 사용할 수 있는 변수 및 연산자 외에도 Eleventy는 이전에 나열된 언어 전반에 걸쳐 필터 개념을 통합했습니다. 필터는 콘텐츠 유형에 특정한 방식으로 콘텐츠를 변환합니다. 예를 들어 문자열이 대문자로 표시되도록 필터를 만들 수 있습니다. 또는 임의의 항목을 선택하는 것과 같이 반환되는 내용을 변경하기 위해 배열에 사용하도록 의도된 필터가 있을 수 있습니다. 일부 필터는 Eleventy에서 제공하며 그 중 일부는 시작하기 자습서에서 사용할 것입니다.

단축 코드를 사용하면 재사용 가능한 템플릿 부분을 생성하고 인수를 수락할 수 있습니다. 독립 실행형이거나 쌍일 수 있습니다. 즉, 시작 및 종료 태그로 콘텐츠를 래핑합니다.

내가 가장 좋아하는 단축 코드 중 하나는 현재 연도를 렌더링하는 것입니다. 즉, 바닥글에서 더 이상 오래된 저작권 연도를 의미하지 않습니다! year 단축 코드를 만드는 방법은 다음과 같습니다.

 eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

Nunjucks 또는 Liquid 템플릿에서 사용하려면 다음과 같습니다. {% year %} .

쌍으로 된 단축 코드의 예는 Eleventy 문서를 검토할 수 있습니다.

컬렉션

컬렉션은 관련 콘텐츠의 그룹이며 일반적으로 tags 를 정의하여 frontmatter 내에서 생성됩니다. 태그 구문 옵션에는 단일 문자열, 단일 행 배열(여러 개의 경우 ["tagA", "tagB"] ) 또는 여러 태그를 할당하는 YAML 스타일 목록이 포함됩니다. 예를 들어 해당 컬렉션에 포함하려는 모든 콘텐츠에 다음 표제를 추가하여 "페이지" 컬렉션을 만들 수 있습니다.

 --- tags: pages ---

컬렉션을 정의하면 전역 collections 개체 내에서 선택한 템플릿 언어를 통해 컬렉션에 액세스할 수 있습니다. "페이지" 컬렉션에 액세스하려면 collections.pages 와 같이 보일 것입니다. 이것은 해당 컬렉션의 데이터 배열을 반환하므로 링크 목록이나 기사 티저 카드를 생성하는 것과 같이 컬렉션을 반복하는 것과 같은 배열 작업을 수행할 수 있습니다. 일반 파일 출력을 억제하고 컬렉션만 사용하여 단일 페이지 사이트 콘텐츠를 관리하는 데 유용한 데이터 표시를 관리할 수도 있습니다.

맞춤 데이터

지금까지 콘텐츠를 파일로 생성하는 것에 대해 이야기했지만 Eleventy를 사용하면 다양한 데이터 소스를 매우 쉽게 유지 관리할 수 있습니다. 이것을 "커스텀 데이터"라고 하며 _data 디렉토리에 JavaScript 모듈 내보내기 또는 JSON 파일로 존재합니다.

사용자 지정 데이터를 사용하여 다음을 수행할 수 있습니다.

• 기본 JSON 배열을 정의합니다.
• 가져오기 작업의 결과를 반환합니다.
• 헤드리스 CMS에서 콘텐츠를 검색하고 다시 포맷합니다.

Eleventy는 _data 내의 모든 데이터를 파일 이름과 일치하는 변수에서 사용할 수 있도록 합니다. 예를 들어, posts.json 을 생성하면 내 템플릿에서 posts 로 액세스할 수 있습니다. Nunjucks를 사용하여 posts 데이터를 반복하는 예는 다음과 같습니다.

 {% for post in posts %} {{ post.title }} {% endfor %}

페이지 매김 및 데이터에서 페이지 만들기

Eleventy 용어에서 페이지 매김은 데이터 세트를 반복하고 해당 데이터 "청크"의 출력에 대한 템플릿을 정의하는 것을 말합니다. 이것은 frontmatter 내에서 페이지 매김을 정의하는 전용 파일로 수행됩니다. 파일에는 데이터에 대한 의도한 출력 설정도 포함되어 있습니다. 즉, 자체 템플릿도 됩니다. 콘텐츠를 보낼 레이아웃을 정의하고 태그를 추가하여 참조의 용이성과 출력의 유연성을 위해 컬렉션을 생성할 수도 있습니다.

참고 : 사용자 지정 데이터를 사용하여 CMS에서 콘텐츠를 검색하는 경우 페이지 매김은 해당 데이터를 페이지로 동적으로 변환하기 위해 찾고 있는 Eleventy 방법입니다.

다음은 헤드리스 CMS에서 가져오기를 통해 검색한다고 가정하는 posts 사용자 지정 데이터를 참조하는 예입니다. 중요한 것은 size 가 1로 설정되어 각 "페이지 매김 청크"가 하나의 단일 페이지 출력을 생성해야 함을 의미합니다. 그런 다음 alias 을 사용하여 페이지 매김 루프의 현재 항목에 대한 참조를 만든 다음 permalink 정의와 템플릿 본문에서 해당 참조를 사용합니다.

페이지 매김을 정의하는 파일은 입력 디렉토리 내에서 원하는 모든 위치에 있을 수 있습니다. 내 조직 환경 설정은 generate 디렉토리를 만든 다음 생성할 컬렉션과 동일한 이름을 지정하는 것입니다. 다음을 src/generate/posts.njk 로 간주하십시오.

 --- pagination: data: posts size: 1 alias: post addAllPagesToCollections: true permalink: "/{{ post.title | slug }}/" tags: posts layout: post templateEngineOverride: njk, md --- {{ post.body | safe }}

이 경우 permalink 는 사이트 루트에서 직접 출력할 페이지를 할당합니다. /posts/{{ post.title | slug }} 예를 들어 /posts/{{ post.title | slug }} .

또한 생성된 모든 페이지를 태그에 의해 생성된 컬렉션에서 사용할 수 있도록 하려면 addAllPagesToCollections 를 true 로 설정하여 첫 번째 항목보다 더 많이 포함해야 합니다.

마지막으로 콘텐츠가 미리 컴파일된 HTML 대신 Markdown으로 들어오는 경우 templateEngineOverride 를 사용해야 합니다. 예제 스니펫에서 njk, md 로 설정했습니다. 즉, 템플릿 콘텐츠는 변수를 변환하기 위해 모두 Nunjucks로 처리되어야 하고 변수에 반환된 콘텐츠를 컴파일하려면 Markdown이 필요합니다.

safe 이 무엇을 의미하는지 궁금하시다면 다음에 배우겠습니다!

Eleventy를 시작하는 방법

자, 이제 첫 번째 Eleventy 프로젝트를 시작할 준비가 되었습니다! 이 간단한 튜토리얼은 건물을 계속 건설할 수 있는 시작 구조를 얻는 데 도움이 될 것입니다. 우리는 이미 배운 개념을 사용하고 몇 가지 새로운 아이디어도 추가합니다.

여기서 첫 번째 중요한 참고 사항은 Eleventy가 범위가 지정된 패키지이므로 설치 명령이 있다는 것입니다.

 npm install @11ty/eleventy

다음으로 내가 좋아하는 편리한 편의는 다음 스크립트를 내 package.json 에 추가하는 것입니다.

 "scripts": { "start": "eleventy --serve", "build": "eleventy" }

이전에 언급했듯이 --serve 플래그는 BrowserSync를 통해 로컬 서버를 활성화합니다.

내가 선호하는 것은 이미 살펴본 대로 입력/출력 디렉토리를 업데이트하는 것이므로 이제 src 또는 선택한 입력 디렉토리 내에 일부 콘텐츠를 생성할 시간입니다.

처음부터 프로젝트를 보다 유연하고 확장할 수 있도록 준비하기 위해 HTML5 상용구를 포함하는 레이아웃을 하나 이상 만드는 것이 좋습니다. 레이아웃은 직접 호출되는 _includes 내에서 정의해야 하며, 이는 소수의 예상 디렉토리 중 하나입니다.

초보자들 사이에서 자주 찾을 수 있는 규칙은 이 레이아웃 base 을 호출하는 것입니다. 나는 그것을 Nunjucks 파일로 만드는 것을 선호합니다.

다음은 base.njk 샘플입니다.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }}</title> </head> <body> <header> <h1>{{ title }}</h1> </header> <main> {{ content | safe }} </main> </body> </html>

이중 중괄호는 변수에 대한 Nunjuck 구문입니다. 여기에서는 곧 머리말을 통해 제공될 수신 title 변수를 준비했습니다. content 변수는 Eleventy에서 제공하며 전면이 아닌 들어오는 모든 콘텐츠가 있어야 하는 슬롯을 표시합니다. 중요한 것은 컴파일된 HTML이 이스케이프되어 렌더링되는 것을 방지하는 제공된 safe 필터와 함께 사용된다는 것입니다.

이제 index.md 로 추가할 사이트 인덱스를 만들 차례입니다.

 --- title: Hello Smashing Readers! layout: base.njk --- Thanks for reading — hope you're excited to try Eleventy!

머리말에서 제목을 추가하고 레이아웃도 정의했습니다.

이 시점에서 npm start 스크립트를 추가하여 프로젝트를 실행할 수 있습니다. 그러면 BrowserSync가 localhost:8080 (사용 가능한 경우)을 설정하도록 트리거하지만 브라우저에서 수동으로 열어야 합니다. 브라우저를 자동으로 열려면 이 빠른 팁을 확인하세요.

마지막 중요한 단계는 스타일시트를 추가하는 것입니다. 현재 CSS는 자동으로 포함된 파일 형식으로 인식되지 않으므로 스타일시트를 만든 후 추가 구성 단계가 하나 더 있습니다.

css/style.css 와 같이 입력 디렉토리에서 원하는 위치에 CSS 파일을 추가할 수 있습니다. 그런 다음 .eleventy.js 를 열고(또는 입력/출력 사용자 지정을 수행하지 않은 경우 프로젝트 루트에서 생성) 다음을 추가합니다.

 module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/css/"); eleventyConfig.addWatchTarget("./src/css/"); // - input/output customization if using - };

먼저 css 디렉토리를 "통과 사본"으로 추가합니다. 이는 Eleventy가 출력 디렉토리로의 푸시에 이를 포함해야 함을 의미합니다. 그런 다음 start 명령을 실행하는 동안 스타일을 변경하면 Eleventy가 로컬 사이트를 업데이트하기 위해 다시 빌드를 트리거하도록 "감시 대상"으로 추가합니다.

마지막으로 base 레이아웃 내 스타일시트에 대한 링크를 추가하는 것을 기억해야 합니다.

 <link rel="stylesheet" href="{{ '/css/style.css' | url }}" />

스타일시트의 위치를 ​​정의할 때 빌드 시 필요에 따라 상대 파일 경로를 조정하는 Eleventy의 url 필터를 통해 전달합니다.

다음으로 "페이지" 게시물 유형을 만들어 컬렉션과 레이아웃을 좀 더 사용하여 탐색해 보겠습니다. 이렇게 하려면 pages 디렉토리를 추가하고 레이아웃이 아닌 title 앞부분 키를 포함하는 하나 또는 두 개의 Markdown 파일을 만듭니다.

이번에는 레이아웃을 정의하기 위해 약간 다른 방법인 데이터 디렉토리 파일 을 사용할 것입니다. 이 파일은 일반적으로 JSON으로 형식이 지정되며 디렉터리 내의 모든 파일에 적용해야 하는 데이터를 추가할 수 있으므로 파일 간에 중복되는 것을 방지할 수 있습니다. 파일 이름은 사용할 디렉터리와 동일해야 하므로 pages.json 파일을 만들고 다음 콘텐츠를 추가합니다.

 { "layout": "page.njk", "tags": "pages" }

또한 "페이지" 컬렉션을 만들기 위해 태그를 정의했습니다. 그러나 우리가 정의한 레이아웃은 아직 실제로 존재하지 않으므로 _includes/page.njk 를 만들고 다음을 추가합니다.

 --- layout: base.njk --- <article> {{ content | safe }} </article>

여기서 우리는 base 템플릿을 재사용할 수 있도록 Eleventy 개념의 레이아웃 연결 을 사용하고 있지만 <article> 인 page 레이아웃에 고유한 요소를 추가할 수도 있습니다. 이것은 우리 페이지의 모든 콘텐츠가 page 레이아웃과 base 레이아웃을 모두 사용한다는 것을 의미합니다.

레이아웃 체인은 상용구 및 기본 사이트 레이아웃 구조를 재사용할 수 있도록 하여 중복을 줄입니다.

이제 pages 콘텐츠 유형에 대한 콘텐츠를 만들고 태그를 통해 "페이지" 컬렉션으로 정의했으므로 해당 컬렉션에 액세스하는 방법을 살펴보겠습니다. 여기에서는 Nunjucks를 사용하여 컬렉션을 반복하고 각 페이지에 대한 링크 목록을 출력합니다. 이 루프는 index.md 파일에 추가됩니다.

 {% for post in collections.post -%} - [{{ post.data.title }}]({{ post.url }}) {% endfor %}

루프 내부 가 실제로 링크를 렌더링하기 위해 Markdown으로 다시 전환된다는 고유한 작업을 수행했습니다. 이것은 이 시나리오를 처리하는 데 필요한 방법은 아니지만 매우 편리할 수 있습니다! 때로는 복잡성에 따라 작동하지 않을 수 있습니다. 진짜 이유는 Markdown 렌더러가 기본적으로 Liquid 템플릿 언어로 설정되어 있기 때문에 기본 루프를 넘어 Nunjucks 기능을 사용하는 경우 Eleventy에 파일 처리 방법을 알려야 합니다.

페이지 매김에 대한 이전 섹션에서 실제로 이미 이에 대한 솔루션을 살펴보았습니다. 이는 templateEngineOverride 를 사용하여 파일이 Nunjucks와 Markdown 모두로 처리되어야 함을 표시하는 것입니다. 다음 전체 솔루션을 템플릿의 첫 번째 문제에 배치해야 합니다. templateEngineOverride: njk, md .

이 시점에서 기본 다중 페이지 사이트를 만들었습니다! 외부 데이터를 사용해야 하는 경우 페이지 매김 섹션으로 다시 이동합니다.

Eleventy 프로젝트를 시작하는 다른 방법

WordPress와 같은 다른 정적 사이트 생성기 및 환경에 "테마"라는 개념이 있는 반면 Eleventy는 "스타터"라는 용어를 사용합니다. 선택할 수 있는 컬렉션이 늘어나고 있으며 Eleventy 문서 내의 목록에서 많은 것을 찾을 수 있습니다.

선호하는 것은 Sass를 Eleventy 프로젝트와 함께 사용하는 것이며, Sass 스타터를 빌드 프로세스에 추가하는 방법을 알고 싶다면 사용할 수 있습니다. 다른 사람들은 자산 및 처리를 위한 빌드 파이프라인에 익숙한 경우 Gulp에 추가하도록 선택할 수 있습니다.

또한 이 기사에서 논의된 기능을 포함하고 튜토리얼 결과와 유사성을 공유하는 최소 스타터를 만들었습니다. 또한 외부 데이터를 가져오는 작은 예가 있으며 컬렉션을 기반으로 사이트 탐색을 표시하기 위해 부분적으로 추가하는 방법을 보여줍니다.

기본 사항 확장

기본 콘텐츠와 사용자 지정 데이터로 첫 번째 사이트를 만드는 실험을 한 후에는 해당 콘텐츠로 작업하는 추가 방법을 아는 것이 도움이 됩니다. 다음은 알아야 할 몇 가지 다른 개념에 대한 간략한 개요입니다.

영구 링크로 파일 출력 유형 변경

나는 퍼머링크가 초능력을 가지고 있다고 앞서 언급했다. HTML이 아닌 파일 형식을 출력하는 데 사용할 수 있다는 것입니다.

두 가지 유용한 예는 RSS 피드와 사이트맵을 만드는 것입니다. 둘 다 일반적으로 XML 파일입니다. 정말 강력한 것은 선택한 템플릿 언어를 계속 사용하여 해당 파일을 생성할 수 있다는 것입니다. 예를 들어 RSS 피드를 최신 상태로 유지하기 위해 Nunjucks를 사용하여 페이지 데이터를 반복할 수 있습니다.

컬렉션 사용자 정의

때때로 태그를 사용하여 컬렉션을 만드는 것만으로는 충분하지 않을 수 있습니다. 또는 기존 컬렉션의 필터링된 변형을 만들 수 있습니다. 제공되는 일련의 기능을 사용하여 컬렉션을 변경하거나 생성할 수 있습니다. 이것들은 .eleventy.js 설정 파일에 있을 것입니다.

이 예에서는 addCollection 함수를 사용하여 기존 컬렉션의 항목을 필터링합니다. 새 컬렉션은 머리말 내 customKey 의 존재를 기반으로 합니다. 이 키는 생성된 모든 Eleventy 콘텐츠에 연결된 data 개체에서 반환됩니다.

 eleventyConfig.addCollection("specialCollection", function (collection) { return collection.getAll().filter((post) => post.data.customKey); });

Eleventy 문서에서 컬렉션을 생성, 수정 및 사용하는 다른 방법을 검토할 수 있습니다.

데이터 캐스케이드 작업

Eleventy는 이 가이드에서 이제 막 탐색을 시작한 데이터 캐스케이드 라는 템플릿을 위해 데이터가 컴파일되는 방식에 대한 보다 완전한 개념을 가지고 있습니다. 문서에서 시작하여 작동 방식을 검토하면 Eleventy를 최대한 활용할 수 있습니다. Ben Myers는 또한 데이터 캐스케이드를 이해하기 위한 훌륭한 가이드를 제공합니다.

추천 일레븐 플러그인

소개에서 사용 가능한 플러그인이 있지만 항상 필요한 것은 아니라고 간단히 언급했습니다. 그러나 다음을 포함하여 대부분의 프로젝트에서 사용하는 경향이 있는 몇 가지가 있습니다.

• @11ty/eleventy-plugin-rss RSS 피드를 갖고 싶다면 이 공식 플러그인이 피드를 생성하는 데 도움이 되는 몇 가지 필터를 제공합니다. 연결된 리포지토리에는 샘플 피드가 포함되어 있으며 일부 스타터에서도 사용할 수 있습니다.
• @11ty/eleventy-plugin-syntaxhighlight 코드 강조 표시를 위한 스크립트로 Prism을 로드하는 대신 이 플러그인을 사용하면 해당 처리를 Eleventy 빌드 프로세스의 일부로 적용할 수 있습니다. 이는 코드 블록이 미리 Prism 테마를 적용하기 위한 클래스를 포함하도록 변환되므로 원하는 Prism CSS 테마만 추가하면 됩니다.
• @11tyrocks/eleventy-plugin-social-images Eleventy 탐색 초기에 찾은 기능은 소셜 미디어 공유 이미지를 생성하는 기능이었습니다. 이로 인해 Puppeteer를 뒤에서 사용하여 스냅샷을 찍는 플러그인을 만들게 되었습니다. 플러그인에는 미리 빌드된 템플릿과 고유한 템플릿 파일을 정의하기 위한 구성 옵션이 함께 제공됩니다.

또한 탐색 및 이미지 처리를 포함하여 다른 일반적인 요구 사항을 해결하기 때문에 나머지 공식 Eleventy 플러그인에 익숙해지는 것이 좋습니다.

Eleventy가 프로젝트에 적합한지 결정하기

대부분의 정적 사이트와 마찬가지로 Eleventy는 일반적으로 동적으로 또는 주문형으로 제공할 필요가 없는 콘텐츠에 가장 적합합니다. 이것은 모든 사이트가 정적이어야 하거나 콘텐츠를 동적으로 만들 수 있는 방법이 없다는 말은 아닙니다. API에서 가져오기 또는 대화형 위젯 만들기와 같은 동적 콘텐츠를 활성화하기 위해 JavaScript를 계속 로드할 수 있습니다. 호스트가 웹훅 구축을 지원하고 일정에 따라 새로 고칠 부분이 있는 경우 IFTTT 또는 Zapier와 같은 서비스를 사용하여 사이트 재구축을 용이하게 할 수도 있습니다.

사용자 지정 데이터와 페이지 매김 덕분에 헤드리스 CMS 또는 기타 API의 외부 데이터를 쉽게 포함할 수 있다는 것을 알았습니다. 따라서 정적으로 제공되지만 콘텐츠를 가져오는 위치와 관리 방법에는 여전히 많은 유연성이 있습니다.

Eleventy에서 내가 가장 좋아하는 점은 _includes 및 _data 에 대해 이야기한 몇 가지 예상 디렉토리 외에 내 사이트를 구성하는 방법에 대한 많은 의견을 부과하지 않는다는 것입니다(그리고 이들의 명명 규칙도 업데이트할 수 있음). 이는 사이트를 마이그레이션하려고 하고 잠재적으로 일부 기존 파일 구조도 이동할 수 있는 경우에도 유용할 수 있습니다. 그러나 더 독단적인 아키텍처를 선호하는 경우 다른 옵션을 찾을 수 있습니다.

또한 여러 템플릿 언어와 필터, 단축 코드 및 레이아웃을 활용하여 주어진 프로젝트의 멘탈 모델에 맞게 Eleventy를 만드는 방법을 즐깁니다. 초보자는 또한 당신이 정말로 중요한 것인 콘텐츠에 집중할 수 있도록 도움을 줍니다. 그리고 순수한 정적 출력의 고성능도 큰 이점입니다.

빌드 프로세스에서 조금 더 필요한 경우 Webpack, Gulp 또는 Parcel과 같은 친숙한 도구를 추가할 수 있습니다. 이미 그러한 것들을 포함하고 있는 스타터를 찾을 수 있을 것입니다. Eleventy 빌드 프로세스에 이미 내재된 노드 스크립트를 활용할 수도 있습니다.

Eleventy는 많은 양의 페이지 생성을 처리할 수 있습니다. Google의 web.dev 및 Netlify의 마케팅 사이트와 같은 일부 크고 복잡한 사이트에 사용되었습니다. 나는 또한 이 개요에서 설명하는 다른 것들과 함께 이메일 및 웹 구성 요소 생성기와 같은 일부 비 전통적인 목적을 위해 Eleventy를 사용했습니다.

추가 리소스

이 가이드가 귀하의 관심을 최고조에 이르게 하고 Eleventy 사용을 시작할 준비가 되었기를 바랍니다! 여기에는 첫 번째 프로젝트를 만들 때 발견하기 약간 까다롭다고 생각했던 많은 포인트가 포함되어 있습니다. 2020년 4월 처음 Eleventy를 찾은 이후로 스타터, 플러그인, 사이드 프로젝트 및 코스 자료를 포함하여 20개가 넘는 Eleventy 프로젝트를 구축했습니다. 그 중 많은 것들이 튜토리얼과 팁이 있는 내 사이트 11ty.Rocks에서 찾을 수 있습니다. Eleventy는 제가 토론하는 것을 정말 좋아하는 것이므로 언제든지 Twitter에서 연락주세요!

다음은 Eleventy를 배우고 최대한 활용하기 위한 여정에 도움이 되는 추가 리소스입니다.

• Andy Bell은 "처음부터 110개 배우기"라는 매우 포괄적인 유료 과정을 제공합니다.
• "Eleventy 초보자 가이드"로 시작하는 Tatiana Mac의 튜토리얼 시리즈는 정적 사이트 생성기에 대한 이전 경험이 없다고 가정하는 철저한 설명을 제공합니다.
• Bryan Robinson은 무료 HTML 테마를 Eleventy 사이트로 변환하기 위한 YouTube 과정을 제공합니다.

마지막으로 Eleventy 커뮤니티는 작지만 활동적이라는 점을 말씀드리고 싶습니다! 정보를 찾는 데 어려움이 있는 경우 공식 @eleven_ty 계정으로 질문을 트윗할 수 있습니다. Eleventy의 제작자 Zach Leatherman이 빠르게 답변하거나 질문을 RT하여 다시 시작할 수 있도록 도와드립니다!