개발 블로그 만들기 완벽 가이드 - Astro로 처음부터 끝까지

티스토리 광고 수익이 예전 같지 않다는 얘기, 들어보셨죠? 워드프레스는 좋긴 한데 플러그인 하나씩 깔 때마다 점점 무거워지는 느낌… 그러다가 “개발자답게” 뭔가 직접 만들어볼까 하는 생각이 들더라고요.

그래서 찾은 게 Astro예요. 빠르고, 가볍고, 커스터마이징 자유롭고, 무엇보다 Google SEO에 진짜 잘 먹혀요. 제가 직접 만들어보면서 “아, 이거 진짜 괜찮은데?” 싶었던 경험을 여러분과 나눠볼게요. 코딩 초보자도 충분히 따라올 수 있게 모든 과정을 상세하게 정리했어요!

📋 준비물 챙기기

요리하기 전에 재료부터 준비해야 하잖아요? 블로그 만들기도 마찬가지예요. 일단 필요한 것들부터 챙겨볼게요.

1. 필수 소프트웨어 설치

Node.js - 이게 뭔데?

간단히 말하면 JavaScript를 컴퓨터에서 실행할 수 있게 해주는 프로그램이에요. Astro를 돌리려면 필수라서 설치해야 해요.

처음 해보는 분들은 여기서 “어? 터미널이 뭐지?” 할 수 있는데요. 맥은 “터미널”, 윈도우는 “PowerShell”이라는 프로그램을 실행하면 돼요. 검은 화면에 하얀 글씨 나오는 그거요!

Git - 버전 관리의 필수템

Git은 코드를 저장하고 관리하는 도구예요. 귀찮을 수 있지만, 나중에 “아 그때 코드가 괜찮았는데…” 하는 순간이 오면 Git이 생명줄이 돼요.

맥:

brew install git

윈도우:

1. https://git-scm.com/download/win 접속
2. 자동 다운로드 시작! (안 되면 “Download” 클릭)
3. 설치할 때는 그냥 기본 설정으로 쭉쭉 넘어가도 괜찮아요

설치 확인:

git --version

코드 에디터 - VS Code 강추!

VS Code를 추천해요. 무료고, 가볍고, 확장 프로그램도 엄청 많거든요.

꼭 깔아야 할 VS Code 확장 프로그램:

• Astro - Astro 문법 하이라이팅
• Prettier - 코드 자동 정리 (이거 없으면 코드가 난장판…)
• ESLint - 에러 미리 잡아줌
• Tailwind CSS IntelliSense - CSS 자동완성

2. 계정 만들기

GitHub - 코드 저장소

GitHub에 가입하세요. 무료예요! 여기에 코드를 저장하고, 배포도 여기서 할 거예요.

배포는 GitHub Pages로!

다른 배포 플랫폼도 많지만, GitHub Pages가 제일 간단해요. 무료고, GitHub 계정만 있으면 바로 사용 가능하거든요. 저도 처음엔 Vercel이랑 고민했는데, 이게 제일 무난하더라고요.

3. 기본 지식 - 없어도 괜찮아요!

솔직히 HTML/CSS 하나도 모르고 시작해도 돼요. 저도 처음엔 “이게 먼가…” 했거든요. 하다 보면 자연스럽게 익혀져요. 다만 이런 게 있으면 도움이 돼요:

• HTML/CSS 기초 - 구글링하면서 배우면 됨
• Markdown 문법 - 블로그 글 쓸 때 쓰는데, 진짜 쉬워요
• 터미널 기본 명령어 - cd, ls 정도만 알아도 OK

⚙️ 개발 환경 설정하기

1. 작업 폴더 만들기

자, 이제 본격적으로 시작해볼게요. 먼저 블로그 파일들을 저장할 폴더를 만들어야 해요.

맥 / 리눅스:

# 문서 폴더로 이동
cd ~/Documents

# 프로젝트 폴더 생성

mkdir my-dev-blog
cd my-dev-blog

윈도우 (PowerShell):

# 문서 폴더로 이동
cd ~\Documents

# 프로젝트 폴더 생성

mkdir my-dev-blog
cd my-dev-blog

폴더 이름은 원하는 대로 바꿔도 돼요. 저는 처음에 “awesome-blog”로 했다가 나중에 “왜 이렇게 지었지…” 했던 기억이…

