Hugo에서 마이그레이션

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

Hugo와 Astro의 주요 유사점

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

Hugo와 Astro는 모두 블로그와 같은 콘텐츠 중심 웹사이트에 이상적으로 적합한 최신 정적 사이트 생성기입니다.
Hugo와 Astro는 모두 Markdown으로 콘텐츠를 작성할 수 있도록 해줍니다. 그러나 Hugo에는 몇 가지 특별한 프런트매터 속성이 포함되어 있으며 YAML, TOML 또는 JSON으로 프런트매터을 작성할 수 있습니다. 기존 Hugo 프론트매터 속성 중 다수가 Astro에서 “특별”하지 않더라도 기존 Markdown 파일과 YAML 프론트매터 값을 계속 사용할 수 있습니다.
Hugo와 Astro를 사용하면 다양한 통합 및 외부 패키지를 통해 사이트를 향상할 수 있습니다.

Hugo와 Astro의 주요 차이점

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

Hugo는 페이지 템플릿 작성을 위해 Go 템플릿을 사용합니다. Astro 구문은 JSX와 유사한 HTML 상위 집합입니다.
Astro는 표준 Markdown 파일의 동적 콘텐츠에 단축 코드를 사용하지 않지만 Astro의 MDX 통합을 사용하여 JSX를 사용할 수 있으며, MDX 파일에서 컴포넌트를 가져올 수도 있습니다.
Hugo는 재사용 가능한 레이아웃 요소에 “partials”을 사용할 수 있지만 Astro는 전적으로 컴포넌트 기반입니다. 모든 .astro 파일은 컴포넌트, 레이아웃 또는 전체 페이지일 수 있으며 다른 Astro 컴포넌트를 가져와 렌더링할 수 있습니다. Astro 컴포넌트에는 다른 UI 프레임워크 컴포넌트 (예: React, Svelte, Vue, Solid)뿐만 아니라 Markdown 또는 MDX와 같은 프로젝트에 있는 다른 파일의 콘텐츠나 메타데이터도 포함될 수 있습니다.

Hugo에서 Astro로 전환

Hugo 블로그를 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 또는 MDX 페이지를 생성하기 위해 기존 Markdown (또는 선택적 통합이 포함된 MDX) 파일을 콘텐츠로 가져오세요. Astro는 이러한 파일에서 YAML 프런트매터만 허용하므로 프런트매터을 YAML로 변환해야 할 수도 있습니다.

Markdown 콘텐츠에서 변수, 표현식 또는 UI 컴포넌트와 같은 동적 콘텐츠를 계속 사용하려면 Astro의 선택적 MDX 통합을 추가하고 기존 Markdown 파일을 MDX 페이지로 변환하세요. MDX는 YAML 프런트매터을 지원하므로 기존 프런트매터 속성을 유지할 수 있습니다. 하지만 단축 코드 구문을 JSX 표현식 및/또는 컴포넌트 가져오기를 허용하는 MDX 자체 구문으로 바꿔야 합니다.

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