Question

Hugo 是一个基于 Go 的开源静态站点生成器。

Hugo 和 Astro 的主要相似之处

Hugo 和 Astro 有一些相似之处，可以帮助你迁移项目：

• Hugo 和 Astro 都是现代静态站点生成器，非常适合于像博客这样以内容驱动的网站。

• Hugo 和 Astro 都允许你在 Markdown 中编写内容。然而，Hugo 包含了几个特殊的 frontmatter 属性，并允许你使用 YAML、TOML 或 JSON 编写 frontmatter。尽管许多现有的 Hugo frontmatter 属性在 Astro 中并不生效，但你也可以继续使用现有的 Markdown 文件和 YAML frontmatter 值。

• Hugo 和 Astro 都允许你使用各种集成和外部包来增强你的站点。

Hugo 和 Astro 的主要区别

当你在 Astro 中重建 Hugo 网站时，你会注意到一些重要的差异：

• Hugo 使用 Go 模板来制作页面模板，而 Astro 语法则是一个类似 JSX 的 HTML 超集。

• Astro 不为标准 Markdown 文件中的动态内容使用短代码，但是 Astro 的 MDX 集成确实允许你在 MDX 文件中使用 JSX 和导入组件。

• Hugo可以为可重用的布局元素使用“partials”，而 Astro 则完全基于组件。任何 .Astro 文件都可以是组件、布局或整个页面，并且可以导入和渲染任何其他 Astro 组件。Astro 组件还可以包括其他 UI 框架组件（如 React，Svelte，Vue，Solid） 以及项目中其他文件的内容和数据, 如 Markdown 或 MDX。

从 Hugo 切换到 Astro

要将 Hugo 博客转换为 Astro，请从博客主题入门模板开始，或者在主题展示中探索更多社区博客主题。

你可以向 create astro 命令传递 --template 参数，以使用我们的官方启动器之一启动新的 Astro 项目。或者你可以在 从 GitHub 上任何现有的 Astro 存储库启动一个新项目。

• npm
• pnpm
• Yarn

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

将你现有的 Markdown（或 MDX，通过我们的可选集成）文件作为创建 Markdown 或 MDX 页面的内容。你可能需要将 frontmatter 转换为 YAML，因为 Astro 只允许在这些文件中使用 YAML frontmatter。

要继续在 Markdown 内容中使用动态内容，如变量、表达式或 UI 组件，请添加 Astro 的可选 MDX 集成并将现有的 Markdown 文件转换为 MDX 页面。MDX 支持 YAML frontmatter，所以你可以保留你现有的 frontmatter 属性。但是你必须用 MDX 自己的语法替换任何 shortcode 语法，它允许 JSX 表达式或组件导入。

要转换其他类型的网站，如作品集或文档网站，请参阅 astro.new 上的更多官方入门模板。你会找到每个项目的 GitHub 仓库的链接，以及在 StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中一键打打开一个工作项目的链接。

社区资源

• 博客文章: Hugo Vs Astro - 2023 年选择哪个静态站点生成器。

更多迁移指南

• 

  Gatsby

• 

  Next.js

• 

  NuxtJS

• 

  Create React App

• 

  Docusaurus

• 

  Eleventy

• 

  GitBook

• 

  Gridsome

• 

  Hugo

• 

  Jekyll

• 

  Pelican

• 

  SvelteKit

• 

  VuePress

• 

  WordPress

Recipes