5P by GN⁺ 10일전 | ★ favorite | 댓글 5개
  • Jekyll, Ghost, WordPress 없이 직접 블로그 제작한 사례임
  • 기본 요구 조건은 소유한 도메인 사용, 정적 사이트 생성, SEO 준수, 간편한 게시글 추가 등임
  • 핵심 구성은 template.htmlrender.py 스크립트, 마크다운 기반 글 작성만으로 모든 페이지를 자동 렌더링
  • markdown2 파이썬 라이브러리를 활용해 마크다운 → HTML 변환 및 페이지 생성을 자동화함
  • SEO현대 웹 표준을 준수하면서도 간단하게 콘텐츠를 추가할 수 있는 구조를 강조함

블로그 요구 조건

  • 기존 소유 도메인을 사용할 것
  • 현대적 웹 표준 및 SEO 친화성 유지
  • 글 추가가 매우 쉬울 것
  • 모든 페이지는 정적으로 생성될 것

구현 절차 요약

  • template.html 파일 작성 → 기본 HTML 레이아웃 구성
  • pip install markdown2 명령어로 마크다운 렌더링 도구 설치
  • O1에게 렌더링용 Python 스크립트(render.py) 요청
  • posts/ 폴더 안에 eng.md 형태로 포스트 작성
  • render.py 실행하여 HTML 변환 및 출력 폴더 생성

핵심 HTML 템플릿 (template.html)

  • HTML 구조는 심플하고 미니멀하며, {{ content }} 자리에 마크다운 렌더링 결과 삽입
  • CSS는 system-ui 기반 글꼴과 적응형 패딩, color-scheme 설정 등으로 가독성 확보

핵심 Python 렌더링 스크립트 (render.py)

  • markdown2를 활용하여 각 마크다운 포스트를 HTML로 변환
  • 변환 시 <img> 경로를 /posts/{post_code}/로 자동 대체
  • HTML 제목은 마크다운의 # 헤더에서 추출
  • index.htmlgreetings.md + 각 포스트의 제목 목록으로 구성
  • 결과물은 ./blog/ 폴더에 .html로 저장됨

저도 현재 제 블로그를 딱 위에처럼 운영하고 있습니다. 제 개인 요구사항을 만족하는 SSG를 만들어서 사용하고 있죠. 섬네일 이미지, 카테고리, 태그 기능을 활용하기 위해 개별 커스텀 기능을 넣어서 말이죠. 첨부하는 이미지는 자동으로 webp로 변환해서 참조하도록 하고 있고 덕분에 렌더링 속도가 매우 만족스럽습니다.

오 그런 커스텀 기능은 직접 코드를 작성하며 추가해 나가시나요? 저도 늘 diy 하려하다가도 기존에 사용하던 ssg 블로그 프레임워크들이 제공하는 확장, 플러그인 기능들 때문에 망설여 지더라구요.

욕심을 덜어내고 욕심만 덜어내면 나머진 크게 어렵지 않습니다. ssg도 AI에게 요청하면 코드 다 작성해주고, 기능도 추가해달라고 하면 사실 다 추가해줍니다 ㅎㅎ

폰트만 이쁜 걸 고르면 볼 만 하더라구요.

Hacker News 의견
  • 블로그를 시작할 때 SSG를 사용했지만, 결국 Wordpress로 전환하여 더 자유로워졌음

    • 글을 쓰는 데 방해가 되는 도구는 피하는 것이 중요함
    • 글쓰기에 집중하기 위해 미루는 것을 피해야 함
  • 블로그로서의 자격을 갖추기 위해 필요한 두 가지 요소

    • 게시물을 날짜 순으로 정렬하고 날짜를 표시해야 함
    • RSS 피드가 필요함
  • 독립적인 웹사이트에 대한 애정

    • 25년 전 ASP로 시작한 웹사이트가 지금은 Common Lisp로 운영됨
    • 최소 기능의 웹사이트로 시작하여 점차 기능을 추가함
    • 새로운 아이디어는 항상 유혹적이지만, 프로젝트가 통제 불능 상태로 커지지 않도록 주의함
  • 브라우저에서 텍스트/마크다운과 텍스트/제미니에 대한 네이티브 지원을 원함

    • 다른 형식 지원은 출판 장벽을 낮추고 사용자에게 제어권을 돌려줌
  • "Minimum viable blog" 문자열이 포스트 제목으로 대체되는 버그에 대한 지적

  • 단순한 HTML 페이지로 블로그를 운영했지만, 이제는 Astro를 사용하여 더 발전된 사이트를 운영함

    • Astro는 콘텐츠 중심 사이트에 최적화된 플랫폼임
  • Bun JS와 HTML을 JS 문자열로 사용하는 실험

    • IntelliJ IDE가 HTML을 감지하고 포맷팅 및 하이라이팅을 지원함
  • 15년간 최소한의 블로그를 실험하며 배운 몇 가지 트릭

    • JSX가 서버 사이드 문자열 빌더로 유용함
    • GH Pages가 Jekyll보다 쉽게 사용할 수 있음
    • highlight.js가 코드 하이라이팅에 여전히 유용함
  • Hugo/Zola와 Cloudflare Pages를 사용한 표준 정적 블로깅 프레임워크의 용이함

    • Hugo Blog Awesome 테마 사용
    • 페이지 크기를 512kb 이하로 유지함
  • 오래된 블로그를 부활시키는 과정에서 Hexo의 불편함을 경험함

    • 테마가 제대로 작동하지 않아 자체 테마를 개발할까 고민 중임
    • 복잡성이 증가할 수 있지만, 문제를 해결하려고 노력 중임