- 起步
- 核心概念
- 教程
- 基础内容
- 内置功能
- 集成
- 操作指南
- 使用指南
- 配置
- 参考
- 社区资源
- 其他
- 为文档做出贡献
- 手动安装 Astro
- 升级到 Astro v4
- 升级到 Astro v3
- 升级到 Astro v2
- Legacy v0.x Upgrade Guide
- 从 Create React App(CRA)迁移
- 关于本教程
- 第一单元:前期准备
- 准备开发环境
- 创建你的第一个 Astro 项目
- 你的第一行 Astro 代码
- 创建在线代码仓库
- 将你的网站部署到网络
- 第二单元:页面
- 创建你的第一个 Astro 页面
- 编写你的第一篇 Markdown 博客文章
- 添加「关于你」的动态内容
- 给你的「关于」页面添加样式
- 应用全局样式
- 第三单元:组件
- 创建一个可重复使用的导航组件
- 创建社交媒体 footer
- 自己动手搭建导航 Header
- 编写你的第一个浏览器脚本
- 第四单元:布局
- 编写你的第一个布局
- 创建并传递数据到博客布局
- 布局结合,两全其美
- 第五单元 - Astro API
- 创建文章存档页
- 生成标签页面
- 编写标签索引页面
- 添加 RSS 订阅源
- 第六单元 - Astro 群岛
- 搭建你的第一个 Astro 岛屿
- 回到干燥的陆地。让你的博客从白天到黑夜,无需岛屿!
- 恭喜你!
- @astrojs/mdx
- 添加阅读时间
- 创建开发者工具栏应用
- @astrojs/alpinejs
- @astrojs/lit
- @astrojs/preact
- @astrojs/react
- @astrojs/solid-js
- @astrojs/svelte
- @astrojs/vue
- @astrojs/cloudflare
- @astrojs/netlify
- @astrojs/node
- @astrojs/vercel
- @astrojs/db
- @astrojs/markdoc
- @astrojs/partytown
- @astrojs/sitemap
- @astrojs/tailwind
- 使用流式处理来提升页面性能
- 从 Gatsby 迁移
- 从 Next.js 迁移
- 从 NuxtJS 迁移
- 从 Docusaurus 迁移到 Astro
- 从 Eleventy 迁移到 Astro
- 从 GitBook 迁移到 Astro
- 从Gridsome迁移到Astro
- 从 Hugo 迁移
- 从 Jekyll 迁移
- 从 Pelican 迁移
- 从 SvelteKit 迁移
- 从VuePress迁移
- 从 WordPress 迁移
- 状态共享
- Storyblok 与 Astro
- Contentful 与 Astro
- ButterCMS & Astro
- Builder.io & Astro
- Cosmic 与 Astro
- DatoCMS 与 Astro
- Front Matter CMS 与 Astro
- Ghost & Astro
- Hashnode & Astro
- Hygraph 与 Astro
- Keystatic & Astro
- Kontent.ai 与 Astro
- 无头模式的 Statamic 与 Astro
- Strapi 与 Astro
- Tina CMS 与 Astro
- Umbraco & Astro
- 无头(headless)模式的 WordPress 与 Astro
- ApostropheCMS 与 Astro
- Caisy & Astro
- CloudCannon与Astro
- Crystallize 与 Astro
- Decap CMS 与 Astro
- Directus 与 Astro
- KeystoneJS 与 Astro
- microCMS & Astro
- Payload CMS 与 Astro
- Prepr CMS & Astro
- Prismic & Astro
- Sanity & Astro
- Sitecore 体验管理器 & Astro
- Spinal & Astro
- 创作内容
- Firebase 与 Astro
- Supabase 与 Astro
- Turso 和 Astro
- Xata 与 Astro
- Appwrite & Astro
- 部署你的 Astro 站点至 Netlify
- 部署你的 Astro 站点至 Vercel
- 如何将你的 Astro 网站部署到 Deno
- 部署你的 Astro 站点至 GitHub Pages
- 部署你的 Astro 站点至 GitLab Pages
- 部署你的 Astro 站点至 Cloudflare Pages
- 将你的 Astro 网站部署到 AWS
- 将你的 Astro 网站通过 Flightcontrol 部署到 AWS
- 将你的 Astro 网站通过 SST 部署到 AWS
- 将你的 Astro 网站部署至 Google Cloud
- 部署你的 Astro 站点至 Google Firebase 托管
- 将你的 Astro 网站部署到 Heroku
- 将你的 Astro 网站部署到 Microsoft Azure
- 部署你的 Astro 站点至 Buddy
- 将你的 Astro 网站部署到 Edgio
- 将你的 Astro 站点部署到 Fly.io
- 将你的 Astro 网站部署到 Render
- 将你的 Astro 网站部署到 Stormkit
- 将你的 Astro 网站部署到 Surge
- 通过 Cleavr 部署你的 Astro 网站
- 将你的 Astro 站点部署到 Kinsta 应用托管
- 将你的 Astro 网站部署到 Space
- 将你的 Astro 站点部署到 Zeabur
- 将你的 Astro 网站部署到 Zerops
- 添加 RSS 摘要
- 安装一个 Vite 或 Rollup 插件
- 构建自定义图像组件
- 使用 API 路由构建表单
- 在 Astro 页面中构建 HTML 表单
- 在 Astro 中使用 Bun
- 调用服务器端点
- 校验验证码
- 用 Docker 来构建你的 Astro 网站
- 动态导入图片
- 为链接添加图标
- 添加 i18n 功能
- 添加最后修改时间
- 在 Astro 组件中共享状态
- 使用 Tailwind Typography 美化渲染后的 Markdown
- Unknown compiler error.
- Astro.redirect is not available in static mode.
- Astro.clientAddress is not available in current adapter.
- Astro.clientAddress cannot be used inside prerendered routes.
- Astro.clientAddress is not available in static mode.
- No static path found for requested path.
- Invalid type returned by Astro page.
- Missing value for client:media directive.
- No matching renderer found.
- No client entrypoint specified in renderer.
- Missing hint on client:only directive.
- Invalid value returned by a getStaticPaths path.
- Invalid entry inside getStaticPath's return value
- Invalid value returned by getStaticPaths.
- getStaticPaths RSS helper is not available anymore.
- Missing params property on getStaticPaths route.
- Invalid value for getStaticPaths route parameter.
- getStaticPaths() function required for dynamic routes.
- Invalid slot name.
- Cannot use Server-side Rendering without an adapter.
- No import found for component.
- Invalid prerender export.
- Invalid component arguments.
- Page number param not found.
- Image missing required "alt" property.
- Error while loading image service.
- Missing image dimensions
- Failed to retrieve remote image dimensions
- Unsupported image format
- Unsupported image conversion
- Prerendered dynamic endpoint has path collision.
- Expected src to be an image.
- Expected image options.
- Cannot set both densities and widths
- Image not found.
- Could not process image metadata.
- Image not found.
- Could not transform image.
- Unable to set response.
- The middleware didn't return a Response.
- The middleware returned something that is not a Response object.
- The endpoint did not return a Response.
- Value assigned to locals is not accepted.
- Astro.response.headers must not be reassigned.
- Can't load the middleware.
- Local images must be imported.
- Astro.glob() used outside of an Astro file.
- Astro.glob() did not match any files.
- A redirect must be given a location with the Location header.
- Invalid dynamic route.
- Could not find Sharp.
- Unknown Vite Error.
- Could not import file.
- Invalid glob pattern.
- Astro couldn't find the correct page to render
- The provided locale does not exist.
- Index page not found.
- You can't use the current function with the current strategy
- Prerendered routes aren't supported when internationalization domains are enabled.
- 启用了手动国际化路由但没有提供中间件。
- Astro can't render the route.
- Unhandled rejection
- i18n Not Enabled
- Route not found.
- Unknown CSS Error
- CSS Syntax Error
- Unknown Markdown Error.
- Failed to parse Markdown frontmatter.
- Invalid frontmatter injection.
- MDX integration missing.
- Unknown configuration error.
- Specified configuration file not found.
- Legacy configuration detected.
- Unknown CLI Error.
- Failed to generate content types.
- Unknown Content Collection Error.
- Content entry frontmatter does not match schema.
- Invalid content entry slug.
- Content Schema should not contain slug.
- Collection does not exist
- Content and data cannot be in same collection.
- Collection contains entries of a different type.
- Data collection entry failed to parse.
- Duplicate content entry slug.
- Actions must be used with server output.
- Unsupported transform in content config.
从 WordPress 迁移
WordPress 是一个建立在 PHP 和 MySQL 上的开源个人发布系统。
WordPress 和 Astro 之间的主要相似之处
WordPress 和 Astro 在以下方面有一些相似之处,这将有助于你迁移项目:
无论是 WordPress 还是 Astro,都非常适合用于制作内容驱动的网站,比如博客,并支持使用 Markdown 编写内容(在 WordPress 中需要使用插件)。虽然在 Astro 中添加新内容的过程不同,但如果你已经在 WordPress 编辑器中使用过 Markdown 语法,那么在 Astro 博客中 编写 Markdown 文件应该会感觉很熟悉。
WordPress 和 Astro 都鼓励 将网站的设计划分为“模块” (组件)。在 Astro 中,你可能会更多的 编写自己的代码来创建这些模块,而不是依赖于预先构建的插件。对于网站的各个组成部分以及它们在页面上的呈现方式的思考应该是相似的。
WordPress 和 Astro 之间的主要区别
当你将 WordPress 网站重新构建为 Astro 时,你会注意到一些重要的区别:
- WordPress 网站使用在线仪表盘进行编辑。而在 Astro 中,你将使用 代码编辑器 和开发环境来维护你的网站。你可以在本地机器上进行开发,也可以选择云编辑器(或开发环境),比如 StackBlitz、CodeSandbox 或 Gitpod。
- WordPress 拥有大量的插件和主题市场。在 Astro 中,你将找到一些可用的主题和 集成,但现在你可能需要自己构建许多现有功能,而不是寻找第三方解决方案。或者,你可以选择从具有内置功能的 Astro 主题 开始!
- WordPress 将你的内容存储在数据库中。而在 Astro 中,你将为每个页面的内容在 项目目录 中拥有单独的文件(通常为 Markdown 或 MDX 格式)。或者,你可以选择使用 内容管理系统(CMS) 来管理你的内容,甚至使用你现有的 WordPress 网站,并使用 Astro 获取和展示数据。
从 WordPress 切换到 Astro
要将 WordPress 博客转换为 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
你可以继续 将现有的 WordPress 博客用作 Astro 的 CMS,这意味着你将继续使用 WordPress 仪表板来撰写文章。你的内容将在 WordPress 中进行管理,但 Astro 网站的所有其他方面将在你的代码编辑环境中构建,并且你将单独地 部署你的 Astro 网站,与你的 WordPress 网站分开。(请确保在你的托管服务器上更新你的域名,以保持相同的网站URL!)
如果你对在代码编辑器中工作和使用 GitHub 来存储和部署你的网站还不熟悉,你可能希望参考 Astro 的建立博客教程。该教程将指导你完成所需的所有账号和设置!你还将学习如何 自己构建 Astro 组件,以及如果你选择不使用 WordPress 来撰写内容,教程将向你展示如何在 Astro 中直接添加博文。
如果你希望将所有现有的文章内容转移到 Astro,你可能会发现这个从 WordPress 导出 Markdown 的工具很有帮助。如果你需要将大型或复杂的 WordPress 网站转换为 Markdown,则可能需要对结果进行一些调整。
要将其他类型的网站转换,比如作品集或文档网站,可以在 astro.new 上找到更多官方起始模板。你将找到每个项目的 GitHub 存储库链接,以及可在 StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中一键打开工作项目。
社区资源
- 博客文章:为什么我从 WordPress 切换到 Astro by fratzinger
- 欢迎添加你自己的资源!
更多迁移指南
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论