2. Git 초기 설정

Git을 처음 쓰는 거라면 이름이랑 이메일을 등록해야 해요. 한 번만 하면 되니까 귀찮아도 꼭 해주세요!

# 여러분의 이름과 이메일로 바꿔주세요
git config --global user.name "홍길동"
git config --global user.email "hong@example.com"

🚀 Astro 프로젝트 생성 - 드디어!

1. Astro CLI로 프로젝트 만들기

이제 진짜 블로그를 만들 차례예요. 명령어 하나면 끝나요!

# 마법의 명령어!
npm create astro@latest

2. 설치 과정에서 물어보는 것들

명령어를 입력하면 이것저것 물어봐요. 당황하지 말고 아래처럼 선택하세요:

Where should we create your new project?
→ ./ (그냥 엔터! 현재 폴더에 만든다는 뜻)

How would you like to start your new project?
→ Use blog template (블로그 템플릿 선택 - 이게 핵심!)

Install dependencies?
→ Yes (자동으로 설치해줌. 편하죠?)

Do you plan to write TypeScript?
→ Yes (나중을 위해 Yes 추천)

How strict should TypeScript be?
→ Strict (까다롭지만 나중에 고마워요)

Initialize a new git repository?
→ Yes (버전 관리 시작!)

3. 짜잔! 실행해볼까요?

# 개발 서버 시작
npm run dev

브라우저에서 http://localhost:4321을 열어보세요. 블로그가 돌아가고 있어요! 🎉

처음 이 화면 봤을 때 기분이란… “내가 해냈어!” 이런 느낌이었어요. 여러분도 지금 그 기분 느끼고 계시죠?

📁 프로젝트 구조 파악하기

폴더를 열어보면 파일이 엄청 많아요. 겁먹지 마세요! 실제로 건드릴 파일은 몇 개 안 돼요.

꼭 알아야 할 파일들

src/consts.ts - 블로그 기본 정보

블로그 이름이랑 설명을 여기서 바꿔요.

export const SITE_TITLE = '내 개발 블로그';
export const SITE_DESCRIPTION = '개발 여정을 기록하는 공간';

src/content/config.ts - 글 메타데이터 설정

블로그 글에 어떤 정보를 담을지 정의하는 곳이에요. 건드리지 않아도 되긴 한데, 나중에 커스텀하고 싶으면 여기를 수정하면 돼요.

🎨 블로그 디자인 커스터마이징

이제 진짜 재미있는 부분이에요. 내 블로그를 내 스타일로 꾸며볼 거예요!

1. Tailwind CSS 설치 - 스타일링의 치트키

CSS 하나하나 쓰기 귀찮잖아요? Tailwind CSS를 쓰면 클래스만 추가하면 돼요. 진짜 편해요.

# Tailwind CSS 설치
npm install -D tailwindcss @tailwindcss/typography @tailwindcss/vite

astro.config.mjs 수정

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
site: '<https://yourdomain.com>', // 나중에 여러분 도메인으로 바꾸세요
integrations: [mdx(), sitemap()],
vite: {
  plugins: [tailwindcss()],
},
});

2. 전역 스타일 설정 - 다크모드도 넣어볼까요?

다크모드 없는 블로그는 2025년에 있을 수 없죠. 저도 새벽 코딩할 때 다크모드 없으면 눈이 너무 아파서…

src/styles/global.css

@import "tailwindcss";

/*다크 모드 변수 - 이게 핵심!*/
:root {
--bg-color: #ffffff;
--text-color: #1a1a1a;
--accent-color: #3b82f6;
--border-color: #e5e7eb;
}

.dark {
--bg-color: #1a1a1a;
--text-color: #f9fafb;
--accent-color: #60a5fa;
--border-color: #374151;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease;
}

/*코드 블록 스타일 - 개발 블로그엔 필수죠*/
pre {
padding: 1.5rem;
border-radius: 0.5rem;
overflow-x: auto;
background-color: #282c34;
}

code {
font-family: 'Fira Code', 'Courier New', monospace;
font-size: 0.9em;
}

/*링크 스타일*/
a {
color: var(--accent-color);
text-decoration: none;
transition: opacity 0.2s;
}

