Astro로 현대적인 정적 블로그 구축

왜 아스트로를 선택하나요?

Astro는 가능한 한 적은 양의 JavaScript를 브라우저에 전송한다는 핵심 목표로 설계된 최신 정적 사이트 생성기입니다. 기존 SPA 프레임워크와 달리 Astro는 기본적으로 순수 HTML을 출력하고 상호 작용이 필요한 경우에만 JavaScript를 로드합니다.

핵심 장점

• Zero JS 기본 출력: 페이지에는 기본적으로 JavaScript가 포함되어 있지 않습니다.
• 콘텐츠 우선: 내장 콘텐츠 컬렉션, 마크다운 콘텐츠의 유형 안전 관리
• 뛰어난 성능: 빌드 중 렌더링, Lighthouse에서 만점은 꿈이 아닙니다
• 유연한 통합: React, Vue, Svelte 등과 같은 프레임워크 구성 요소를 지원합니다.

프로젝트 구축

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

종속성 설치

npm install @astrojs/tailwind @astrojs/sitemap astro-icon

디렉토리 구조

좋은 프로젝트 구조는 유지 관리의 기초입니다.

src/
├── components/    # 可复用组件
├── layouts/       # 页面布局
├── pages/         # 路由页面
├── content/       # Markdown 内容
└── styles/        # 全局样式

성능 최적화

1. Astro Assets을 사용하여 이미지가 자동으로 최적화됩니다.
2. 레이아웃 오프셋을 피하기 위해 글꼴은 로컬로 호스팅됩니다.
3. CSS는 Tailwind를 사용하여 요청 시 생성됩니다.
4. Shiki를 사용하여 빌드하면 코드 하이라이팅이 완료됩니다.

기억하세요: 가장 좋은 최적화는 불필요한 코드를 보내지 않는 것입니다.

요약

Astro는 최고의 성능, 훌륭한 개발 경험, 뛰어난 SEO 성능 등 정적 블로그를 위한 완벽한 솔루션을 제공합니다. 블로그 프레임워크를 찾고 있다면 Astro를 시도해 볼 가치가 있습니다.