Go back

Astro 기반으로 블로그를 생성하는 방법

Published:  at  09:24 PM

이전 글에서 WordPress 기반 블로그를 Astro로 전환한 이유와 개선점을 다뤘습니다. 이번 글에서는 실제로 Astro 기반 블로그를 처음부터 구축하는 방법을 단계별로 안내하겠습니다. 🚀

🤔 왜 Astro인가?

WordPress 대신 SSG 선택

기존 WordPress 환경에서 겪었던 문제들을 해결하기 위해 SSG(Static Site Generation)를 선택했습니다. SSG는 빌드 시점에 모든 페이지를 정적 HTML로 생성하여 런타임에 서버 연산이 필요 없는 방식입니다.

프레임워크 비교 분석

FrameworkMDXTSHMR빌드학습
Astro✅ 공식 지원✅ 공식 지원🚀 매우 빠름🟢 빠름🟢 쉬움
Gatsby✅ 공식 지원✅ 공식 지원🟡 보통🔴 느림🟡 보통
Hexo⚠️ 플러그인 필요⚠️ 플러그인 필요⚠️ livereload 지원🟢 빠름🟢 쉬움
Hugo❌ 지원 안됨❌ 지원 안됨⚠️ livereload 지원🚀 매우 빠름🟡 보통
Jekyll❌ 지원 안됨❌ 지원 안됨⚠️ livereload 지원🟡 느림🟢 쉬움

Astro를 선택한 핵심 이유

  1. MDX 지원: React 컴포넌트를 Markdown에 직접 삽입 가능
  2. TypeScript 지원: 타입 안정성과 개발 경험 향상
  3. Vite 기반 HMR: 초고속 Hot Module Replacement로 개발 효율성 극대화
  4. 빠른 빌드 속도: 대용량 콘텐츠도 빠르게 빌드
  5. 낮은 진입 장벽: HTML, JS, CSS, Markdown, MDX 등 익숙한 웹 기술을 그대로 활용할 수 있음
  6. Islands Architecture: 최신 웹 아키텍처 패턴으로 성능 최적화

Islands Architecture의 핵심 가치

Patterns.dev의 Islands Architecture 문서에 따르면, Astro는 “Islands Architecture를 기본으로 설계된 최초의 프레임워크” 입니다.

Islands Architecture란?

성능상 이점:

🚀 Astro 프로젝트 시작하기

프로젝트 구조

my-blog/
├── src/
│   ├── components/          # 재사용 가능한 컴포넌트
│   ├── layouts/             # 페이지 레이아웃
│   ├── pages/               # 라우팅 페이지
│   ├── data/                # 블로그 포스트 데이터
│   │   └── blog/
│   │       ├── _draft/      # 작성 중인 포스트
│   │       └── _releases/   # 릴리즈 포스트
│   ├── assets/              # 이미지, 아이콘 등
│   ├── styles/              # CSS 스타일
│   ├── utils/               # 유틸리티 함수
│   ├── config.ts            # 사이트 설정
│   ├── constants.ts         # 상수 정의
│   └── content.config.ts    # 콘텐츠 스키마
├── public/                  # 정적 자산 (favicon, og-image 등)
├── scripts/                 # 빌드 스크립트
├── astro.config.ts          # Astro 설정
└── tsconfig.json            # TypeScript 설정

🎨 Starter Template 선택

Astro 템플릿 시스템

Astro는 공식 문서에서 다양한 스타터 템플릿을 제공합니다. 저는 스타터 템플릿 대신 AstroPaper를 선택했습니다.

AstroPaper 테마 선택 이유

AstroPaper를 선택한 주요 이유들:

핵심 기능

설치 및 적용

# AstroPaper 테마로 새 프로젝트 생성
npm create astro@latest my-blog -- --template satnaing/astro-paper

# 또는 기존 프로젝트에 테마 추가
npm install @astrojs/tailwind @tailwindcss/typography

설정 커스터마이징

AstroPaper는 src/config.ts에서 주요 설정을 변경할 수 있습니다:

