프론트/Astro

Astro 블로그 만들기

hooooolly 2025. 9. 1. 17:53

https://docs.astro.build/ko/tutorial/0-introduction/

 

첫 번째 Astro 블로그 만들기

프로젝트 기반 튜토리얼을 통해 Astro의 기초를 익히세요. 시작하는 데 필요한 모든 배경 지식을 제공합니다!

docs.astro.build

 

1. 설정하기

Astro는 짝수 버전의 Node.js만 지원합니다. 현재 지원되는 최소 버전은 각각 v18.20.8, v20.3.0, v22.0.0입니다. (v19 v21은 지원되지 않습니다.)

호환되는 버전이 설치되어 있는지 확인하려면 터미널에서 다음 명령을 실행하세요.

 

2. Astro 프로젝트 생성하기

 

  • npm install -g pnpm 으로 pnpm 패키지 관리자를 설치
  • pnpm --version 명령어로 잘 설치되었는지 확인
  • pnpm create astro@latest
    • pnpm으로 새 프로젝트를 만듭니다

 

3. 개발 모드로 Astro 실행하기

개발하는 동안 프로젝트 파일들이 웹사이트에서 어떻게 보이는지 확인하려면, Astro를 개발(dev) 모드로 실행해야 합니다.

 

  • pnpm run dev

4. 첫 번째 Astro 코드 작성하기

<body>
  <h1>Astro</h1>
  <h1>My Astro Site</h1>
</body>

 

 

5. 사이트를 웹에 배포하기

프로젝트 코드에 변경 사항을 커밋할 때마다 Netlify는 사이트를 실시간으로 빌드하여 웹에 배포합니다.

 

Netlify 사이트 만들기

  1. 아직 Netlify 계정이 없다면 무료로 가입하세요.
  2. 사용자 이름을 메모해 두세요. 대시보드와 생성한 사이트들은 https://app.netlify.com/teams/username에서 확인할 수 있습니다.
  3. Add new site > Import an existing project를 클릭하세요.
  4. Git 제공업체와 연결하라는 메시지가 나타나면 GitHub를 선택하고, 안내에 따라 GitHub 계정 인증을 진행하세요. 그런 다음, 목록에서 Astro 프로젝트의 GitHub 리포지토리를 선택하세요.
  5. 마지막 단계입니다. 이 단계에서는 Netlify가 사이트 설정 화면을 보여줍니다. 기본값이 Astro 프로젝트에 적합하므로, 아래로 스크롤하여 Deploy site 버튼을 클릭하세요.