정적사이트 생성기가 여러개다보니 이것저것 시도해봅니다. 그중에 이번엔 11ty라는 정적사이트 생성기에 대해 알아보겠습니다. 사용법이 매우 쉽습니다.
[ 목차 ]
1. 설치
프로젝트로 쓸 폴더를 생성 후 11ty를 깔아줍니다. (기본적으로 Node는 깔려있어야 합니다.)
npm init -y
npm install @11ty/eleventy --save-dev
2. 샘플 파일 생성
2가지 파일을 생성해야합니다. 리눅스라면 아래의 명령어로 생성이 가능한데, 윈도우 환경이면 직접 두 파일을 만듭니다.
# index.html
echo '<!doctype html><title>Page title</title><p>Hi</p>' > index.html#README.md
echo '# Page header' > README.md
3. 서버 실행
npx @11ty/eleventy --serve
or
npx eleventy --serve이렇게만 작성하고 실행해도 index.html을 확인할 수 있습니다. 다른 방법으로는 기존의 방식대로 package.json에 script를 작성해서 사용해도 됩니다.
{
"scripts":{
"dev":"eleventy --serve",
"build":"eleventy"
},
"devDependencies": {
"@11ty/eleventy": "^2.0.1"
}
}
4. post 작성
기초적인 사용법을 알아볼 겸 이제부터 프로젝트에 조금씩 살을 붙이도록 하겠습니다. 오늘 구성할 프로젝트 구조는 아래와 같습니다.
우선 샘플 포스트를 아래와 같이 작성합니다.
# post1.md
---
title: Post Title
---
asdfxvzxcv
# post2.md
---
title: My second post
---
zxcvgdfg2343
5. 레이아웃 파일 생성
/_includes/layout.html파일을 생성합니다. 이 레이아웃으로 모든 md파일의 title과 content를 표시할 예정입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h1>{{ title | default: "My Blog" }}</h1>
</header>
<main>
{{ content }}
</main>
</body>
</html>
그리고 /posts/posts.json파일을 아래와 같이 작성합니다.
{
"layout": "layout.html",
"tags": "post"
}layout은 layout.html파일을 이용하겠다는 뜻이고, post라는 태그가 들어있는 파일들의 리스트를 사용하겠다는 의미입니다.
또한 index.html파일은 layout을 이용해 표시할 예정이므로 아무 내용 없이 layout만 지정합니다.
<!-- index.html -->
---
layout: layout.html
---
이렇게 작성하고 아래의 url에서 잘 표시되는지 확인해 봅시다.
[http://localhost:8080/posts/post1/]
[http://localhost:8080/posts/post2/]
레이아웃이 잘 적용되었죠?
6. 포스트 리스트
마지막으로 메인화면에 포스트 목록을 보여주도록 하겠습니다. 이때 태그로 지정했던 post를 이용해서 리스트를 가져옵니다. index.html을 아래와 같이 수정해줍니다.
<!-- index.html -->
---
layout: layout.html
---
{% for post in collections.post %}
<h2><a href="{{ post.url }}">{{ post.data.title}}</a></h2>
<p>{{ post.content }}</p>
{% endfor %}
한번 사용해본 바로는, 이 기능만 있어도 될만큼 엄청 쉽네요. 나머진 CSS로 꾸미기만 해도 될 것 같습니다. 엄청 빠르고 쉬운 11ty. 한번 사용해볼만 한 것 같습니다.
'Programming > Javascript' 카테고리의 다른 글
| Fetch 함수로 파일 다운로드 받기 (4) | 2024.11.12 |
|---|---|
| 자바스크립트 정적사이트 생성기 11ty (eleventy 일레븐티) 시작하기2 (0) | 2023.07.24 |
| 정적 사이트 생성기 (SSG, Static Site Generator) 로 나만의 블로그를 만들어보자 (0) | 2023.07.20 |
| 자바스크립트 slice, splice ,split의 활용과 차이점 (0) | 2023.06.29 |
| Nuxt 프로젝트 Netlify에 배포하기 / 외부 도메인 적용하기 (0) | 2023.06.23 |
