JBEE.io 블로그 마이그레이션 및 구축 후기 (Gatsby)
Source
Evernote/Technote scraps/블로그를 만들며 고려한 것들 (JBEE.io) JBEE.io.md
Summary
본문은 JBEE.io 블로그를 Gatsby 기반으로 마이그레이션하며 고려한 기술적, 디자인적 결정 사항을 정리한 글입니다. 주요 내용은 다음과 같습니다:
- 기술 스택: React 기반 정적 사이트 생성기인 Gatsby를 선택했으며, 자체 제작한
gatsby-starter-bee템플릿을 사용했습니다. 배포는 Netlify를 통해 진행하여 Preview 기능과 DNS 설정 등의 편의성을 활용했습니다. - UI/UX: 기존 UI를 탈피하여 단순함을 지향했습니다. 카테고리 탐색을 위해 스크롤 시 고정되는 ‘띠’ 형태의 네비게이션을 구현했으며,
/about페이지를 통해 이력 정보를 통합 관리합니다. - 가독성 및 스타일링: 본문은 Noto Sans, 제목은 Catamaran, 코드 블록은 Fira Code 폰트를 적용했습니다. CSS를 통해 텍스트 렌더링 최적화(
text-rendering: optimizelegibility등)를 수행하고, 개발자 친화적인 GitHub 스타일의 Markdown 스타일링을 적용했습니다. - 기능: 다크 모드(Dark Mode)를 지원하며, 테마 전환 버튼을 제공합니다.
Key Points
- 프레임워크: Gatsby (React 기반 정적 사이트 생성기)
- 템플릿: gatsby-starter-bee (저자自作)
- 배포: Netlify (Preview, DNS 설정 등 부가 기능 활용)
- UI: 카테고리 띠(Sticky), About 페이지 통합
- 폰트: Noto Sans(본문), Catamaran(제목), Fira Code(코드)
- 스타일: GitHub 스타일 Markdown, CSS 텍스트 렌더링 최적화
- 기능: 다크 모드 지원