Typecho에서 Astro로 이전하기
예전엔 동적 블로그를 쓰다 보니 서버 요금 내는 걸 깜빡할까 봐, 아니면 프로그램 업그레이드하다 문제 생길까 봐 늘 걱정이었어요. 정적 블로그를 접하고 나서는 이게 정말 이상적인 해결책이라는 생각이 들었죠. Hugo, Hexo, Astro를 두고두고 비교하다가 결국 Astro를 골랐어요.
정적 블로그의 장점
- 무료 호스팅 - 도메인만 빼면, 대형 플랫폼들이 개인 개발자한테 무료 호스팅을 제공해 줘요.
- 유지보수 제로 - 글은 전부 내 컴퓨터에 있고, 호스팅 플랫폼이 망하지 않는 한 블로그는 영원히 돌아가요.
- 사전 렌더링 - 정적 블로그는 배포 전에 이미 순수 HTML/CSS/JS 파일을 만들어 두고, 백엔드도 없어요.
- CDN 최적화 - 전부 정적 파일이라 전 세계 엣지 노드로 배포되면 사용자 입장에선 밀리초 단위로 로딩돼요.
왜 Astro를 골랐나
- 정적 우선 - 순수 HTML 파일을 생성하고, 데이터베이스도 서버도 필요 없어요.
- 뛰어난 성능 - 기본이 자바스크립트 제로라 로딩 속도가 정말 빨라요.
- 높은 유연성 - Markdown, MDX, 여러 프레임워크를 섞어 쓸 수 있어요.
- 활발한 생태계 - 커뮤니티가 활발하고 문서도 잘 갖춰져 있고 플러그인도 풍부해요.
Astro에 맞춘 Sintu 단일 컬럼 테마
이 Astro 단일 컬럼 템플릿 테마는 제가 직접 디자인하고 만든 건데, 이번에 Hermes로 Typecho에서 Astro로 옮겼어요. 이전하면서 기능도 꽤 업그레이드했고, 코드는 예전보다 3분의 1이나 줄었답니다. 겸사겸사 느낀 건데, AI가 보편화되면서 예전엔 복잡했던 일이 훨씬 간단해졌어요. 개발 속도는 거의 신속 그 자체고 코드 품질은 완벽에 가까워서, 덕분에 저도 천재 프로그래머에 한없이 가까워진 기분이에요😂
기능 하이라이트
- 성능 만점 - 밀리초 단위 로딩, Google Lighthouse 모바일과 데스크톱 성능 모두 100점 만점.
- 다크 모드 - 로고 옆에 다크 모드 토글을 추가했어요.
- 썸네일 hover 확대 - 확대뿐 아니라 이미지를 클릭하면 글 페이지로 이동해요.
- 모바일에서는 미리보기 이미지 로딩 안 함 - 화면 크기별로 다른 리소스를 불러와 트래픽을 아껴요.
- 알리윤 OSS 이미지 처리 - 이미지는 OSS로 처리하고, HTML 렌더링 후에 이미지에 파라미터를 붙여 트래픽을 절약해요.
- 성능 최적화 - CSS는 Vite로 번들링해 합치고, 이미지는 지연 로딩해요.
- 반응형 디자인 - 데스크톱과 모바일에 완벽하게 맞춰지고, 통일된 그리드 시스템을 써요.
- 댓글창 - Twikoo 공식 방식으로 댓글창을 설치했어요.
글 발행 방식
- 로컬에서 Markdown 글을 작성해요.
- Hermes Agent에게 메시지를 보내 GitHub 저장소로 푸시해요 (직접 GitHub로 푸시해도 돼요).
- 텐센트 Edgeone, Vercel, Netlify, Cloudflare Pages가 자동으로 업데이트를 가져와 빌드해요.
- 전 세계 CDN 노드로 자동 배포돼요.
오픈소스
이 테마는 오픈소스예요. 마음에 드신다면 작가에게 후원도 가능해요: