초보자를 위한 Eleventy 개발 환경 설정과 VS Code 빌드 꿀팁

웹사이트를 쉽고 빠르게 만드는 정적 사이트 생성기, Eleventy! 복잡한 코딩이나 설치 과정 없이, 누구나 깔끔한 개인·기업 웹사이트를 만들 수 있습니다. 오늘은 Eleventy 개발 환경을 VS Code로 뚝딱 세팅하고, 손쉽게 빌드까지 해보는 방법을 단계별로 안내합니다. 따라오다 보면 어느새 자기만의 웹사이트가 탄생해 있을 거예요!

Node.js 설치부터 완전 기초 시작!

모든 Eleventy 작업의 출발점은 Node.js 설치입니다. Node.js는 자바스크립트를 내 컴퓨터에서 실행할 수 있게 해주는 프로그램이에요.

VS Code를 실행하고 터미널을 열어줍니다. (메뉴 > 터미널 > 새 터미널, 또는 Ctrl + 백틱)
아래 명령어를 입력해 Node.js 버전을 확인하세요.

node --version

버전 18 이상이면 바로 다음 단계로! 버전이 없거나 낮다면 Node.js 공식 사이트에서 LTS 버전을 다운받아 설치하면 됩니다. 설치 후, 다시 버전을 체크해 확실하게 준비하세요.

프로젝트 폴더 만들고, 내 첫 페이지 작성!

웹사이트의 시작은 나만의 폴더 생성에서 시작됩니다.

원하는 위치에 새 폴더 만들기 (예: my-eleventy-site)
VS Code에서 '폴더 열기'로 방금 폴더를 불러와 주세요.
Explorer에서 새 파일 만들기를 눌러서 index.md 파일을 생성합니다.
아래와 같은 내용을 파일에 작성해 보세요.

---
title: "나의 첫 Eleventy 페이지"
---
# {{ title }}

안녕하세요! Eleventy의 세계에 오신 것을 환영합니다.

여기서 ---로 둘러싸인 부분은 Front Matter라고 하고, {{ title }}는 템플릿 문법이에요. 파일만 저장해도 준비 끝!

npm 설정과 Eleventy 설치, 초간단 빌드 스크립트 준비

복잡하게 명령어를 외울 필요 없이, 한 번의 설정으로 빌드를 쉽게 만들 수 있습니다.

터미널에서 패키지 관리 파일 생성:
```
npm init -y
```
Eleventy 설치:
```
npm install @11ty/eleventy --save-dev
```
node_modules와 package-lock.json 파일이 생기니 놀라지 마세요.
package.json을 열어 scripts에 아래 코드처럼 빌드 명령어를 추가합니다:
```
"scripts": {
  "start": "eleventy --serve",
  "build": "eleventy"
}
```
이제부터는 npm start만 입력하면 개발 서버가 자동으로 켜집니다!

Eleventy 빌드와 개발 서버 실행, 실시간 미리보기까지

모든 준비가 끝났다면, 이제 멋진 웹사이트를 눈으로 직접 확인할 시간입니다.

터미널에서 아래 명령어를 입력하세요:
```
npm start
```
잠시 후, 터미널에 아래와 같이 표시됩니다:
```
[11ty] Server at http://localhost:8080/
```
브라우저에서 http://localhost:8080을 입력하면, 조금 전 작성했던 페이지가 예쁘게 보입니다.

가장 편리한 점은? VS Code에서 파일을 수정하고 저장하면 웹페이지가 순식간에 자동으로 갱신된다는 사실! 개발이 끝났다면 터미널에서 Ctrl + C로 서버를 종료할 수 있습니다.

작업 흐름 한눈에 보기, Eleventy 프로젝트 루틴 정리

Eleventy로 더 쉽고 빠른 개발을 하고 싶다면 아래의 루틴만 기억하세요!

VS Code로 프로젝트 폴더 열기
터미널 열기 (Ctrl + 백틱)
npm start로 개발 서버 실행
파일 수정 후 브라우저에서 즉시 확인
작업 종료 시 Ctrl + C로 서버 종료

진짜 초보자도 어렵지 않게 따라할 수 있는 방법! 이제 직접 Eleventy로 나만의 특별한 웹사이트를 만들어보세요.

마무리: Eleventy 입문자의 실전 팁

Eleventy는 정말 직관적이고, 복잡한 설정 없이도 빠른 결과물을 보여줍니다. 한 번만 개발 환경을 세팅해두면, 추후에는 텍스트 파일만 추가하거나 수정해도 깔끔하게 웹페이지 완성! 더 나아가고 싶다면 공식 문서와 커뮤니티, 관련 영상도 참고해 보세요. 자신만의 멋진 웹사이트, 오늘 바로 시작해 보시길!

매번 명령어 외우는 수고도 크게 줄고, 실시간 미리보기로 효율까지 챙기는 Eleventy! 여러분만의 창의적인 작품이 웹에 멋지게 빛나길 응원합니다.