Hello, World: 이 사이트가 동작하는 방식

로그에 오신 것을 환영한다. 이 첫 글은 문서 역할도 겸하는데, 지금 읽고 있는 내용은 전부 이 사이트의 git 저장소에 있는 .mdx 파일에서 렌더링된 것이다.

기술 스택

이 사이트 내부 구조는 의도적으로 평범하게 만들었다:

Next.js 14 (App Router) — 소개 페이지, 이 블로그, ~/tools는 모두 그냥 라우트일 뿐이다
MDX — 포스트는 content/posts/에 있는 Markdown 파일이며, gray-matter로 파싱한다
shiki — 커스텀 터미널-그린 테마로 코드 하이라이팅
Vercel — git push → 약 30초면 배포 완료

CMS도 데이터베이스도 없다. 포스트를 발행하는 과정은 이렇다:

publish.sh

git add content/posts/new-post.mdx
git commit -m "Post: something worth reading"
git push   # 나머지는 Vercel이 알아서 한다

왜 MDX인가

평범한 Markdown만으로도 글쓰기의 95%는 해결되지만, MDX를 쓰면 필요할 때 진짜 React 컴포넌트를 글에 넣을 수 있다 — 인터랙티브 데모, 커스텀 콜아웃, 어쩌면 홈페이지에 있는 픽셀 펫까지도.

example.tsx

export function Greeting({ name }: { name: string }) {
  const hour = new Date().getHours()
  const salute = hour < 7 ? 'zzz...' : `hello, ${name}`
  return <span className="glow">{salute}</span>
}

이 블로그의 원칙: 다이어그램이나 데모가 글보다 더 잘 설명한다면, 그 데모를 글 안에 그대로 넣는다.

다음 계획

~/tools는 앞으로 여러 작은 유틸리티들을 모아가는 공간이 될 예정이다 — 첫 번째로는 학술 논문 수정 스킬
RSS 피드, 태그 필터, 어쩌면 검색까지 — 포스트가 충분히 쌓여서 필요해지면

여기까지다. exit 0.