블로그 템플릿 사용하기

개요

Astro에서 제공해주는 기본 템플릿을 사용해서, 블로그를 만드는 방법을 알아보자.

구현하기

npm create astro@latest

위 명령어를 실행하면, 아래와 같은 과정으로 프로젝트가 생성됩니다.

  1. create-astro를 설치할 지 물어보면,y를 눌러 설치합니다.

  2. 설치가 완료되고, 프로젝트의 이름을 물어보면, 원하는 이름으로설정합니다.

  3. 템플릿을 선택합니다. Use blog template을 선택합니다.

  4. dependencies의 설치 여부를 결정 합니다.

  5. TypeScript를 사용할 지 결정합니다. - 프로젝트의 타입 안정성을 위해 yes를 선택합니다.

  6. TypeScript의 strict 정도를 결정합니다. - 권장 사항에 맞춰 strict를 선택합니다.

  7. git repository 를 초기화할 지 결정합니다.

이제 프로젝트가 생성되었으니, VScode로 해당 프로젝트를 열고 실행해봅시다.

# code ./프로젝트 이름을 입력합니다
# example
code ./my-blog
npm run dev

프로젝트가 실행되면 아래 주소로 접속합니다.

http://localhost:4321/localhost

아래 이미지와 같은 사이트를 확인할 수 있습니다.

수정하기

  • 이제 템플릿을 활용해서, 블로그의 디자인을 수정하고, 게시글을 작성하시면 됩니다.

※ 프로젝트의 폴더 구조는 아래와 같습니다.

📦src
 ┣ 📂components
 ┃ ┣ 📜BaseHead.astro
 ┃ ┣ 📜Footer.astro
 ┃ ┣ 📜FormattedDate.astro
 ┃ ┣ 📜Header.astro
 ┃ ┗ 📜HeaderLink.astro
 ┣ 📂content
 ┃ ┣ 📂blog
 ┃ ┃ ┣ 📜first-post.md
 ┃ ┃ ┣ 📜markdown-style-guide.md
 ┃ ┃ ┣ 📜second-post.md
 ┃ ┃ ┣ 📜third-post.md
 ┃ ┃ ┗ 📜using-mdx.mdx
 ┃ ┗ 📜config.ts
 ┣ 📂layouts
 ┃ ┗ 📜BlogPost.astro // 블로그 포스트의 공통레이아웃
 ┣ 📂pages
 ┃ ┣ 📂blog
 ┃ ┃ ┣ 📜index.astro // blog 페이지(/blog)
 ┃ ┃ ┗ 📜[...slug].astro // 각 포스트 페이지
 ┃ ┣ 📜about.astro // about 페이지(/about)
 ┃ ┣ 📜index.astro // home 페이지(/)
 ┃ ┗ 📜rss.xml.js
 ┣ 📂styles
 ┃ ┗ 📜global.css
 ┣ 📜consts.ts
 ┗ 📜env.d.ts

배포하기

프로젝트의 구현이 완료되었다면, 프로젝트를 배포하면 됩니다.

배포를 위해, github에 프로젝트의 소스 코드를 업로드합니다.

저장된 소스 코드를 Netlify, Vercel, 등의 다양한 서비스를 통해 빌드 및 배포할 수 있습니다.​​

Previous2. 프로젝트 구현Next다른 템플릿 사용하기

Last updated