VuePress에서 마이그레이션

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

VuePress와 Astro의 주요 유사점

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

VuePress와 Astro는 모두 비슷한 프로젝트 파일 구조를 가진 최신 Javascript 정적 사이트 생성기입니다. 둘 다 파일 기반 라우팅을 위한 특수 src/pages/ 폴더를 사용합니다. 사이트의 페이지를 만들고 관리하는 것이 익숙하게 느껴질 것입니다.
Astro와 VuePress는 모두 콘텐츠 중심 웹사이트용으로 설계되었으며 Markdown 파일에 대한 뛰어난 지원 기능이 내장되어 있습니다. Markdown으로 작성하는 것은 친숙하게 느껴지며 기존 콘텐츠를 유지할 수 있습니다.
Astro는 Vue 컴포넌트 사용을 위한 공식 통합 기능을 갖추고 있으며 Vue용 여러 패키지를 포함하여 NPM 패키지 설치를 지원합니다. Vue UI 컴포넌트를 작성할 수 있으며 기존 Vue 컴포넌트 및 종속성의 일부 또는 전부를 유지할 수도 있습니다.

VuePress와 Astro의 주요 차이점

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

VuePress는 Vue 기반 단일 페이지 애플리케이션 (SPA)입니다. Astro 사이트는 .astro 컴포넌트를 사용하여 구축된 다중 페이지 앱이지만 React, Preact, Vue.js, Svelte, SolidJS, AlpineJS 및 원시 HTML 템플릿도 지원할 수 있습니다.
레이아웃 템플릿: VuePress 사이트는 페이지 콘텐츠용 Markdown (.md) 파일과 레이아웃용 HTML (.html) 템플릿을 사용하여 생성됩니다. Astro는 컴포넌트 기반이며 페이지, 레이아웃 및 개별 UI 요소에 대한 HTML 템플릿을 포함하는 Astro 컴포넌트를 사용합니다. Astro는 페이지 템플릿에 Markdown 콘텐츠를 래핑하기 위한 Astro 레이아웃 컴포넌트를 사용하여 .md 및 .mdx 파일의 페이지를 만들 수도 있습니다.
VuePress는 콘텐츠가 많은 Markdown 중심 사이트를 구축하도록 설계되었으며 Astro에서 직접 구축해야 하는 문서 관련 웹 사이트 기능이 내장되어 있습니다. 대신 Astro는 공식 문서 테마를 통해 일부 문서 관련 기능을 제공합니다. 이 웹사이트는 해당 템플릿에 대한 영감을 주었습니다! 테마 쇼케이스에서 기본 제공 기능이 포함된 더 많은 커뮤니티 문서 테마를 찾아보실 수도 있습니다.

VuePress에서 Astro로 전환

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

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

npm create astro@latest -- --template starlight

pnpm create astro@latest --template starlight

yarn create astro --template starlight

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

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

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