Astro 시작하기: 블로그 만들기 완벽 가이드

Astro는 블로그, 문서 사이트 같은 콘텐츠 중심 웹사이트를 빠르게 만들기 위한 모던 웹 프레임워크입니다. 기본적으로 JavaScript를 전혀 보내지 않고, React, Vue, Svelte 컴포넌트를 지원하며, 마크다운 콘텐츠 관리 기능이 내장되어 있습니다. 공식 블로그 템플릿을 사용하면 1시간 안에 기본 Astro 블로그를 만들어 Cloudflare Pages나 Netlify에 무료로 배포할 수 있습니다.

Astro란 무엇인가요?

rental contract checklist 가이드 →

rental report system changes 가이드 →

Astro는 콘텐츠 중심 웹사이트를 위해 설계된 모던 웹 프레임워크입니다. 기본적으로 클라이언트 사이드 JavaScript를 최소화하여 뛰어난 로딩 속도를 제공합니다.

왜 Astro를 선택해야 하나요?

블로그처럼 콘텐츠가 많은 사이트에 Astro는 탁월한 선택입니다.

2026년 웹 성능 최적화 팁 →

• 빠른 성능: 기본적으로 JavaScript를 전혀 보내지 않음
• 유연한 통합: React, Vue, Svelte 등 어떤 UI 프레임워크든 사용 가능
• 마크다운 지원: Content Collections로 타입 안전한 콘텐츠 관리
• SEO 최적화: 정적 사이트 생성으로 검색 엔진 최적화에 유리

어떻게 시작하나요?

새 프로젝트를 만드는 것은 간단합니다.

Tailwind CSS 실전 팁 10가지 →

npm create astro@latest my-blog -- --template blog
cd my-blog
npm run dev

npm run dev를 실행하면 http://localhost:4321에서 개발 서버가 시작됩니다. 파일을 저장할 때마다 브라우저가 자동으로 새로고침됩니다.

프로젝트 구조 이해하기

블로그 템플릿을 설치하면 다음과 같은 구조가 생성됩니다.

my-blog/
├── src/
│   ├── content/
│   │   ├── config.ts       # 콘텐츠 스키마 정의
│   │   └── blog/           # 마크다운 글 저장 위치
│   ├── layouts/
│   │   └── BlogPost.astro  # 글 레이아웃
│   └── pages/
│       ├── index.astro     # 홈 페이지
│       └── blog/
│           └── [...slug].astro  # 글 상세 페이지
├── public/                 # 정적 파일 (이미지, favicon 등)
└── astro.config.mjs        # Astro 설정 파일

중요한 점은 src/content/blog/ 폴더에 .md 파일을 추가하면 자동으로 블로그 글이 된다는 것입니다.

첫 번째 글 작성하기

src/content/blog/my-first-post.md 파일을 만들어 보세요.

---
title: "첫 번째 글"
description: "Astro 블로그의 첫 번째 글입니다."
pubDate: 2026-04-09
heroImage: "/images/first-post.webp"
tags: ["Astro", "블로그"]
---

여기에 글 내용을 씁니다. **마크다운** 문법을 그대로 사용할 수 있습니다.

## 소제목

본문 내용...

파일을 저장하면 개발 서버에서 즉시 확인할 수 있습니다. 프론트매터(---로 감싼 부분)의 필드는 config.ts의 스키마와 일치해야 합니다.

Tailwind CSS 연동하기

스타일링을 위해 Tailwind CSS를 추가하면 작업 속도가 크게 올라갑니다.

npx astro add tailwind

이 명령어 하나로 패키지 설치, astro.config.mjs 업데이트, tailwind.config.mjs 생성이 모두 자동으로 처리됩니다.

Cloudflare Pages에 무료 배포하기

Astro 블로그를 가장 빠르게 배포하는 방법은 Cloudflare Pages입니다.

1. GitHub에 저장소를 만들고 코드를 푸시합니다
2. Cloudflare Pages 대시보드에서 새 프로젝트를 연결합니다
3. 빌드 명령어를 npm run build, 출력 디렉터리를 dist로 설정합니다
4. 저장하면 자동 배포가 시작됩니다

이후 main 브랜치에 커밋할 때마다 자동으로 빌드·배포됩니다. 커스텀 도메인도 무료로 연결할 수 있습니다.

Astro 블로그 시작 체크리스트

• npm create astro@latest로 프로젝트 생성 완료
• 개발 서버(npm run dev) 정상 실행 확인
• src/content/blog/에 첫 번째 글 작성
• Tailwind CSS 연동 (npx astro add tailwind)
• @astrojs/sitemap 설치로 사이트맵 자동 생성
• GitHub에 저장소 생성 및 코드 푸시
• Cloudflare Pages 배포 완료
• public/robots.txt 작성
• Google Search Console에 사이트맵 제출

마무리

Astro는 블로그를 만들기 위한 최고의 도구 중 하나입니다. 빠른 성능, 뛰어난 개발자 경험, 그리고 풍부한 생태계를 제공합니다. npm create astro@latest 한 줄로 시작해, 오늘 안에 첫 블로그 글을 공개할 수 있습니다.

---