Jekyll에서 마이그레이션하기

Jekyll은 Ruby를 기반으로 구축된 정적 사이트 생성기입니다.

Jekyll과 Astro의 주요 유사점

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

Jekyll과 Astro는 모두 블로그를 만드는 데 일반적으로 사용되는 정적 사이트 생성기입니다.
Jekyll과 Astro 모두 Markdown 및 HTML로 콘텐츠를 작성하는 것을 허용합니다. Jekyll과 Astro는 둘 다 페이지 레이아웃과 미공개 초안 게시물에 대한 몇 가지 특별한 프런트매터 YAML 속성을 제공합니다. Astro에서 기존 Markdown 파일을 계속 사용할 수 있습니다.
Jekyll과 Astro는 모두 블로그 게시물에서 페이지를 생성하기 위해 파일 기반 라우팅을 사용합니다. Astro는 모든 페이지와 게시물을 위한 특수 src/pages/ 디렉터리를 제공합니다. Jekyll은 Markdown 블로그 게시물에 _posts/라는 유사한 특수 폴더를 사용하지만 사이트 페이지는 다른 곳에 있을 수 있습니다. 새 블로그 게시물을 작성하는 것은 익숙하게 느껴져야 합니다.

Jekyll과 Astro의 주요 차이점

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

Jekyll은 기본적으로 블로그 플랫폼이므로 Astro에서 직접 구축해야 할 수도 있는 여러 블로그 기능이 내장되어 있습니다. 또는 이러한 기능이 포함된 블로그 스타터 템플릿 테마를 선택하세요. 예를 들어, Jekyll에는 여러 Astro 블로그 테마에서 볼 수 있지만 최소 Astro 프로젝트에는 포함되지 않는 태그와 카테고리에 대한 지원 기능이 내장되어 있습니다.
Jekyll은 재사용 가능한 레이아웃 요소와 템플릿을 위해 Liquid 템플릿을 사용합니다. Astro는 컴포넌트와 템플릿을 위해 JSX와 유사한 .astro 파일을 사용합니다. 모든 .astro 파일은 컴포넌트, 레이아웃 또는 전체 페이지일 수 있으며 다른 Astro 컴포넌트를 가져와 렌더링할 수 있습니다. 다른 UI 프레임워크 컴포넌트 (예: React, Svelte, Vue, Solid)는 물론 Markdown 또는 MDX와 같은 프로젝트의 다른 파일에 있는 콘텐츠나 메타데이터를 사용하여 빌드할 수도 있습니다.

Jekyll에서 아스트로로 전환

Jekyll 블로그를 Astro로 변환하려면 블로그 테마 시작 템플릿으로 시작하거나 테마 쇼케이스에서 더 많은 커뮤니티 블로그 테마를 탐색하세요.

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

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

Markdown 페이지를 생성하기 위해 기존 Markdown 파일을 콘텐츠로 가져와 Liquid 템플릿 대신 Astro Markdown 레이아웃을 사용합니다.

기존 HTML 페이지 콘텐츠의 대부분은 Astro 페이지로 변환될 수 있으며 추가적으로 변수, JSX와 유사한 표현식 및 컴포넌트 가져오기를 HTML 템플릿에서 직접 사용할 수 있습니다.

Astro에는 자리 표시자를 허용하는 permalink 속성이 없습니다. 기존 URL 구조를 유지하려면 Astro의 페이지 라우팅에 대해 자세히 읽어야 할 수도 있습니다. 또는 Netlify와 같은 호스트에서 리디렉션을 설정하는 것을 고려해보세요.

포트폴리오나 문서 사이트 등 다른 유형의 사이트를 변환하려면 astro.new에서 더 많은 공식 시작 템플릿을 참조하세요. 각 프로젝트의 GitHub 저장소에 대한 링크는 물론 StackBlitz, CodeSandbox 및 Gitpod 온라인 개발 환경에서 작업 중인 프로젝트를 열 수 있는 원클릭 링크도 찾을 수 있습니다.