컨텐츠로 건너뛰기

VuePress에서 마이그레이션

VuePress는 Vue를 기반으로 구축된 오픈 소스 정적 사이트 생성기입니다.

VuePress와 Astro의 주요 유사점

섹션 제목: VuePress와 Astro의 주요 유사점

VuePress와 Astro는 프로젝트 마이그레이션에 도움이 되는 몇 가지 유사점을 공유합니다.

  • VuePress와 Astro는 모두 비슷한 프로젝트 파일 구조를 가진 최신 Javascript 정적 사이트 생성기입니다. 둘 다 파일 기반 라우팅을 위한 특수 src/pages/ 폴더를 사용합니다. 사이트의 페이지를 만들고 관리하는 것이 익숙하게 느껴질 것입니다.

  • Astro와 VuePress는 모두 콘텐츠 중심 웹사이트용으로 설계되었으며 Markdown 파일에 대한 뛰어난 지원 기능이 내장되어 있습니다. Markdown으로 작성하는 것은 친숙하게 느껴지며 기존 콘텐츠를 유지할 수 있습니다.

  • Astro는 Vue 컴포넌트 사용을 위한 공식 통합 기능을 갖추고 있으며 Vue용 여러 패키지를 포함하여 NPM 패키지 설치를 지원합니다. Vue UI 컴포넌트를 작성할 수 있으며 기존 Vue 컴포넌트 및 종속성의 일부 또는 전부를 유지할 수도 있습니다.

VuePress와 Astro의 주요 차이점

섹션 제목: VuePress와 Astro의 주요 차이점

Astro에서 VuePress 사이트를 다시 구축하면 몇 가지 중요한 차이점을 발견하게 될 것입니다.

  • VuePress는 Vue 기반 단일 페이지 애플리케이션 (SPA)입니다. Astro 사이트는 .astro 컴포넌트를 사용하여 구축된 다중 페이지 앱이지만 React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit 및 원시 HTML 템플릿도 지원할 수 있습니다.

  • 레이아웃 템플릿: VuePress 사이트는 페이지 콘텐츠용 Markdown (.md) 파일과 레이아웃용 HTML (.html) 템플릿을 사용하여 생성됩니다. Astro는 컴포넌트 기반이며 페이지, 레이아웃 및 개별 UI 요소에 대한 HTML 템플릿을 포함하는 Astro 컴포넌트를 사용합니다. Astro는 페이지 템플릿에 Markdown 콘텐츠를 래핑하기 위한 Astro 레이아웃 컴포넌트를 사용하여 .md.mdx 파일의 페이지를 만들 수도 있습니다.

  • VuePress는 콘텐츠가 많은 Markdown 중심 사이트를 구축하도록 설계되었으며 Astro에서 직접 구축해야 하는 문서 관련 웹 사이트 기능이 내장되어 있습니다. 대신 Astro는 공식 문서 테마를 통해 일부 문서 관련 기능을 제공합니다. 이 웹사이트는 해당 템플릿에 대한 영감을 주었습니다! 테마 쇼케이스에서 기본 제공 기능이 포함된 더 많은 커뮤니티 문서 테마를 찾아보실 수도 있습니다.

VuePress에서 Astro로 전환

섹션 제목: VuePress에서 Astro로 전환

VuePress 문서 사이트를 Astro로 변환하려면 공식 Starlight 문서 테마 시작 템플릿으로 시작하거나 테마 쇼케이스에서 더 많은 커뮤니티 문서 테마를 탐색하세요.

공식 스타터 중 하나를 사용하여 새로운 Astro 프로젝트를 시작하려면 --template 인수를 create astro 명령에 전달할 수 있습니다. 또는 GitHub의 기존 Astro 저장소에서 새 프로젝트를 시작할 수 있습니다.

Terminal window
npm create astro@latest -- --template starlight

Markdown 페이지를 생성하기 위해 기존 Markdown 콘텐츠 파일을 가져오세요. 이러한 문서를 VuePress의 docs에서 Astro의 src/pages/로 이동하여 파일 기반 라우팅을 계속 활용할 수 있습니다. 기존 VuePress 프로젝트에 해당하는 이름으로 폴더를 생성하면 기존 URL을 유지할 수 있습니다.

VuePress 또는 설치한 테마는 아마도 사이트 레이아웃과 메타데이터의 대부분을 처리했을 것입니다. 페이지의 <head>를 포함하여 Astro에서 템플릿 작성을 직접 관리하는 방법을 알아보려면 Astro 레이아웃을 Markdown 페이지 래퍼로 구축하는 방법을 읽어보세요.

Astro의 문서 스타터와 기타 템플릿은 astro.new에서 찾을 수 있습니다. 각 프로젝트의 GitHub 저장소에 대한 링크는 물론 StackBlitz, CodeSandbox 및 Gitpod 온라인 개발 환경에서 작업 중인 프로젝트를 열 수 있는 원클릭 링크도 찾을 수 있습니다.

  • 여러분의 자료를 추가하세요!

더 많은 전환 안내서

기여하기

여러분의 생각을 들려주세요!

GitHub Issue 생성

우리에게 가장 빨리 문제를 알려줄 수 있어요.

커뮤니티