Docusaurus에서 마이그레이션

Docusaurus는 React를 기반으로 구축된 인기 있는 문서 웹사이트 빌더입니다.

Docusaurus와 Astro의 주요 유사점

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

Astro와 Docusaurus는 모두 문서 사이트와 같은 콘텐츠 중심 웹사이트를 위한 현대적인 JavaScript 기반 (Jamstack) 사이트 빌더입니다.
Astro와 Docusaurus 모두 MDX 페이지를 지원합니다. Astro에 기존 .mdx 파일을 사용할 수 있어야 합니다.
Astro와 Docusaurus는 모두 파일 기반 라우팅을 사용하여 src/pages 디렉터리에 있는 모든 MDX 파일에 대한 페이지 경로를 자동으로 생성합니다. 기존 콘텐츠에 Astro의 파일 구조를 사용하고 새 페이지를 추가하는 것이 친숙하게 느껴질 것입니다.
Astro에는 React 컴포넌트 사용을 위한 공식 통합이 있습니다. Astro에서 React 파일은 .jsx 또는 .tsx 확장자를 반드시 가져야 합니다.
Astro는 React용 패키지를 포함하여 NPM 패키지 설치를 지원합니다. 기존 React 컴포넌트 및 종속성의 일부 또는 전부를 유지할 수 있습니다.
React 작성에 익숙하다면 Astro의 JSX 유사 구문이 익숙하게 느껴질 것입니다.

Docusaurus와 Astro의 주요 차이점

Astro에서 Docusaurus 사이트를 다시 구축하면 몇 가지 중요한 차이점을 발견할 수 있습니다.

Docusaurus는 React 기반 단일 페이지 애플리케이션 (SPA)입니다. Astro 사이트는 .astro 컴포넌트를 사용하여 구축된 다중 페이지 앱이지만 React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit 및 원시 HTML 템플릿도 지원할 수 있습니다.
Docusaurus는 문서 웹 사이트를 구축하도록 설계되었으며 Astro에서 직접 구축해야 하는 문서 관련 웹 사이트 기능이 내장되어 있습니다. 대신 Astro는 공식 문서 테마를 통해 이러한 기능 중 일부를 제공합니다. 이 웹사이트는 해당 템플릿에 대한 영감을 주었습니다! 테마 쇼케이스에서 기본 제공 기능이 포함된 더 많은 커뮤니티 문서 테마를 찾을 수도 있습니다.
Docusaurus 사이트는 콘텐츠에 MDX 페이지를 사용합니다. Astro의 문서 테마는 기본적으로 Markdown (.md) 파일을 사용하며 MDX를 사용할 필요가 없습니다. 선택적으로 Astro의 MDX 통합을 설치하고 표준 Markdown 파일 외에도 .mdx 파일을 사용할 수 있습니다.

Docusaurus에서 Astro로 전환

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

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

npm create astro@latest -- --template starlight

pnpm create astro@latest --template starlight

yarn create astro --template starlight

MDX 통합을 추가하고 기존 콘텐츠 파일을 가져와 MDX 페이지를 만드세요. 이러한 문서를 현재 사용하고 있는 동일한 폴더인 Astro의 src/pages/ 디렉터리에 직접 복사하여 파일 기반 라우팅을 활용할 수 있습니다. 기존 Docusaurus 프로젝트에 해당하는 이름으로 폴더를 생성하면 기존 URL을 유지할 수 있습니다.

Docusaurus는 아마도 사이트 레이아웃과 메타데이터의 대부분을 처리했을 것입니다. Astro 레이아웃을 Markdown 및 MDX용 페이지 래퍼로 구축하는 방법을 읽고 <head> 페이지를 포함하여 Astro에서 템플릿을 직접 관리하는 방법을 알아보세요.

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