웹사이트 검색

Eleventy 정적 사이트 생성기에 대한 간략한 둘러보기


정적 사이트 생성기는 현재 매우 최상의 모드이며 요즘 많은 웹 프로젝트에서 JAMStack이 실행 가능한 대안이 되면서 놀라운 일이 아닙니다!

JAMStack 여부에 관계없이 SSG(정적 사이트 생성기)는 기존 CMS에 비해 몇 가지 중요한 이점을 제공하며 SSG의 경우 선택할 수 있는 옵션이 많습니다. 지킬, 휴고, 개츠비, Next.jst, 새퍼,…

나는 최근 Spiral11이라는 내 프로젝트에 가장 적합한 정적 사이트 생성기 옵션이 무엇인지 알아보기 위해 쇼핑을 하고 있었습니다. 이미지 최적화와 같은 현대적인 장점이 포함되어 있기 때문에 처음에는 Gatsby에 기대고 있었지만 Eleventy를 더 자세히 살펴보고 사랑에 빠졌습니다.

11ty는 사용하기 쉽고 방해가 되지 않으며 입력한 내용을 정확하게 표시하므로 놀라거나 숨겨진 코드가 부풀어 오르는 일이 없습니다. 가장 기본적으로 11ty는 작업 디렉토리에서 찾은 파일을 정적 HTML 파일로 컴파일합니다. 또한 JavaScript로 작성되었으므로 프로젝트에서 사용할 수 있는 패키지 측면에서 전체 npm에 액세스할 수 있습니다.

둘러보고 어떻게 작동하는지 봅시다…

Eleventy 사이트 설정

npm 또는 Yarn을 사용하여 시스템에 전역적으로 Eleventy를 설치하여 시작합니다.

# with npm
$ npm install -g @11ty/eleventy

# with Yarn
$ yarn global add @11ty/eleventy

이제 유효한 템플릿 파일이 포함된 모든 디렉터리에서 eleventy 명령을 실행할 수 있습니다.

예를 들어 best-site-ever라는 디렉토리에 index.md 파일이 있다고 가정해 보겠습니다.

## Chomp Chomp **Chomp** 🐊🐊🐊

이제 해당 디렉토리에서 eleventy를 실행할 수 있습니다. Eleventy가 다음을 포함하는 index.html 파일이 있는 _site 디렉토리를 생성하는 것을 볼 수 있습니다 우리가 기대하는 것:

<h2>Chomp Chomp <strong>Chomp</strong> 🐊🐊🐊</h2>

템플릿 언어에 대해 말하면 많은 옵션이 있습니다. Markdown, Nunjucks, Liquid, Mustache 등을 사용할 수 있습니다. 혼합하고 일치시킬 수 있으므로 일부 파일은 Liquid로 작성하고 일부는 Nunjucks 및 Eleventy에서 모든 것을 잘 처리할 수 있습니다.

일레븐티 명령 옵션

eleventy 명령은 몇 가지 유용한 플래그도 허용합니다. 예를 들어:

  • –watch: 프로젝트 파일이 변경되면 출력 파일을 다시 작성합니다.
  • –serve: 로컬 웹 서버를 통해 출력된 사이트를 제공하고 변경 사항을 확인합니다.
  • –dryrun: 실제로 파일을 출력하지 않고 처리를 테스트합니다.
  • –출력: 다른 출력 위치를 지정합니다.

즉, 로컬에서 작업할 때 다음 명령을 사용하여 변경 사항을 제공하고 다시 빌드해야 하는 경우가 매우 많습니다.

$ eleventy --serve

디렉토리 구조

Eleventy를 사용하면 좋아하는 템플릿 언어를 자유롭게 선택할 수 있을 뿐만 아니라 자신만의 디렉토리 구조를 선택할 수도 있습니다.

프로젝트에 또 다른 마크다운 파일이 있지만 이번에는 두 개의 중첩된 하위 디렉터리에 있다고 가정해 보겠습니다.

One day *I will write* my 1st blog post!

이제 eleventy를 실행하면 _site의 출력은 다음과 같습니다.

📁 _site/
  index.html
  📁 one/
    📁 two/
      📁 blog-post/
        index.html

따라서 디렉토리 구조가 유지되고 파일 이름이 slug/URI로 사용되며 Eleventy가 HTML 출력을 포함하는 index.html 파일이 포함된 각 출력 템플릿에 대한 디렉토리를 생성한다는 것을 알 수 있습니다.

최종 출력에서 다르게 반영되는 디렉터리에 파일을 구성하려면 어떻게 해야 할까요? 쉽게, 상단의 머리말 섹션 내부에 있는 특정 템플릿에 대한 퍼머링크를 지정할 수 있습니다.

---
permalink: '/blog-post/'
---

One day *I will write* my 1st blog post!

eleventy를 다시 실행하면 이제 blog-post_site의 루트 수준에 표시되는 것을 볼 수 있습니다. 이렇게 하면 퍼머링크를 지정하면 완전한 유연성을 얻을 수 있습니다.

서문

머리말에 대해 말하자면, 모든 종류의 메타데이터를 여기에 넣을 수 있으며, 그러면 레이아웃에서 사용할 수 있습니다(자세한 내용은 나중에 설명). 예를 들어 제목, 메타 설명/발췌, 게시물의 태그와 같은 항목을 지정하고 대부분의 키는 원하는 이름으로 지정할 수 있습니다.

설명할 예는 다음과 같습니다.

---
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
permalink: '/blog-post/'
emotion: happy
tags:
  - blog
  - getting-started
---

One day *I will write* my 1st blog post!

컬렉션

여기서 주제에 대해 너무 깊게 다루지는 않겠습니다. 자세한 내용은 문서를 읽어 보시기 바랍니다. 하지만 Eleventy는 머리말에 제공한 태그를 사용하여 컬렉션을 채웁니다. 예를 들어 다른 템플릿에서 반복할 수 있습니다. , 카테고리 페이지.

기본적으로 모든 단일 게시물을 포함하는 all이라는 특별 컬렉션도 있습니다. all 컬렉션을 사용하면 원하지 않는 게시물/페이지를 포함하는 사이트맵과 같은 결과를 얻을 수 있으므로 컬렉션에 포함된 게시물 또는 페이지를 선택 해제하는 쉬운 방법이 있습니다.

---
eleventyExcludeFromCollections: true
---

레이아웃

지금까지 우리가 만든 것은 우리가 만든 마크다운 파일에서 HTML을 출력하는 것뿐이었습니다. 대부분의 경우 이러한 마크다운 파일은 상용구 HTML, 헤더, 탐색 모음, 사이드바 및 바닥글과 같은 것을 제공하기 위해 레이아웃으로 래핑되어야 합니다.

기본적으로 레이아웃 템플릿은 _includes 디렉토리에 있어야 합니다.

Nunjucks 구문을 사용하여 몇 가지 샘플 레이아웃을 만들어 보겠습니다. 하나는 HTML 상용구가 포함된 기본 레이아웃이고 다른 하나는 블로그 레이아웃입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }} | My Site</title>
</head>
<body>
   {{ content | safe }}
</body>
</html>
---
layout: default
---

<h1>{{ title }}</h1>
<div>
  Published on {{ date }}
</div>

<article>
  {{ content | safe }}
</article>

보시다시피 레이아웃은 다른 레이아웃을 호출할 수 있으며 레이아웃은 일반 템플릿 파일의 머리말에 있는 데이터에 액세스할 수 있습니다.

콘텐츠 템플릿의 머리말에 레이아웃을 지정하여 레이아웃을 사용할 수 있습니다.

---
layout: blog.njk
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
---

One day *I will write* my 1st blog post!

일레븐티 구성

지금까지 구성 파일을 건드리지 않고 모든 작업을 수행했으며 Eleventy 사용의 단순성을 보여줍니다. 그러나 웹 사이트가 복잡해짐에 따라 일부 구성 옵션을 설정할 수 있기를 원할 것입니다. 프로젝트 루트에 있는 .eleventy.js 파일에서 이를 수행할 수 있습니다.

다음은 정적 자산을 출력 디렉터리에 복사하고 다른 출력 디렉터리 이름(public)을 지정하는 샘플 구성 파일입니다.

module.exports = eleventyConfig => {
  // Copy our static assets to the output folder
  eleventyConfig.addPassthroughCopy('css');
  eleventyConfig.addPassthroughCopy('js');
  eleventyConfig.addPassthroughCopy('images');

  // Returning something from the configuration function is optional
  return {
    dir: {
      output: 'public'
    }
  };
};

구성 파일에서 HTML 출력 축소, 플러그인 사용 및 단축 코드 구성과 같은 모든 종류의 작업을 수행할 수 있습니다. 다시 한 번 문서를 살펴보고 구성할 수 있는 항목에 대해 자세히 알아보세요. 그러나 처음에 압도되기 시작하면 기본적으로 Eleventy는 구성 파일이 필요하지 않으며 구성 파일 없이도 대부분의 어려운 작업을 수행할 수 있다는 점을 기억하십시오.

스타터 사용

지금까지 우리는 사이트가 어떻게 작동하는지 보기 위해 처음부터 사이트를 만들어 왔지만 종종 원하는 방식으로 이미 구성 및/또는 스타일이 지정된 좋은 기반으로 시작하고 싶을 것입니다. 여기에서 110개의 스타터 목록을 찾아볼 수 있습니다.

저는 개인적으로 Eleventy 블로그 스타터가 좋은 시작점이 될 것을 정말 좋아합니다.

더 알아보기

✨✨ 간략한 소개는 여기까지지만 다음 리소스를 확인하여 더 많은 정보를 얻으시기 바랍니다.

  • 공식 문서
  • 일레븐티의 창시자 잭 레더맨