웹사이트 전체 로고
로고 배경
웹사이트 전체 로고
Astro Web

Astro로 블로그 만들기

빠르고 가벼운 정적 사이트를 위한 최고의 선택

작성자 프로필 사진
kui-o

들어가며

현대의 웹 프레임워크들은 복잡한 웹 애플리케이션을 만들 때는 훌륭한 선택지이지만, 단순히 텍스트와 이미지 위주의 블로그 환경에서는 페이지의 로딩 속도를 늦출 뿐입니다.

Astro는 블로그처럼 콘텐츠가 중심이 되는 웹사이트를 가장 빠르고 가볍게 만들어 주는 프레임워크입니다.

이 글에서는 Astro를 이용하여 블로그를 만드는 방법에 대해 소개합니다.

NodeJS 설치

Astro는 22.12.0 이상 짝수 버전을 필요로 합니다.
홀수 버전은 지원하지 않습니다

  1. NodeJS 공식 홈페이지에 접속합니다.
  2. 자신에게 맞는 ①아키텍처와 ②OS를 선택한 뒤 ③설치 프로그램을 다운로드하여 실행합니다.

NodeJS 다운로드 3. (선택) CMD 창에서 node -v를 입력하여 설치가 완료되었는지 확인합니다.

CMD
> node -v
v24.18.0

VSCode 설치

이 글에서는 VSCode 기준으로 설명합니다.
다른 편집기나 IDE를 사용해도 무방합니다.

  1. VSCode 공식 홈페이지에 접속합니다.
  2. 자신에게 맞는 설치 프로그램을 다운로드하여 실행합니다.

VSCode 다운로드

Astro 설치

  1. 프로젝트를 만들 적절한 위치에 폴더를 생성합니다.
    (IDE 환경에서는 빈 프로젝트를 생성하면 됩니다)
  2. ①상단메뉴 File > ②Open Folder > ③생성한 폴더 선택 > ④ Select folder를 눌러 폴더를 엽니다.
    (만약 경고창이 뜨면 Trust를 눌러 신뢰 모드로 엽니다)

VSCode 폴더 열기 3. ①상단메뉴 View > ②Terminal을 눌러 터미널을 엽니다.

VSCode 터미널 열기 4. 만약 터미널이(파란네모) cmd가 아니라면 ①생성 옆 케럿 > ②Select Default Profile > ③Command Prompt를 선택하면 기본 설정이 CMD로 변경됩니다.
이후에 ④휴지통 버튼을 눌러 터미널을 닫은 뒤 View 메뉴를 통해 터미널을 열면 CMD로 변경됩니다.

터미널 변경 방법 5. 생성한 폴더가 맞는지 확인한 뒤 npm create astro@latest 명령어를 실행합니다.

astro 생성 명령어 실행

  1. 아래 절차에 따라 설치를 진행합니다
CMD
Ok to proceed?
> y
Where should we create your new project?
> . (점 입력)
How would you like to start your new project?
> Use blog template
Install dependencies?
> Yes
Initialize a new git repository?
> No (Git이 있다면 Yes 추천)
  1. 설치가 완료 되었다면 npm run dev 명령어를 실행하여 로컬 서버를 실행합니다.
    (아래 메세지가 뜨면 성공입니다)
CMD
npm run dev
... 생략 ...
 astro  v7.0.3 ready in 6430 ms
┃ Local    http://localhost:4321/
┃ Network  use --host to expose
14:22:51 watching for file changes...
  1. http://localhost:4321 로 접속하여 페이지를 확인할 수 있습니다. astro 접속화면

마크다운 렌더링

Astro의 핵심인 마크다운 렌더링 기능에 대해 알아보겠습니다.
마크다운으로 문서를 작성하기만 하면 Astro가 이를 HTML 파일로 자동 변환해 줍니다.

  1. src > content > blog 폴더에 test.md 파일을 생성합니다.
  2. 원하는 내용을 작성합니다
test.md
---
title: 'Astro 블로그 구축 완료'
description: '마크다운 렌더링 테스트를 위해 작성하는 글입니다'
pubDate: 'Jun 25 2026'
heroImage: '../../assets/blog-placeholder-3.jpg'
---

## Astro 구축 완료
Astro를 활용한 정적 블로그 구축이 완료되었습니다.  
이 글은 블로그의 Markdown 렌더링 정상적으로 작동하는지 테스트 해보겠습니다.

### 1. 텍스트 서식 테스트
* **굵은 글씨(Bold)** 테스트입니다.
* *기울임꼴(Italic)* 테스트입니다.
* ~~취소선(Strikethrough)~~ 테스트입니다.
* 인라인 코드: 문서 내에서 `const message = 'Hello Astro!';` 형태로 표시됩니다.

### 2. 목록 테스트

**순서가 없는 목록:**
* 웹 프레임워크
  * Astro
  * React
  * Svelte

**순서가 있는 목록:**
1. 프로젝트 생성 및 패키지 설치
2. 레이아웃 및 컴포넌트 개발
3. 정적 사이트 빌드 및 배포

### 3. 인용구(Blockquote) 테스트

> "Astro는 콘텐츠 중심의 빠른 웹사이트를 구축하기 위한 올인원 웹 프레임워크입니다."
> 
> — Astro 공식 문서

### 4. 코드 블록 테스트

```HTML
<h1>Hello Astro</h1>
```
  1. 상단 블로그 메뉴로 이동한 뒤 페이지를 확인해 보면, 해당 글이 추가된 것을 확인할 수 있습니다

블로그 목록 화면 블로그 조회 화면

마치며

React 같은 경우 사용자가 웹사이트에 접속하는 순간 실시간으로 HTML 코드를 만들지만, Astro는 개발자가 빌드할 때 한 번만 HTML 코드를 생성합니다.
그래서 React는 실행 프레임워크, Astro는 빌드 프레임워크라고 부릅니다.

블로그 같이 내용이 변하지 않는 정적 사이트의 경우 Astro를 사용하면 정말 빠르고 가벼운 웹사이트를 만들 수 있으니 한번 사용해 보시는 것을 추천합니다.
긴 글 읽어 주셔서 감사합니다.