Eleventy (11ty) 호스팅

Eleventy(11ty)는 템플릿과 Markdown을 받아 일반 HTML을 _site/에 작성하며, 직접 추가하지 않는 한 클라이언트 프레임워크가 없습니다. 일반 파일 폴더는 호스팅하기 가장 쉽습니다. 빌드한 다음 npx lobsite를 실행하면 HTTPS가 적용된 *.lobsite.app 주소로 사이트가 공개됩니다. 위 상자에 _site/를 끌어다 놓을 수도 있습니다.

작동 방식

1. npx @11ty/eleventy(또는 npm run build)로 사이트를 빌드하세요. Eleventy가 _site/에 작성합니다.
2. 프로젝트에서 npx lobsite를 실행하세요. _site/를 찾아 배포합니다. 첫 배포는 계정이 필요 없으며 6시간 동안 유지됩니다.
3. 가져오기 링크로 무료 계정에 사이트를 유지하세요. 폴더가 lobsite.toml에 저장되므로 이후 배포는 같은 사이트로 갑니다.

Lobsite에서 중요한 Eleventy 설정

// eleventy.config.js
export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("img");
  eleventyConfig.addPassthroughCopy("css");
}

export const config = {
  dir: { input: "src", output: "_site" },
};

• 패스스루 복사는 이미지, 글꼴, CSS를 _site/로 보내는 방법입니다. 템플릿도 아니고 복사되지도 않는 파일은 배포되지 않으므로, 공개 사이트에 무언가 없다면 먼저 _site/에 있는지 확인하세요.
• **pathPrefix**는 /로 유지하세요. 사이트는 주소의 최상위에서 제공됩니다.
• 출력 폴더는 _site로 두어도 됩니다. 변경한다면 폴더를 한 번 전달하면(npx lobsite ./dist) lobsite.toml에 기억됩니다.

퍼머링크, 이미지, 오래된 파일

Eleventy는 about.md를 about/index.html로 작성하며 /about/에서 열립니다. .html로 끝나는 퍼머링크는 확장자 없이 열립니다. @11ty/eleventy-img로 처리된 이미지는 빌드 중에 작성되므로 다른 파일처럼 배포되며, 변경되지 않은 이미지는 다시 업로드되지 않습니다. 대부분의 생성기처럼 Eleventy는 빌드 전에 _site/를 비우지 않아, 이름을 바꾼 페이지의 이전 파일이 남습니다. 현재 페이지만 배포하려면 빌드 전에 _site/를 삭제하세요(많은 스타터가 build 스크립트에서 합니다).

Eleventy 호스트 비교

Netlify는 오랫동안 Eleventy 사이트의 기본 호스트였으며 Git에서 빌드합니다. Lobsite는 로컬이나 CI에서 빌드하고, 터미널이나 AI 에이전트에서 명령어 하나로, 구성 없이 결과를 공개하려는 경우에 적합합니다.

자주 묻는 질문

11ty와 Eleventy는 같은 건가요?

네. 11ty는 Eleventy의 줄임말이며 패키지는 @11ty/eleventy입니다. 이 페이지의 내용은 두 이름 모두에 적용됩니다.

배포된 Eleventy 사이트에 이미지가 없는 이유는 무엇인가요?

아마 _site/에 없을 것입니다. 폴더의 패스스루 복사를 추가하고(eleventyConfig.addPassthroughCopy("img")) 다시 빌드하여 배포하세요.

Eleventy의 서버리스 또는 엣지 렌더링이 Lobsite에서 작동하나요?

아니요. Lobsite는 _site/의 파일을 제공합니다. 요청마다 페이지를 렌더링하는 기능에는 함수를 실행하는 호스트가 필요합니다. 대부분의 Eleventy 사이트처럼 미리 빌드된 페이지는 모두 작동합니다.

Eleventy 사이트에 커스텀 404 페이지를 넣을 수 있나요?

네. permalink: 404.html로 템플릿을 만들면 Lobsite가 존재하지 않는 주소에 404 상태로 제공합니다.