Astro로 기술 블로그 만들기: 실제 구축 과정

<Search client:idle />        <!-- 유휴 시 로드 -->
<ThemeToggle client:load />   <!-- 즉시 로드 -->

<!-- blog/[...slug].astro -->
<Giscus client:visible />     <!-- 뷰포트 진입 시 로드 -->

const blog = defineCollection({
    type: 'content',
    schema: z.object({
        title: z.string(),
        description: z.string(),
        pubDate: z.coerce.date(),
        tags: z.array(z.string()).default([]),
        draft: z.boolean().default(false),
    }),
});

export default defineConfig({
    markdown: {
        remarkPlugins: [remarkCjkFriendly],
    },
    vite: {
        plugins: [tailwindcss()]
    },
    integrations: [react()],
    adapter: isDev ? undefined : netlify()
});

@theme {
    --color-accent: #FF4800;  /* 29CM 스타일 Vivid Orange */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --font-sans: 'Pretendard Variable', system-ui, sans-serif;
}

const [mounted, setMounted] = useState(false);

useEffect(() => {
    setMounted(true);
    // localStorage에서 현재 테마 읽기
}, []);

if (!mounted) return null; // hydration mismatch 방지

export async function GET() {
    const blogs = await getCollection('blog');
    const projects = await getCollection('projects');

    const items = [
        ...blogs.filter(p => !p.data.draft).map(post => ({
            title: post.data.title,
            description: post.data.description,
            slug: `/blog/${post.slug}`,
            type: 'Blog',
        })),
        ...projects.map(/* ... */),
    ];

    return new Response(JSON.stringify(items));
}

// 태그 확장: 'a/b/c' → ['a', 'a/b', 'a/b/c']
function expandTag(tag: string): string[] {
    const parts = tag.split('/');
    return parts.map((_, i) => parts.slice(0, i + 1).join('/'));
}

// 트리 빌드: 포스트 배열 → 재귀 트리 구조
function buildTagTree(posts: Post[]): Record<string, TagTreeNode> { /* ... */ }

// 태그별 포스트 필터링: prefix 매칭
function getPostsByTag(posts: Post[], tag: string): Post[] {
    return posts.filter(p =>
        p.data.tags.some(t => t === tag || t.startsWith(tag + '/'))
    );
}

---
export async function getStaticPaths() {
    const posts = await getCollection('blog');
    const allTags = getAllTags(posts);
    return allTags.map(tag => ({
        params: { slug: tagToSlug(tag) },
        props: { tag, posts: getPostsByTag(posts, tag) }
    }));
}
---

<aside class="hidden lg:block w-56 shrink-0">
    <nav class="sticky top-24">
        <!-- 루트 태그 + 하위 태그 2단계 렌더링 -->
    </nav>
</aside>

backend:
  name: github
  repo: chan99k/chan99k.github.io
  branch: main
  base_url: https://blog.chan99k.dev
  auth_endpoint: /oauth

collections:
  - name: blog
    label: 블로그
    folder: src/content/blog
    create: true
    fields:
      - { name: title, label: 제목, widget: string }
      - { name: tags, label: 태그, widget: list,
          hint: "계층 태그는 /로 구분 (예: 개발/React)" }
      - { name: draft, label: 초안, widget: boolean, default: false }
      - { name: body, label: 본문, widget: markdown }

export const highlighterPromise = createHighlighter({
    langs: ['jsx', 'js', 'typescript', 'bash', 'yaml', 'json'],
    themes: ['min-dark']
});

const theme = localStorage.getItem('theme') === 'dark'
    ? 'dark_dimmed' : 'light';

<script src="https://giscus.app/client.js"
    data-theme={theme}
    data-mapping="pathname" />

export function cacheHeaders(maxAgeDays = 365, cacheTags?: string[]) {
    return {
        'Cache-Control': 'public, max-age=0, must-revalidate',
        'Netlify-CDN-Cache-Control': `public, max-age=${maxAgeDays * 86_400}`,
        ...(cacheTags && { 'Cache-Tag': cacheTags.join(',') }),
    };
}