Astro 블로그 구축기 #2 - Astro설치하기

ASTRO 설치하기

Astro를 설치하는 방법은 간단한데 Astro의 설치 Document 를 읽으면 된다. 다국어 지원이 있어서 오른쪽 상단의 언어 선택에서 “한국어”를 선택하면 한국어로 설명된 내용이 보이는데 한국어로된 설명서를 읽을 수 있으니 영어 울렁증이 있는 사람은 도움이 될 것 같다.

이 설명에 따르면 일단 기본적으로 Node.js가 설치 되어 있어야 한다. Node.js 설치 페이지는 여기 를 확인해볼 것. 이 포스트에서는 Node.js 설치 관련 내용을 다루지는 않으니 설치과정은 생략하겠다.

Node.js를 섩치하면 기본적으로 NPM(Node Package Manager)로 Node.js에서 사용하는 패키지 메니저로 NPM Repository에 올라가있는 패키지 프로그램을 CLI(Command Line Interface)로 간단하게 설치하고 사용할 수 있게 해주는 툴이다. 궁금하면 여기 로 접속해 볼 것.

암튼, 이 NPM을 통해 설치하는 법을 소개하려고 하는데 어디서 나는 yarn을 쓰네 pnpm을 쓰네 하는 사람들은 Astro 설치 문서를 읽어보면서 진행하면 되니 읽어보시라. 난 NPM을 이용해서 설치할테니.

Step1. npm create astro@latest

# npm으로 새 프로젝트 시작
npm create astro@latest

라는 명령으로 간단하게 Astro를 설치할 수 있다. npm은 방금 이야기한 NPM이고, create는 프로젝트 생성이라는 말, 그리고 astro는 설치하려는 패키지 명, @ 뒤에는 버전인데 여기서는 latest라고 썼다. 최신버전을 설치한다는 이야기. 설치를 진행하면 “Where should we create your new project?” 라는 메시지가 나오는데 프로젝트를 생성하는 디렉토리명을 입력하라는 이야기다. 그냥 나는 temp-blog라고 하겠다. temp-blog라고 하면 프로젝트를 어떻게 시작할거냐고 묻는데 난 블로그를 할거니까 Use blog template라고 했다. 다른 것들은 뭐 문서 템플릿, 미니멀 템플릿이라면서 고르는게 있는데 만들고 싶은 형식대로 고르면 될 것 같다.

그러면 Dependencies를 설치할거냐고 묻는데 Astro 안에는 여러 서드파티 툴 들이 들어있다. 대표적으로 React같은거. 그런 것들을 설치할거냐고 묻는 것인데 나는 설치하라고 했다. 만약 “No”를 선택했다면 블로그 디렉토리로 이동한 뒤에 아래의 명령을 입력하면 되니 당황할 필요없다.

# package.json의 dependencies에 명시된 패키지 설치
npm install

Git이 설치되어있지 않다면 물어볼일은 없겠지만 요즘 개발자들이라면 Git은 기본적으로 노트북에 탑재해 있을 것이므로 저렇게 Initialize a new git repository? 라고 물어올 거다. 나는 블로그를 옵시디언으로 글을 쓰고 Git에 올려서 Jenkins를 통해 자동으로 배포되는 시스템을 구축하고 싶었으니 당연히 Git을 설정해달라고 했다. 질문에 답을 다하면 설치를 시작한다. 그리고 얼마지않아 설치가 완료 되었단다. 설치가 된 위치는 temp-blog라고 친절하게 알려준다. 그럼 간단하게 설치된 블로그를 실행해보자.

Step2. Launch the blog

cd ./temp-blog
npm run dev

temp-blog로 디렉토리를 이동해서 npm run dev를 통해 서버를 구동하라는 이야기다. 차례로 제대로 명령어를 입력했다면 서버가 동작하는 것을 확인 할 수 있다. 이렇게 텍스트가 주르륵 올라갔다면 브라우저 주소창에 http://localhost:4321 이라고 입력해보자.

이렇게 화면이 나온다면 Astro 블로그는 정상적으로 설치가 된거다.

뭔가 좀 더 간단하게 템플릿을 적용하고 싶다면?

Astro 설치 문서를 읽어보면 템플릿이라는게 있어서 그걸 이용하면 좀 더 편하게 설치할 수 있을 것 같다고 생각할 수 있다. 템플릿 예제들은 여기 에 가보면 확인해 볼 수 있고, 각 예제에 들어가보면

이렇게 예제를 소개하고 프로젝트 생성시 적용하는 방법에 대해 설명하고 있다.

다음 시간엔 테마를 적용하는 방법에 대해서 알아보자. 안녕!