Astro로 빠르게 시작하는 블로그

Astro는 콘텐츠 중심 웹사이트를 빠르게 만들기 좋은 프레임워크입니다. 기본적으로 필요한 JavaScript만 브라우저에 보내기 때문에 블로그, 문서 사이트, 포트폴리오처럼 읽는 경험이 중요한 페이지에 특히 잘 어울립니다.

이 글에서는 새 프로젝트를 만들고, 페이지와 컴포넌트, Markdown 콘텐츠를 연결하는 흐름을 살펴보겠습니다.

Astro의 핵심: 기본은 정적 HTML

Astro 컴포넌트는 .astro 파일로 작성합니다. 파일 하나 안에서 데이터 준비와 HTML 템플릿, 스타일을 함께 다룰 수 있습니다.

---
const title = '안녕하세요, Astro';
---

<main>
  <h1>{title}</h1>
  <p>필요한 부분만 JavaScript를 추가합니다.</p>
</main>

프론트매터 사이의 코드는 서버 또는 빌드 시점에 실행됩니다. 따라서 목록 데이터를 가져오거나, 날짜를 정리하거나, 조건에 따라 화면을 구성하는 작업을 컴포넌트 안에서 자연스럽게 처리할 수 있습니다.

Node.js가 설치되어 있다면 아래 명령으로 새 프로젝트를 만들 수 있습니다.

npm create astro@latest my-astro-site
cd my-astro-site
npm install
npm run dev

개발 서버를 실행한 뒤 터미널에 표시된 주소를 열면 변경 사항을 바로 확인할 수 있습니다. 배포용 결과물은 다음 명령으로 생성합니다.

npm run build

src/pages 아래의 파일은 주소와 연결됩니다. 예를 들어 src/pages/about.astro는 /about 페이지가 됩니다. 반복해서 쓰는 헤더, 푸터, 카드 같은 UI는 src/components로 분리하는 편이 좋습니다.

---
import Header from '../components/Header.astro';
---

<Header />
<main>
  <h1>소개</h1>
</main>

페이지는 조립에 집중하고, 컴포넌트는 한 가지 역할에 집중하면 수정 범위가 작아집니다. 예를 들어 글 카드에는 제목, 날짜, 요약을 전달하고 카드 자체가 링크와 스타일을 책임지게 할 수 있습니다.

블로그 글은 Markdown 파일과 frontmatter 조합으로 관리하면 편리합니다. 제목, 날짜, 카테고리 같은 메타데이터를 파일 맨 위에 두고 본문은 평범한 Markdown으로 작성합니다.

---
title: "새 글 제목"
date: 2026-07-29
category: "개발/개발도구"
tags: ["Astro"]
summary: "글의 짧은 요약"
draft: false
---

## 본문 제목

여기부터 글 내용을 작성합니다.

콘텐츠 컬렉션을 사용하면 이 메타데이터의 형식을 검증할 수 있습니다. 날짜나 카테고리가 빠진 글을 빌드 과정에서 찾아낼 수 있어, 글이 늘어날수록 도움이 됩니다.

Astro에서는 모든 컴포넌트를 브라우저에서 실행할 필요가 없습니다. 좋아요 버튼, 검색창, 테마 전환처럼 상호작용이 필요한 부분에만 클라이언트 지시어를 붙입니다.

<ThemeToggle client:load />

React, Vue, Svelte 같은 UI 라이브러리를 함께 쓸 때도 같은 방식입니다. 정적인 본문은 가볍게 유지하고, 실제로 동작해야 하는 작은 섬만 브라우저에서 활성화합니다.

Astro의 장점은 복잡한 설정보다 콘텐츠와 화면 구조에 먼저 집중할 수 있다는 점입니다. 작은 소개 페이지나 블로그부터 시작한 뒤, 필요한 기능을 하나씩 더해 가면 됩니다.