export const SITE = {
  website: "https://myblog.com", // 블로그 주소
  author: "작성자",
  profile: "https://myblog.com", // 프로필 이미지 주소
  desc: "개발 경험과 기술 인사이트를 공유합니다.",
  title: "My Blog - 작성자의 기술 블로그",
  ogImage: "og-image.jpg",
  lightAndDarkMode: true, // 라이트 모드와 다크 모드 전환 기능 활성화
  postPerIndex: 4, // 홈페이지에 보여지는 포스트 개수
  postPerPage: 8, // 포스트 페이지에 보여지는 포스트 개수
  scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
  showArchives: true,
  showBackButton: true, // show back button in post detail
  dynamicOgImage: true, // 모바일에서 포스트 페이지 접속 시 썸네일 이미지 동적 생성 기능 활성화
  lang: "ko", // html lang code. Set this empty and default will be "en"
  timezone: "Asia/Seoul", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
} as const;

📝 콘텐츠 작성

Markdown vs MDX

Astro는 기본 Markdown과 MDX를 모두 지원합니다:

---
title: "첫 번째 블로그 포스트"
author: "작성자"
pubDatetime: 2025-01-15T10:00:00Z
tags: ["Astro", "SSG", "블로그"]
---

# 첫 번째 블로그 포스트

이것은 일반 Markdown으로 작성된 포스트입니다.

## 코드 예제

```javascript
console.log("Hello, Astro!");
```

MDX를 사용하면 React 컴포넌트를 직접 삽입할 수 있습니다:

```mdx
---
title: "MDX 포스트 예제"
---

import InteractiveChart from '../components/InteractiveChart.astro'

# MDX 포스트

이것은 MDX 포스트입니다. React 컴포넌트를 직접 사용할 수 있습니다.

<InteractiveChart data={chartData} />

## 동적 콘텐츠

{/* JavaScript 표현식도 사용 가능 */}
{Math.random() > 0.5 ? "50% 확률로 보이는 텍스트" : ""}

콘텐츠 컬렉션

Astro의 Content Collections을 사용하면 타입 안전성을 확보할 수 있습니다:

// src/content/config.ts
import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    author: z.string(),
    pubDatetime: z.date(),
    tags: z.array(z.string()),
    draft: z.boolean().optional(),
  }),
});

export const collections = { blog };

🚀 배포 전략

Netlify 선택 이유

Astro 공식 튜토리얼에서 Netlify를 추천하고 있으며 아래와 같은 장점이 있습니다:

  1. 정적 사이트 호스팅: Astro의 SSG 특성과 완벽 호환
  2. CI/CD 파이프라인: Git push 시 자동 빌드 및 배포
  3. 글로벌 CDN: 전 세계 사용자에게 빠른 응답 속도
  4. 무료 요금제: 개인 블로그 운영에 충분한 기능

배포 설정

Netlify 공식 블로그의 Deploy an existing Git repository to Netlify 문서를 참고.

배포 과정:

  1. GitHub 저장소 연결: Netlify 대시보드에서 GitHub 저장소 연결
  2. 사이트 생성: “Add new site > Import an existing project” 선택
  3. 자동 배포: Netlify가 package.json의 build 스크립트를 자동으로 인식하여 배포

주요 장점:

🎯 다음 단계

이제 기본적인 Astro 블로그가 구축되었습니다! 다음 글에서는 Giscus를 기반으로 한 댓글 시스템 구현에 대해 다루겠습니다.

구현 완료된 기능들

다음 글에서 다룰 내용

📚 참고 자료

Astro로 블로그를 구축하면서 느낀 점: 기존 WordPress의 복잡함과 성능 한계를 모두 해결할 수 있었습니다. 특히 개발 경험의 향상과 빌드 속도의 개선이 인상적이었습니다. 다음 글에서 댓글 시스템 구현을 통해 더욱 완성도 높은 블로그를 만들어보겠습니다! 🚀

Share this post on:
Share this post via WhatsApp Share this post on Facebook Share this post on X Share this post via Telegram Share this post on Pinterest Share this post via email
Previous Post
Astro 기반으로 블로그 개편
Next Post
Astro 블로그에 Giscus 댓글 시스템 구현하기