a:hover {
opacity: 0.8;
}

}

  <h3>3. 헤더 커스터마이징 - 첫인상이 중요해요</h3>

  <p>헤더는 블로그의 얼굴이에요. 저는 여기서 한 3시간 고민했던 것 같아요...</p>

  <h4>src/components/Header.astro</h4>
  ```astro
---
import { SITE_TITLE } from '../consts';
---

<header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800">
  <nav class="max-w-4xl mx-auto px-4 py-4">
    <div class="flex items-center justify-between">
      <a href="/" class="text-2xl font-bold text-gray-900 dark:text-white">
        {SITE_TITLE}
      </a>

      <div class="flex items-center gap-6">
        <a href="/" class="hover:text-blue-500 transition">홈</a>
        <a href="/blog" class="hover:text-blue-500 transition">블로그</a>
        <a href="/about" class="hover:text-blue-500 transition">소개</a>
        <button id="theme-toggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <!-- 해/달 아이콘 -->
          </svg>
        </button>
      </div>
    </div>
  </nav>
</header>

<script>
  // 다크 모드 토글 - 이거 만들면서 신기했어요
  const themeToggle = document.getElementById('theme-toggle');
  const html = document.documentElement;
  
  const currentTheme = localStorage.getItem('theme') || 'light';
  html.classList.toggle('dark', currentTheme === 'dark');
  
  themeToggle?.addEventListener('click', () => {
    html.classList.toggle('dark');
    const theme = html.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
  });
</script>

4. 푸터도 예쁘게!

src/components/Footer.astro

---
const currentYear = new Date().getFullYear();
---

<footer class="border-t border-gray-200 dark:border-gray-800 mt-16">
<div class="max-w-4xl mx-auto px-4 py-8">
  <div class="flex flex-col md:flex-row justify-between items-center gap-4">
    <p class="text-gray-600 dark:text-gray-400">
      © {currentYear} My Dev Blog. All rights reserved.
    </p>

    <div class="flex gap-6">
      <a href="https://github.com/yourusername" target="_blank" rel="noopener">GitHub</a>
      <a href="https://twitter.com/yourusername" target="_blank" rel="noopener">Twitter</a>
      <a href="/rss.xml">RSS</a>
    </div>
  </div>
</div>
</footer>

✍️ 첫 번째 블로그 포스트 작성하기

드디어! 진짜 블로그 글을 쓸 차례예요. 뭔가 감격스럽죠?

1. 새 포스트 파일 만들기

src/content/blog/ 폴더에 Markdown 파일을 만들면 돼요.

---
title: '내 첫 번째 블로그 포스트'
description: 'Astro로 만든 블로그의 첫 포스트입니다!'
pubDate: 2025-11-28
heroImage: '/blog-placeholder-1.jpg'
---

# 안녕하세요

이것은 제 첫 번째 블로그 포스트입니다.
드디어 내 블로그를 만들었어요!

## Markdown은 진짜 쉬워요

### 코드도 이렇게

```javascript
function greet(name) {
console.log(`Hello, ${name}!`);
}

리스트도 간단

• 항목 1
• 항목 2
• 항목 3

인용구도 멋지게

“완벽을 추구하지 말고, 일단 시작하세요.”

마무리

블로그 만들기, 생각보다 재미있네요!

  <h3>2. 히어로 이미지 추가하기</h3>

  <p>블로그 글마다 대표 이미지를 넣으면 더 전문적으로 보여요. 이미지는 두 곳에 저장할 수 있어요:</p>

  <ul>
    <li><code>public/</code> 폴더 - 그냥 그대로 사용</li>
    <li><code>src/assets/</code> 폴더 - Astro가 자동으로 최적화해줌 (추천!)</li>
  </ul>

  <p>파일 탐색기에서 이미지를 드래그 앤 드롭하면 끝! 간단하죠?</p>

  <h2>🚢 배포하기 - 세상에 공개!</h2>

  <p>드디어 마지막 단계예요. 이제 여러분의 블로그를 인터넷에 올릴 거예요!</p>

  <p>배포 방법은 크게 두 가지가 있어요. GitHub Pages(무료, 공개 저장소)와 Cloudflare Pages(무료, 비공개 저장소 가능, 커스텀 도메인 쉬움)예요. 둘 다 설명해드릴게요!</p>

  <div class="mermaid">
