[Astro] 블로그 만들기

Astro로 블로그 만드는 방법에 대해서 알아보겠습니다.

Astro를 다운받기 위해서 npm이 필요하니 Node.js를 다운로드 합니다.
(yarn으로 가능합니다.)
Node.js 다운로드


다운로드가 끝나면 적용이 되었는지 확인합니다. (node version 확인) 
$ node -v

npm 명령어를 이용해 프로젝트를 생성합니다. 
$  npm create astro@latest

아래 문구가 나오면 프로젝트 directory 이름을 지정해줍니다. ex) ./Astro_Blog 
$  Where should we create your new project?

공유된 무료 템플릿을 사용하거나 Astro에서 제공하는 기본 템플릿을 사용하는 것을 묻는 문구입니다. 저희는 기본 템플릿을 사용하여 진행하겠습니다. (Empty)

Astro 무료 템플릿

○ Include sample files (recommended)

○ Use blog template

○ Empty

TypeScript 사용 유무를 묻는 문구입니다. 
$  Do you plan to write TypeScript?
$  n

프로젝트 동작을 위해 의존성을 설치하는 문구입니다. 
$  Install dependencies?
$  y

git 저장소 설치를 묻는 문구입니다. git command를 사용하니 설치해줍니다. 
$  Initialize a new git repository?
$  y

VS Code에서 설치한 프로젝트를 열어줍니다. 프로젝트 파일을 웹사이트에서 개발 모드로 보려면 아래 명령어를 입력해줍니다. 
$  npm run dev

  • 웹사이트 미리 보기는 localhost:4321 로 접속하여 볼 수 있습니다.

  • (Empty)로 시작한 프로젝트는 빈 창에 Astro 문구만 볼 수 있습니다.

  • Astro 문구를 변경하기 위해서는 src/pages/index.astro 파일로 이동해서 <body> 태그의 <h1>을 수정해주면 변경 가능합니다.

이상으로 Astro를 이용해 개발 환경 구성하기를 마치겠습니다.