피드로 돌아가기
How to Add Comments to an Eleventy Site (with a Custom Shortcode)
Dev.toDev.to
Frontend

Custom Shortcode 기반 15KB 미만 경량 댓글 시스템 구축

How to Add Comments to an Eleventy Site (with a Custom Shortcode)

Yoni Ryabinski2026년 4월 14일2분beginner

AI 요약

Context

정적 사이트 생성기인 Eleventy의 최소 기능 지향 설계로 인한 동적 기능 구현의 부재. 외부 서비스 연동 시 발생하는 설정 복잡도와 템플릿 중복 코드 발생 가능성 해결 필요.

Technical Solution

  • Hosted Widget 방식 채택을 통한 서버리스 댓글 인프라 구축
  • .eleventy.js 내 Custom Shortcode 정의를 통한 템플릿 추상화 및 코드 재사용성 확보
  • dotenv 라이브러리를 활용한 API Key의 환경 변수 분리 및 보안 강화
  • Front-matter 기반의 Conditional Rendering 로직을 통한 포스트별 댓글 활성화 제어
  • CSS Variable 기반의 테마 시스템 적용으로 외부 위젯의 UI 일관성 유지
  • defer 속성을 적용한 외부 스크립트 로딩으로 메인 스레드 차단 방지

실천 포인트

1. 민감한 API Key는 반드시 .env 파일로 관리하고 빌드 타임에 주입할 것

2. 반복되는 외부 서비스 삽입부는 Shortcode나 Component로 추상화하여 유지보수 포인트를 단일화할 것

3. 외부 스크립트 도입 시 gzipped 크기와 로딩 전략(defer/async)을 검토하여 LCP 지표 하락을 방지할 것

태그

#Static Site Generation#Custom Shortcode#Eleventy#Frontend Performance#Hosted Widget
원문 읽기