왜 바닐라로?
Jekyll, Hugo, Gatsby 등 좋은 정적 사이트 생성기가 많은데 굳이 바닐라 JS로 만든 이유:
- 배우기 싫어서 - Ruby(Jekyll)나 Go(Hugo) 환경 설정하기 귀찮음
- 커스터마이징 자유도 - 프레임워크 제약 없이 원하는 대로
- 단순함 - 빌드 과정 없이 그냥 HTML/CSS/JS만 푸시하면 끝
물론 장단점이 있음. 마크다운 파싱이나 라우팅을 직접 구현해야 해서 삽질이 불가피.
구조 설계
프로젝트 구조는 이렇게 잡음:
- index.html - 메인 페이지 (SPA)
- blog.js - 핵심 로직
- blog.css - 스타일
- posts/index.json - 게시물 목록
- posts/playground/ - Playground 카테고리
- posts/web/ - Web 카테고리
- .nojekyll - Jekyll 비활성화
핵심은 posts/index.json에서 게시물 목록을 관리하고, 각 게시물은 마크다운 형식의 .txt 파일로 저장하는 것.
마크다운 파싱 구현
별도 라이브러리 없이 정규식으로 간단하게 구현. markdownToHtml 함수에서 코드 블록, 헤더, 볼드, 이탤릭, 링크 등을 정규식으로 HTML 태그로 변환함.
완벽한 마크다운 파서는 아니지만, 블로그 글 쓰기엔 충분함.
Front Matter 파싱
각 게시물 파일 상단에 메타데이터를 YAML 형식으로 넣음. title, category, date 등의 정보를 --- 구분자 사이에 작성하고, parseMarkdown 함수에서 파싱해서 사용.
GitHub Pages에서 .md 파일 404 문제
여기서 삽질이 시작됨.
로컬에서는 잘 되는데, GitHub Pages에 배포하니까 .md 파일 요청이 전부 404.
시도 1: .nojekyll 파일 추가
GitHub Pages는 기본적으로 Jekyll로 빌드하는데, .nojekyll 파일을 루트에 추가하면 Jekyll 처리를 건너뜀.
결과: 실패 - 여전히 404시도 2: 캐시 문제?
브라우저 캐시 비우고 다시 시도.
결과: 실패 - 그대로 404시도 3: 확장자 변경 (.md → .txt)
결국 .md 확장자를 .txt로 변경.
결과: 성공!왜 이런 일이?
GitHub Pages는 .nojekyll이 있어도 .md 파일을 특별하게 처리하는 것 같음. 아마 내부적으로 마크다운 렌더링을 시도하다가 실패하는 듯.
.txt는 그냥 평범한 텍스트 파일이라 아무 처리 없이 그대로 서빙됨.
결론
- 바닐라 JS로 블로그 만들기는 가능하지만 삽질 각오해야 함
- GitHub Pages + 마크다운 = .txt 확장자 쓰자
- 프레임워크 쓰기 싫으면 이런 삽질은 감수해야...
근데 이 과정에서 fetch API, 정규식, GitHub Pages 동작 방식 등 배운 게 많아서 나쁘지 않았음.
댓글