Migrating from Hugo
Hugo is an open-source static site generator built on Go.
Key Similarities between Hugo and Astro
Section titled Key Similarities between Hugo and AstroHugo and Astro share some similarities that will help you migrate your project:
-
Hugo and Astro are both modern static-site generators, ideally suited to content-focused websites like blogs.
-
Hugo and Astro both allow you to author your content in Markdown. However, Hugo includes several special frontmatter properties and allows you to write frontmatter in YAML, TOML or JSON. Even though many of your existing Hugo frontmatter properties will not be “special” in Astro, you can continue to use your existing Markdown files and YAML frontmatter values.
-
Hugo and Astro both allow you to enhance your site with a variety of integrations and external packages.
Key Differences between Hugo and Astro
Section titled Key Differences between Hugo and AstroWhen you rebuild your Hugo site in Astro, you will notice some important differences:
-
Hugo uses Go Templating for page templating. Astro syntax is a JSX-like superset of HTML.
-
Astro does not use shortcodes for dynamic content in standard Markdown files, but Astro’s MDX integration does allow you to use JSX and import components in MDX files.
-
While Hugo can use “partials” for reusable layout elements, Astro is entirely component-based. Any
.astrofile can be a component, a layout or an entire page, and can import and render any other Astro components. Astro components can also include other UI framework components (e.g. React, Svelte, Vue, Solid) as well as content or metadata from other files in your project, such as Markdown or MDX.
Switch from Hugo to Astro
Section titled Switch from Hugo to AstroTo convert a Hugo blog to Astro, start with our blog theme starter template, or explore more community blog themes in our theme showcase.
You can pass a --template argument to the create astro command to start a new Astro project with one of our official starters. Or, you can start a new project from any existing Astro repository on GitHub.
npm create astro@latest -- --template blogpnpm create astro@latest --template blogyarn create astro --template blogBring your existing Markdown (or MDX, with our optional integration) files as content to create Markdown or MDX pages. You may need to convert your frontmatter to YAML, since Astro only allows YAML frontmatter in these files.
To continue to use dynamic content such as variables, expressions or UI components within your Markdown content, add Astro’s optional MDX integration and convert your existing Markdown files to MDX pages. MDX supports YAML frontmatter, so you can keep your existing frontmatter properties. But, you must replace any shortcode syntax with MDX’s own syntax, which allows JSX expressions and/or component imports.
To convert other types of sites, such as a portfolio or documentation site, see more official starter templates on astro.new. You’ll find a link to each project’s GitHub repository, as well as one-click links to open a working project in StackBlitz, CodeSandbox and Gitpod online development environments.
