从 Docusaurus 迁移到 Astro

Docusaurus 是一个基于React构建的流行的文档网站生成器。

Docusaurus 和 Astro 之间的主要相似点

标题部分 Docusaurus 和 Astro 之间的主要相似点

Docusaurus 和 Astro 之间有一些相似之处,这将有助于你迁移你的项目:

  • Astro 和 Docusaurus 都是现代的、基于 JavaScript(Jamstack)的站点生成器,用于内容聚焦的网站,如文档站点。

  • Astro 和 Docusaurus 都支持MDX页面。你应该能够将现有的.mdx文件用于Astro。

  • Astro 和 Docusaurus 都使用基于文件的路由自动为位于src/pages的任何MDX文件生成页面路由。在 Astro 中为你现有的内容和添加新页面使用文件结构应该会感到熟悉。

  • Astro 有一个使用React组件的官方集成。注意,在 Astro 中,React 文件必须.jsx.tsx扩展名。

  • Astro 支持安装NPM包,包括几个 React 的。你可能能保留你现有的部分或全部 React 组件和依赖项。

  • Astro的类JSX语法如果你习惯写 React 应该会感觉很熟悉。

Docusaurus 和 Astro 之间的主要区别

标题部分 Docusaurus 和 Astro 之间的主要区别

当你在 Astro 中重建你的 Docusaurus 站点时,你会注意到一些重要的区别:

  • MPA vs SPA: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 集成并使用.mdx文件作为标准 Markdown 文件。

从 Docusaurus 切换到 Astro

标题部分 从 Docusaurus 切换到 Astro

要把一个 Docusaurus 文档站点转换为 Astro,首先使用我们的官方 Starlight 文档主题启动模板,或者在我们的主题展示中探索更多社区文档主题。

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

终端窗口
npm create astro@latest -- --template starlight

添加我们的 MDX 集成并带来你现有的内容文件,创建 MDX页面。你仍然可以通过将这些文件直接复制到 Astro 中的src/pages/来利用基于文件的路由,这是你现在使用的同一个文件夹。创建与你现有的 Docusaurus 项目对应的名称的文件夹,你应该能保留你现有的 URL。

Docusaurus 可能处理了你的许多网站布局和元数据。你可能希望阅读有关构建 Astro 布局作为 Markdown 和 MDX 的页面包装器,看看如何在 Astro 中自己管理模板,包括你的页面<head>

你可以在 astro.new 上找到 Astro 的文档启动器和其他官方模板。你会找到每个项目的 GitHub 存储库的链接,以及一键链接到 StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中的工作项目。

  • 添加你自己的!

更多迁移指南