graph LR
A["코드 작성 완료"] --> B["Git에 푸시"]
B --> C1["GitHub Pages 배포"]
B --> C2["Cloudflare Pages 배포"]
C1 --> D1["GitHub Actions 자동 실행"]
C2 --> D2["Cloudflare 자동 빌드"]
D1 --> E["배포 완료!"]
D2 --> E
E --> F["블로그 공개 🎉"]
  </div>

  <h3>📊 배포 방법 비교하기</h3>

  <p>어떤 걸 선택하면 좋을까요? 먼저 비교표를 보고 결정해봐요:</p>

  <table>
    <thead>
      <tr>
        <th>항목</th>
        <th>GitHub Pages</th>
        <th>Cloudflare Pages</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>가격</strong></td>
        <td>✅ 완전 무료</td>
        <td>✅ 완전 무료</td>
      </tr>
      <tr>
        <td><strong>저장소 공개 여부</strong></td>
        <td>⚠️ Public 저장소만</td>
        <td>✅ Private 저장소 가능</td>
      </tr>
      <tr>
        <td><strong>커스텀 도메인</strong></td>
        <td>⚠️ 설정이 약간 복잡</td>
        <td>✅ 매우 간단 (DNS 자동 설정)</td>
      </tr>
      <tr>
        <td><strong>빌드 속도</strong></td>
        <td>보통 (2-3분)</td>
        <td>⚡ 빠름 (1-2분)</td>
      </tr>
      <tr>
        <td><strong>CDN 성능</strong></td>
        <td>좋음</td>
        <td>✅ 매우 빠름 (전세계 200+ 지역)</td>
      </tr>
      <tr>
        <td><strong>설정 난이도</strong></td>
        <td>보통</td>
        <td>⚠️ 약간 복잡 (처음엔)</td>
      </tr>
      <tr>
        <td><strong>도메인 구매</strong></td>
        <td>별도 필요</td>
        <td>✅ Cloudflare에서 구매 가능</td>
      </tr>
      <tr>
        <td><strong>SSL 인증서</strong></td>
        <td>✅ 자동</td>
        <td>✅ 자동</td>
      </tr>
      <tr>
        <td><strong>추천 대상</strong></td>
        <td>간단하게 시작하고 싶은 분</td>
        <td>프로 느낌 + 코드 비공개 원하는 분</td>
      </tr>
    </tbody>
  </table>

  <blockquote>
    <p><strong>💡 저의 추천:</strong> 처음 시작이라면 GitHub Pages로 먼저 해보세요. 익숙해지면 Cloudflare Pages로 옮기는 것도 쉬워요. 저도 그렇게 했거든요! 코드를 비공개로 하고 싶거나, 나만의 도메인을 쓰고 싶다면 처음부터 Cloudflare Pages를 선택하는 것도 좋아요.</p>
  </blockquote>

  <!-- google_ad_section_start -->
  <h3>방법 1: GitHub Pages로 배포하기 (Public 저장소)</h3>

  <p>가장 간단한 방법이에요. GitHub 계정만 있으면 바로 시작할 수 있어요!</p>

  <h4>1단계: GitHub 저장소 만들기</h4>

  <ol>
    <li><a href="https://github.com/new" target="_blank" rel="noopener">GitHub 저장소 생성 페이지</a>로 이동</li>
    <li>저장소 이름 입력 (예: <code>my-dev-blog</code>)</li>
    <li><strong>Public</strong> 선택 (GitHub Pages는 무료로 쓰려면 Public이어야 해요)</li>
    <li>"Create repository" 클릭</li>
  </ol>

  <h4>2단계: 로컬 코드를 GitHub에 올리기</h4>

  ```bash
# 현재 프로젝트 폴더에서 실행
# Git 초기화 (이미 했다면 스킵)
git init

# 원격 저장소 연결 (여러분의 저장소 주소로 바꾸세요)
git remote add origin https://github.com/yourusername/my-dev-blog.git

# 모든 파일 추가
git add .

# 커밋
git commit -m "Initial commit: My awesome blog"

# GitHub에 푸시
git push -u origin main

3단계: astro.config.mjs 수정

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
site: 'https://yourusername.github.io',
base: '/my-dev-blog', // ⚠️ 저장소 이름으로 꼭 바꾸세요!
integrations: [mdx(), sitemap()],
vite: {
  plugins: [tailwindcss()],
},
});

중요! base 값은 반드시 여러분의 저장소 이름과 일치해야 해요. 예를 들어 저장소 이름이 awesome-blog라면 base: ‘/awesome-blog’로 설정하세요.

4단계: GitHub Actions 워크플로우 만들기

프로젝트 폴더에 .github/workflows/deploy.yml 파일을 만들어요:

name: Deploy to GitHub Pages

on:
push:
  branches: [ main ]
workflow_dispatch:

permissions:
contents: read
pages: write
id-token: write

jobs:
build:
  runs-on: ubuntu-latest
  steps:
    - name: Checkout
      uses: actions/checkout@v4

    - name: Setup Node
      uses: actions/setup-node@v4
      with:
        node-version: 20

    - name: Install dependencies
      run: npm ci

    - name: Build
      run: npm run build

    - name: Upload artifact
      uses: actions/upload-pages-artifact@v3
      with:
        path: ./dist

deploy:
  needs: build
  runs-on: ubuntu-latest
  environment:
    name: github-pages
    url: ${{ steps.deployment.outputs.page_url }}
  steps:
    - name: Deploy to GitHub Pages
      id: deployment
      uses: actions/deploy-pages@v4

5단계: GitHub 저장소 설정

1. GitHub 저장소 페이지로 이동
2. 상단 메뉴의 Settings 탭 클릭
3. 좌측 메뉴에서 Pages 클릭
4. Source에서 “GitHub Actions” 선택
5. 저장하면 끝!

6단계: 코드 푸시하고 배포 확인하기

# 워크플로우 파일과 수정 사항 커밋
git add .
git commit -m "Add GitHub Actions deployment workflow"
git push

GitHub 저장소의 Actions 탭에서 배포 진행 상황을 볼 수 있어요. 초록색 체크 표시가 나오면 성공! 🎉

블로그 주소: https://yourusername.github.io/my-dev-blog

처음 배포 버튼 눌렀을 때 떨리더라고요. “제대로 될까?” 했는데, 막상 해보니 생각보다 쉬웠어요!

방법 2: Cloudflare Pages로 배포하기 (Private 저장소 + 커스텀 도메인)

이제 진짜 프로 개발자처럼 배포해볼게요! Cloudflare Pages는 코드를 비공개로 유지하면서도 빠른 배포가 가능해요. 게다가 나만의 도메인도 쉽게 연결할 수 있어요!

왜 Cloudflare Pages를 쓸까요?

• ✅ Private 저장소 지원 - 코드를 공개하고 싶지 않을 때 최고
• ✅ 빠른 CDN - 전세계 어디서든 빠르게 로드
• ✅ 무제한 대역폭 - 아무리 많은 사람이 방문해도 무료
• ✅ 도메인 연결 쉬움 - 클릭 몇 번이면 끝
• ✅ 자동 HTTPS - SSL 인증서 자동 발급
• ✅ 미리보기 배포 - PR마다 미리보기 URL 생성

1단계: Cloudflare 계정 만들기

1. Cloudflare 가입 페이지로 이동
2. 이메일과 비밀번호로 가입 (무료예요!)
3. 이메일 인증하기
4. 대시보드에 로그인

팁: Cloudflare는 세계 최대 CDN 회사 중 하나예요. 수많은 기업들이 써요. 무료 플랜만으로도 충분하니 걱정 마세요!

2단계: GitHub에 Private 저장소 만들기

1. GitHub 저장소 생성 페이지로 이동
2. 저장소 이름 입력 (예: my-dev-blog)
3. ⭐ Private 선택 - 이게 핵심이에요! 코드를 비공개로 유지할 수 있어요
4. ”Create repository” 클릭

3단계: 로컬 코드를 Private 저장소에 푸시

# 현재 프로젝트 폴더에서 실행
# Git 초기화 (이미 했다면 스킵)
git init

# 원격 저장소 연결
git remote add origin https://github.com/yourusername/my-dev-blog.git

# 모든 파일 추가 및 커밋
git add .
git commit -m "Initial commit: Private blog repository"

# 메인 브랜치로 푸시
git branch -M main
git push -u origin main

Private 저장소의 장점: 초안 상태의 글, 개인 메모, API 키 같은 민감한 정보를 코드에 넣어도 남들이 못 봐요. 완성된 블로그만 세상에 공개되는 거죠!

4단계: Cloudflare Pages에 프로젝트 연결하기

1. Cloudflare 대시보드에 로그인
2. 좌측 메뉴에서 “Workers & Pages” 클릭
3. “Create application” 버튼 클릭
4. “Pages” 탭 선택
5. “Connect to Git” 클릭

5단계: GitHub 연동하기

1. “GitHub” 선택
2. 처음이면 “Connect GitHub” 클릭해서 인증
3. GitHub에서 Cloudflare Pages 앱 설치 승인
4. 저장소 접근 권한 설정:
   • All repositories (모든 저장소 접근) 또는
   • Only select repositories (특정 저장소만) - 이걸 추천해요! 그리고 여러분의 블로그 저장소만 선택하세요
5. “Install & Authorize” 클릭
6. Cloudflare로 다시 돌아와서 여러분의 저장소 선택
7. “Begin setup” 클릭

6단계: 빌드 설정하기

이 부분이 중요해요! Astro에 맞게 설정해야 해요:

• Project name: 원하는 이름 (URL에 들어감, 예: my-awesome-blog)
• Production branch: main (또는 여러분의 메인 브랜치 이름)
• Framework preset: Astro 선택 (드롭다운에서 찾으세요!)
• Build command: npm run build (자동으로 입력됨)
• Build output directory: dist (자동으로 입력됨)

“Save and Deploy” 버튼을 클릭하세요!

7단계: 첫 배포 확인하기

이제 Cloudflare가 자동으로 여러분의 블로그를 빌드하고 배포해요! 보통 1-2분 정도 걸려요.

1. 배포 진행 상황을 실시간으로 볼 수 있어요 (로그가 쭉 나와요)
2. 성공하면 “Success! Your site is live!” 메시지와 함께 URL이 나와요
3. 기본 URL은 https://my-awesome-blog.pages.dev 형태예요
4. 클릭해서 블로그를 확인해보세요! 🎉

축하합니다! 이제 여러분의 블로그가 Cloudflare의 전세계 CDN을 통해 서비스되고 있어요. 코드는 비공개지만, 블로그는 누구나 볼 수 있죠!

8단계: 자동 배포 확인하기

이제부터는 GitHub에 코드를 푸시할 때마다 자동으로 배포돼요:

# 블로그 글 수정하기
# src/content/blog/my-second-post.md 같은 파일 만들고...

# Git에 커밋하고 푸시
git add .
git commit -m "Add new blog post"
git push

몇 초 후 Cloudflare Pages 대시보드에서 새 배포가 시작되는 걸 볼 수 있어요. 완전 자동이죠!

🌐 커스텀 도메인 연결하기 (선택사항이지만 강력 추천!)

my-blog.pages.dev도 좋지만, myblog.com 같은 나만의 도메인이 있으면 훨씬 프로페셔널해 보여요. 한번 해볼까요?

도메인이 없다면: Cloudflare에서 구매하기

Cloudflare에서 도메인을 구매하면 설정이 진짜 간단해요. 추가 수수료 없이 원가 그대로예요!

1. Cloudflare 대시보드에서 “Domain Registration” 클릭
2. “Register Domains” 선택
3. 원하는 도메인 이름 검색 (예: myawesomeblog.com)
4. 사용 가능한 도메인 중 하나 선택
5. 구매 (보통 연간 $7-15 정도예요)
6. 결제하면 자동으로 Cloudflare 계정에 추가돼요

💰 가격 비교:

• 저렴한 도메인 도메인: 연간 약 $7
• .com 도메인: 연간 약 $10-12
• .dev 도메인: 연간 약 $12-15
• .io 도메인: 연간 약 $30-35

저는 처음에 하위도메인으로 dev를 붙여 시작했어요. 개발 블로그에 딱이더라고요!

이미 도메인이 있다면: Cloudflare로 가져오기

다른 곳(GoDaddy, Namecheap 등)에서 도메인을 이미 샀다면 Cloudflare로 네임서버만 바꾸면 돼요:

1. Cloudflare 대시보드에서 “Add a Site” 클릭
2. 도메인 이름 입력 (예: myblog.com)
3. Free 플랜 선택 (충분해요!)
4. Cloudflare가 DNS 레코드를 자동으로 스캔해요
5. “Continue” 클릭
6. Cloudflare 네임서버 2개가 나와요 (예시):
   • ava.ns.cloudflare.com
   • brad.ns.cloudflare.com
7. 원래 도메인 등록업체 사이트로 가서 네임서버를 Cloudflare 것으로 변경
   • GoDaddy: Domain Settings → Nameservers → Change → Custom
   • Namecheap: Domain List → Manage → Nameservers → Custom DNS
8. 네임서버 변경은 보통 몇 분~24시간 정도 걸려요 (보통은 30분 내)

Cloudflare Pages에 커스텀 도메인 연결하기

이제 진짜 마지막 단계예요!

1. Cloudflare Pages 프로젝트 대시보드로 이동
2. 여러분의 프로젝트 클릭
3. “Custom domains” 탭 클릭
4. “Set up a custom domain” 버튼 클릭
5. 도메인 입력:
   • myblog.com (루트 도메인) 또는
   • blog.myblog.com (서브도메인)
6. “Continue” 클릭
7. Cloudflare가 자동으로 DNS 레코드 설정할 거냐고 물어봐요
   • 도메인이 이미 Cloudflare에 있으면: “Activate domain” 클릭 → 자동으로 끝! 🎉
   • 외부 DNS 쓰고 있으면: CNAME 레코드 수동 추가 필요

DNS 레코드 수동 추가 (외부 DNS 사용 시)

만약 Cloudflare 외부에서 DNS를 관리한다면:

Type: CNAME
Name: blog (또는 @ for 루트 도메인)
Value: your-project.pages.dev
TTL: Auto (또는 3600)

DNS 설정 후 몇 분 기다리면 SSL 인증서가 자동으로 발급돼요. 그럼 https://myblog.com으로 접속 가능!

astro.config.mjs 업데이트하기

커스텀 도메인을 연결했으면 설정 파일도 업데이트해야 해요:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
site: 'https://myblog.com', // ⭐ 여러분의 도메인으로 변경!
// base: '/', // 루트 도메인 쓰면 base는 제거하거나 '/'로
integrations: [mdx(), sitemap()],
vite: {
  plugins: [tailwindcss()],
},
});

# 변경사항 커밋하고 푸시
git add astro.config.mjs
git commit -m “Update site URL to custom domain”
git push

몇 분 내로 자동 배포되고, 이제 여러분만의 도메인으로 블로그에 접속할 수 있어요! 🎊

🔐 Private vs Public 저장소 - 어떤 걸 써야 할까?

저의 선택: 저는 Private 저장소 + Cloudflare Pages를 써요. 왜냐하면:

1. 작성 중인 초안 글을 공개하고 싶지 않아서
2. 실험적인 코드는 감추고 싶어서
3. Cloudflare CDN이 정말 빨라서
4. 커스텀 도메인 설정이 너무 쉬워서

🚨 배포 시 주의사항 & 트러블슈팅

문제 1: 빌드는 성공했는데 페이지가 안 뜨는 경우

증상: 배포는 성공했다고 나오는데 사이트 들어가면 404 에러

해결책:

• astro.config.mjs의 base 설정 확인
  • GitHub Pages: base: '/repository-name' 필수
  • Cloudflare Pages: base: '/' 또는 설정 제거
• 빌드 결과물이 dist 폴더에 제대로 생성되었는지 로컬에서 확인:

npm run build
ls dist  # 파일들이 있는지 확인

문제 2: CSS/이미지가 제대로 안 보이는 경우

원인: 경로 문제

해결책:

• 절대 경로 대신 상대 경로 사용
• 이미지는 public/ 폴더나 src/assets/ 폴더 사용
• Astro의 Image 컴포넌트 활용:

import { Image } from 'astro:assets';
import myImage from '../assets/image.jpg';

<Image src={myImage} alt="Description" />

문제 3: Private 저장소 연동이 안 되는 경우

해결책:

1. Cloudflare Pages에서 GitHub 연동 다시 하기
2. GitHub Settings → Applications → Cloudflare Pages에서 접근 권한 확인
3. 필요시 저장소 접근 권한 재설정

문제 4: 배포는 되는데 너무 느린 경우

해결책:

• 이미지 최적화 (Astro Image 컴포넌트 사용)
• 불필요한 패키지 제거:

npm prune

• 빌드 캐시 활용 (Cloudflare Pages는 자동)

✅ 배포 체크리스트

배포하기 전에 이것들을 확인하세요:

• astro.config.mjs에서 site URL이 올바른가?
• base 설정이 배포 방식에 맞는가?
• 모든 이미지 경로가 올바른가?
• 환경 변수가 필요하다면 설정했는가?
• 로컬에서 npm run build가 성공하는가?
• robots.txt와 sitemap.xml이 생성되는가?
• 메타 태그(SEO)가 제대로 설정되어 있는가?
• 모바일에서도 잘 보이는가?

🔧 유지보수 및 관리

블로그 만들었다고 끝이 아니에요. 꾸준히 관리해야 해요!

1. 정기적인 업데이트

# 한 달에 한 번 정도는 체크해보세요
npm outdated  # 업데이트 가능한 패키지 확인
npm update    # 업데이트 실행

2. 성능 최적화

이미지는 Astro의 Image 컴포넌트를 쓰면 자동으로 최적화돼요. 진짜 편해요!

---
import { Image } from 'astro:assets';
import myImage from '../assets/my-image.jpg';
---

<Image src={myImage} alt="설명" width={800} height={600} />

3. SEO 최적화는 필수!

블로그 만들었는데 아무도 안 보면 슬프잖아요. SEO 최적화는 꼭 하세요!

---
interface Props {
title: string;
description: string;
image?: string;
}

const { title, description, image } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site)
---

<!-- 메타 태그들 -->
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />

<!-- Open Graph / Facebook -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />

<!-- Twitter -->
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />

4. Google Analytics 달기

방문자 통계 보는 재미도 쏠쏠해요. 누가 내 글을 봤나 확인하는 거, 중독성 있어요!

5. 백업은 필수!

# 정기적으로 Git에 커밋하세요
git add .
git commit -m "새 글 추가"
git push

# 이게 최고의 백업이에요!

📚 추가 리소스

공식 문서 (막힐 때 여기로!)

• Astro 공식 문서 - 진짜 잘 되어 있어요
• Astro 튜토리얼 - 단계별로 따라하기

유용한 도구들

• Markdown 가이드 - 문법 헷갈릴 때
• Unsplash - 무료 고퀄리티 이미지
• Font Awesome - 아이콘 필요할 때

커뮤니티

• Astro Discord - 막히면 여기서 물어보세요
• GitHub Discussions - 다른 사람들 질문도 참고

🎉 마무리하며

여기까지 따라오신 여러분, 정말 대단해요! 이제 여러분만의 개발 블로그가 생겼어요.

저도 처음엔 “이거 너무 어려운 거 아냐?” 했는데, 막상 해보니까 하나씩 따라하다 보면 되더라고요. 완벽하지 않아도 괜찮아요. 일단 시작하는 게 중요해요!

다음 단계는?

1. 도메인 연결하기 - cloudflare에서 도메인을 구매하고 연결하면 정말 간편해요. 이건 따로 다뤄볼게요!
2. 꾸준히 글 쓰기 - 일주일에 한 편이라도 좋아요
3. 디자인 개선 - 천천히 하나씩 바꿔가면 돼요
4. 기능 추가 - 댓글, 뉴스레터 등 필요한 거 추가
5. 커뮤니티 참여 - 다른 개발자들 블로그도 구경하고

문제가 생기면?

1. 에러 메시지 잘 읽어보기 (진짜 중요해요!)
2. Astro 공식 문서 검색
3. GitHub Issues 확인
4. Discord에서 질문 (부끄러워하지 마세요!)

팁: 에러 나는 게 당연해요. 저도 처음엔 에러 천지였어요. 하나씩 해결하다 보면 실력이 늘어요. 포기하지 마세요!

블로그 만들면서 배운 게 정말 많았어요. 여러분도 분명 그럴 거예요. 이제 시작이니까, 천천히 즐기면서 해보세요!

Happy Blogging! ✨

이 가이드가 도움이 되었다면, 여러분의 블로그 링크를 댓글로 공유해주세요! 구경 가고 싶어요! 😊

블로그 만들기, 생각보다 어렵지 않죠? 여러분의 성공을 응원합니다! 🚀