Eleventy(11ty)는 빠르고 가벼운 정적 사이트 생성기(SSG)로, 복잡한 빌드 시스템 없이 효율적인 웹사이트를 구축할 수 있습니다. 본 가이드에서는 Markdown 기반의 정적 사이트를 생성하고, Eleventy를 활용해 빠른 로딩 속도를 유지하는 방법을 소개합니다.
1. Eleventy(11ty)란?
Eleventy(11ty)는 JavaScript 기반의 정적사이트 생성기(SSG)로, 다음과 같은 특징을 가지고 있습니다.
✅ 빠른 빌드 속도: Webpack이나 Parcel 같은 번들러 없이도 정적 파일을 빠르게 생성합니다.
✅ Markdown 지원: 간결한 문법으로 콘텐츠를 작성할 수 있습니다.
✅ 템플릿 엔진 호환: Nunjucks, Liquid, Handlebars 등 다양한 템플릿 엔진을 사용할 수 있습니다.
✅ 가벼운 빌드 시스템: 불필요한 의존성이 적고, 가볍게 동작합니다.
2. Eleventy 설치 및 기본 설정
Eleventy를 설치하려면 Node.js와 npm이 필요합니다. 프로젝트 폴더를 만든 후 아래 명령어를 실행하세요.
mkdir my-eleventy-site && cd my-eleventy-site npm init -y npm install @11ty/eleventy --save-dev
기본 프로젝트 구조
/my-eleventy-site ├── _site/ # 빌드된 정적 파일 저장 폴더 ├── content/ # Markdown 콘텐츠 파일 저장 폴더 ├── .eleventy.js # Eleventy 설정 파일 ├── package.json # 프로젝트 설정 파일 ├── index.md # 메인 페이지 Markdown 파일 └── about.md # 추가 콘텐츠 Markdown 파일
3. Markdown 기반 정적 사이트 만들기
Eleventy는 기본적으로 Markdown 파일을 정적 HTML로 변환합니다. content 폴더를 만들고 index.md 파일을 생성하세요.
--- title: "Eleventy로 만든 첫 번째 페이지" layout: "base.njk" --- # Eleventy를 활용한 정적 사이트 구축 🚀 이 페이지는 Markdown을 사용하여 작성되었습니다.
템플릿 파일(_includes/base.njk) 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
<main>
{{ content | safe }}
</main>
</body>
</html>
4. Eleventy 실행 및 정적 사이트 빌드
아래 명령어를 실행하면 content 폴더의 Markdown 파일이 정적 HTML로 변환됩니다.
npx eleventy
빌드된 파일은 _site 폴더에 저장되며, 로컬 서버에서 확인하려면 다음 명령어를 실행하세요.
npx eleventy --serve
✅ Tip: npx eleventy --watch 옵션을 사용하면 파일 변경 시 자동으로 빌드됩니다.
5. 빠른 로딩 속도를 유지하는 최적화 전략
Eleventy는 기본적으로 빠르지만, 추가적인 최적화를 통해 더욱 성능을 향상시킬 수 있습니다.
1️⃣ CSS 및 JavaScript 최소화
CSS 및 JS 파일을 압축하여 로딩 속도를 개선할 수 있습니다.
npm install @11ty/eleventy-plugin-minify
eleventy.js 설정 파일에서 플러그인을 추가합니다.
const minify = require("@11ty/eleventy-plugin-minify");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(minify);
};
2️⃣ WebP 및 이미지 최적화
WebP 포맷을 활용하면 이미지 파일 크기를 줄여 성능을 개선할 수 있습니다.
npm install @11ty/eleventy-img
템플릿 파일에서 다음과 같이 활용합니다.
<img src="/images/sample.jpg" alt="샘플 이미지" loading="lazy">
✅ Tip: loading="lazy" 속성을 추가하면 스크롤 시 이미지가 로드되어 성능이 더욱 향상됩니다.
3️⃣ Netlify 또는 Vercel로 정적 사이트 배포
Eleventy는 정적사이트이므로 Netlify나 Vercel 같은 무료 호스팅 서비스를 활용하면 간편하게 배포할 수 있습니다.
Netlify 배포 명령어:
netlify deploy
Vercel 배포 명령어:
vercel
Eleventy(11ty)는 복잡한 빌드 시스템 없이도 빠르고 가벼운 정적사이트를 만들 수 있는 강력한 도구입니다. Markdown을 활용해 간단하게 콘텐츠를 추가하고, 이미지 최적화 및 CSS 최소화를 적용하면 더욱 빠른 웹사이트를 구축할 수 있습니다.
🚀 지금 Eleventy를 활용해 최적화된 정적 사이트를 만들어보세요!
