이 블로그는 이렇게 만들었습니다

첫 글에서 이 블로그를 만든 과정을 따로 정리하겠다고 썼는데, 그 글입니다. 특별한 기술은 없고 조합이 단순한 게 장점이라 그대로 옮겨 둡니다.

전체 구성

항목	선택
사이트 생성기	Astro (정적 빌드)
호스팅	Cloudflare Pages
저장소	GitHub
글 형식	마크다운 파일 + 프론트매터
월 비용	0원 (도메인 값만 별도)

동작은 이렇습니다. 마크다운 파일을 하나 쓰고 GitHub에 푸시하면, Cloudflare가 알아서 빌드해서 배포합니다. 관리자 페이지도, 데이터베이스도, 서버도 없습니다. 결과물은 그냥 HTML 파일 묶음입니다.

왜 플랫폼을 안 썼나

티스토리나 브런치를 쓰면 훨씬 빨리 시작할 수 있습니다. 그럼에도 직접 만든 이유는 세 가지입니다.

도메인이 이미 있었습니다. 놀리고 있던 도메인을 쓰려고 시작한 일이라, 남의 주소 아래 들어가는 선택지는 애초에 목적과 안 맞았습니다.

앱 정책 페이지가 필요했습니다. 구글 플레이에 앱을 올리려면 개인정보처리방침을 호스팅할 주소가 필요합니다. 블로그와 같은 사이트 안에 /apps/앱이름/privacy 같은 경로로 두면 관리가 한 번에 끝납니다. 플랫폼 블로그로는 이게 안 됩니다.

고칠 수 있습니다. 글 목록에 요약을 두 줄 보여줄지, 다크 모드를 어떻게 처리할지 같은 걸 직접 정할 수 있습니다. 사소해 보이지만 매일 보는 화면이라 차이가 큽니다.

글은 그냥 파일입니다

글 하나가 마크다운 파일 하나입니다. 맨 위에 메타데이터를 적습니다.

---
title: 글 제목
description: 목록과 검색에 나올 한 줄 요약
pubDate: 2026-08-05
category: dev
tags: [Astro, 정적사이트]
---

본문을 씁니다.

여기서 마음에 드는 부분은 이 메타데이터에 규칙을 걸어둘 수 있다는 점입니다. 카테고리를 오타 내거나 날짜를 빼먹으면 빌드가 실패하면서 어느 파일이 문제인지 알려줍니다. 잘못된 글이 사이트에 올라가는 대신 배포가 멈추는 쪽이 낫습니다.

draft: true를 붙이면 쓰다 만 글은 빌드에서 빠집니다. 초안을 저장소에 두고 천천히 고칠 수 있습니다.

자바스크립트를 거의 안 씁니다

블로그 화면에서 도는 자바스크립트가 사실상 없습니다. 글 페이지는 순수 HTML과 CSS로만 만들어집니다. 예외는 복리 계산기 같은 도구 페이지 정도인데, 그것도 그 페이지 안에서만 돕니다.

차트도 마찬가지입니다. 그래프 라이브러리를 넣는 대신 마크다운 안에 SVG를 직접 씁니다. 외부 라이브러리 없이 다크 모드에 맞춰 색이 바뀌고, 로딩도 없습니다. 봇 방어 로직 글에 들어간 도표가 그렇게 만든 겁니다.

폰트도 본문용 하나만 불러옵니다. 처음엔 제목용 명조체를 따로 썼는데, 이 하나 때문에 첫 화면 로딩이 눈에 띄게 느려져서 뺐습니다.

다크 모드는 색 이름만 바꿔서

색을 직접 쓰지 않고 이름을 붙여서 씁니다. 배경은 --bg, 본문 글자는 --ink 하는 식입니다. 그리고 시스템이 다크 모드일 때 그 이름들이 가리키는 값만 통째로 바꿉니다.

:root {
  --bg: #ffffff;
  --ink: #24292f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c;
    --ink: #e6e9ec;
  }
}

덕분에 나중에 만든 SVG 도표도 이 이름들을 쓰기만 하면 다크 모드에 저절로 맞습니다. 도표를 두 벌 만들 필요가 없습니다.

처음 디자인은 갈아엎었습니다

솔직히 적자면, 첫 버전은 종이 질감에 붉은 낙관 도장을 찍고 제목에 명조체를 쓴, 꽤 멋을 부린 디자인이었습니다. 만들 때는 그럴듯했는데 막상 올려놓고 보니 개인 블로그 치고 과했습니다. 결국 흰 배경에 파란 포인트만 남기고 전부 정리했습니다.

교훈이라면, 화면 만들 때는 브라우저에서 실제로 보고 판단해야 한다는 것 정도입니다. 코드로만 보면 멋있어 보이는 것들이 있습니다.

눈에 안 보이는 것들

보이지는 않지만 해두면 좋은 것들입니다.

RSS와 사이트맵 — 자동 생성됩니다. 글을 추가하면 알아서 목록에 들어갑니다.
공유 미리보기 이미지 — 메신저에 링크를 붙였을 때 뜨는 썸네일. 이걸 안 넣으면 아무것도 안 떠서 링크가 초라해 보입니다.
한국어·영어 글 연결 — 같은 글의 번역본끼리 서로 링크를 걸고, 검색엔진에도 “이 둘은 같은 글의 다른 언어판”이라고 알려줍니다.

그래서 얼마나 걸렸나

기본 뼈대는 반나절 정도였고, 디자인을 다시 하고 세부를 다듬는 데 그만큼 더 들었습니다. 어려운 부분은 없었지만, 정작 시간이 걸린 건 코드가 아니라 무엇을 넣지 않을지 정하는 일이었습니다. 댓글, 조회수, 방문자 배지, 인기 글 위젯 같은 걸 다 뺐습니다. 없어도 아쉽지 않고, 하나씩 붙일수록 페이지는 느려지고 관리할 게 늘어납니다.

지금 상태로 글 하나 올리는 데 드는 일은 파일 하나 쓰고 푸시하는 게 전부입니다. 그 정도면 충분합니다.