Eleventy 설정하기

작성자: Mike Neumegen

Eleventy용 Git 기반 CMS인 CloudCannon에서 제공하는 초보자용 Eleventy 자습서에 오신 것을 환영합니다.

이 시리즈에서는 프레임워크 설치 방법 학습, 레이아웃, 페이지 및 블로그 게시물 작성, 데이터 파일 사용 소개부터 Eleventy의 기본 사항을 살펴보겠습니다. 처음부터 모든 것을 구축하고 진행하면서 Eleventy 개념을 설명하므로 사전 Eleventy 지식이 필요하지 않습니다. 이 튜토리얼을 마치면 자신만의 Eleventy 웹사이트를 구축할 수 있습니다.

시작하자!

일레븐티란?

Eleventy는 정적 사이트 생성기입니다. 콘텐츠 Markdown 파일, 레이아웃, 이미지 및 CSS와 같은 소스 파일의 디렉토리를 가져와 완전히 정적인 웹 사이트를 구축하는 소프트웨어입니다.

일레븐티는 지역사회에서 사랑받고 있습니다. 이전 제품인 Jekyll 및 Hugo의 많은 개념을 가져와 이를 다듬고 간소화하고 개선합니다. Eleventy는 JavaScript로 작성되었지만 특정 JavaScript 프레임워크에 연결되어 있지 않습니다. 실제로 Jekyll 및 Hugo와 마찬가지로 JavaScript는 전적으로 선택 사항입니다.

EsLint , Foursquare , Web.dev , V8.dev 등 Eleventy를 사용하는 유명 웹사이트에 대해 들어보셨을 것입니다.

일레븐티 설치

JavaScript 프레임워크로서 npm 을 사용하여 Eleventy를 설치할 수 있습니다. 먼저 node 및 npm이 설치되어 있는지 확인합니다. 터미널을 열고 다음을 실행합니다.

    node -v
    npm -v

둘 다 버전을 반환하고 노드가 버전 8.0.0 이상인 경우 계속 진행할 수 있습니다. 그렇지 않은 경우 Node.js/npm installation instructions으로 이동하십시오.

Eleventy 사이트 설정

터미널에서 Eleventy 사이트가 위치할 디렉터리를 만듭니다.

    mkdir my-first-11ty-site
    cd my-first-11ty-site

다음으로 package.json를 추가하여 사이트에 대한 종속성을 포함해야 합니다. 다행스럽게도 npm은 우리를 위해 이것을 할 수 있습니다:

    npm init -y

이제 Eleventy를 설치하고 이를 package.json에 개발 종속성으로 추가할 수 있습니다.

    npm install --save-dev @11ty/eleventy

모두 계획대로 진행되었는지 확인합니다.

    npx @11ty/eleventy --version

이 명령을 실행하면 설치된 Eleventy의 버전 번호가 출력됩니다. 이 명령에 오류가 있으면 Eleventy documentation을 참조하거나 11ty Discord에서 커뮤니티의 도움을 받으십시오.

Eleventy 사이트의 디렉토리 구조는 완전히 구성 가능합니다. 프레임워크에 대한 자신감이 생기면 자신의 취향에 맞게 구조를 조정할 수 있습니다.

이 자습서에서는 아래에서 설명할 기본 디렉터리 구조를 사용합니다. 이 시리즈를 진행하는 동안 이러한 디렉터리와 파일을 만들 것이므로 이 단계에서 이해할 필요는 없습니다.

.eleventy.js — 사이트에 대한 Eleventy 구성이 여기에 있습니다.

_includes - 페이지 레이아웃 요소를 포함합니다.

_data - 사이트 전체에서 액세스할 수 있는 .json 또는 .js 파일(빌드 시 데이터를 가져올 수 있음)을 저장할 위치입니다.

_site — 구축된 웹 사이트의 출력 디렉토리입니다.

무엇 향후 계획?

다음 강의에서는 Eleventy 레이아웃의 기초를 배웁니다.