2025-07-28 11ty 기초

정적 사이트 생성기 11ty로 이 사이트를 만들었다. 쓰면서 간단한 메모

설치

pnpm install @11ty/eleventy

실행

pnpm exec eleventy --serve # --serve 옵션은 개발 서버를 실행

이렇게 실행하면 폴더 내의 파일들이 _site 폴더에 빌드됨

front matter도 문서 내에서 가져다 쓸 수 있다.

---
layout: layout.html
title: 시험 제목
---

2025-07-28 11ty 기초

수학 수식 표현하기 #

나는 이 아카이브에 수학을 공부한 내용에 대해서도 정리하고 싶다. 그러려면 수학 수식들을 표현할 수 있어야 한다. 이를 위해 11th math라는 글을 참고했다.

수학 수식 표현은 11ty에서 사용하는 markdown-it를 이용할 수 있다. 나는 링크 자동 변환 등을 위해서 이를 이미 사용하고 있었다. 나같은 경우 원래 eleventy.config.js를 이렇게 설정해놨다.

export default function (eleventyConfig) {
  let options = {
    html: true,
    breaks: true,
    linkify: true,
  };

  eleventyConfig.setLibrary("md", markdownIt(options));
  // 이외의 다른 플러그인 설정들
}

markdown-it은 유명한 라이브러리기 때문에 수학 수식 표기를 위한 플러그인도 있다. 아주 좋고 유지보수도 잘되는 그런 건 사실 없는 거 같지만.. 아쉬운 대로 @mdit/plugin-katex라는 걸 설치한다. https://www.npmjs.com/package/@mdit/plugin-katex

pnpm add -D @mdit/plugin-katex

11ty의 마크다운 문서와 해당 플러그인 문서를 보면 대강 어떻게 쓰는지 감을 잡을 수 있다. output을 제대로 설정하지 않으면 변환 결과물이 2개 뜨는 문제가 있다. 따라서 output을 꼭 mathml로 설정해 줘야 한다.

eleventy.config.js 설정 파일을 다음과 같이 설정해주자.

import markdownIt from "markdown-it";
import { katex } from "@mdit/plugin-katex";

export default async function (eleventyConfig) {
  const options = {
    html: true,
    breaks: true,
    linkify: true,
  };

  eleventyConfig.setLibrary(
    "md",
    markdownIt(options).use(katex, { output: "mathml" })
  );
  // 다른 설정들...
}

이제 수학 수식 테스트 문장들에 가보면 수식들이 제대로 렌더링되는 걸 볼 수 있다. $$나 $로 감싸면 수식으로 동작한다고 한다.

참고한 글에서는 Note에서, 수학 관련 글꼴을 설정해 줘야 한다고 하는데 어쨌든 내 컴퓨터에선 잘 보이므로 나중에 문제가 생기면 수정하도록 하자. 해당 글에서 관련 링크를 잘 제공하고 있다.

11th markdown 문서 https://www.11ty.dev/docs/languages/markdown/

11ty Math https://bkardell.com/blog/11tyMath.html

katex 플러그인 문서 https://mdit-plugins.github.io/katex.html

TODO

quick tips 읽기

https://www.11ty.dev/docs/quicktips/