처음 배우는 Astro 웹사이트 만들기

설치, 프로젝트 구조, 컴포넌트와 레이아웃, 마크다운 블로그, SEO와 배포, 그리고 운영까지. 6개 강의로 검색에 잘 잡히는 나만의 사이트를 완성합니다.

이 강의의 특징

웹 프레임워크가 처음인 분도 사이트 하나를 완성할 수 있도록 구성했습니다.

Node.js 설치, 프로젝트 생성, 페이지 작성, 실제 배포, 그리고 배포 후 운영까지 사이트 하나를 처음부터 끝까지 다룹니다.

Astro 파일은 HTML과 거의 같습니다. React나 Vue를 몰라도 따라올 수 있도록 기초부터 설명합니다.

콘텐츠 컬렉션으로 마크다운 파일만 추가하면 글이 올라가는 블로그를 직접 만들어 봅니다.

메타 태그, 사이트맵, RSS, 서치 콘솔·서치어드바이저 등록까지 한국 환경에 맞춘 SEO를 다룹니다.

모든 강의에 복사해서 바로 써 볼 수 있는 코드가 들어 있습니다. 읽지만 말고 직접 실행해 보세요.

회원가입 없이 누구나 볼 수 있습니다. 자주 막히는 부분은 FAQ 페이지에 정리해 두었습니다.

1강부터 순서대로 따라 해 보세요.

Astro가 어떤 프레임워크인지, 왜 콘텐츠 중심 사이트에 강한지 알아보고 Node.js 설치부터 첫 프로젝트 실행까지 따라 해 봅니다.

Astro 프로젝트의 폴더 구조(src/pages, components, layouts, public)를 이해하고, 파일 기반 라우팅으로 새 페이지를 직접 만들어 봅니다.

헤더·푸터처럼 모든 페이지에 반복되는 코드를 Astro 컴포넌트와 레이아웃으로 분리하고, props와 slot으로 재사용하는 방법을 배웁니다.

Astro 콘텐츠 컬렉션을 이용해 마크다운 파일로 글을 쓰고, 스키마로 형식을 검증하며, getStaticPaths로 글 목록과 상세 페이지를 자동 생성하는 방법을 배웁니다.

Astro 사이트에 메타 태그, 사이트맵, RSS, 구조화 데이터를 추가하고 Vercel·Netlify·Cloudflare Pages에 배포한 뒤 구글 서치 콘솔과 네이버 서치어드바이저에 등록하는 전 과정을 다룹니다.

배포가 끝난 Astro 사이트를 꾸준히 운영하는 방법을 다룹니다. 새 글 추가와 재배포, 서치 콘솔·서치어드바이저로 색인 상태 확인, 방문자 분석 도구 연결, 링크·속도 점검, Astro 버전 업데이트와 백업까지 운영 루틴을 정리합니다.

자주 나오는 오류와 해결 방법을 FAQ 페이지에 정리해 두었습니다.