- 起步
- 核心概念
- 教程
- 基础内容
- 内置功能
- 集成
- 操作指南
- 使用指南
- 配置
- 参考
- 社区资源
- 其他
- 为文档做出贡献
- 手动安装 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.
如何将你的 Astro 网站部署到 Deno
你可以将一个使用服务器端渲染的 Astro 网站部署到 Deno Deploy,它是一个在全球范围边的边缘服务上运行 JavaScript、TypeScript 和 WebAssembly 的分布式系统。
本指南提供了通过 GitHub Actions 或 Deno Deploy CLI 部署到 Deno Deploy 的介绍。
要求
本指南假设你已经安装了 Deno。
项目配置
本页面提供了将你的 Astro 项目作为服务端渲染(SSR)站点部署到 Deno Deploy 的指南。
要部署静态站点,请参阅 Deno 部署静态站点教程。
SSR 适配器
要在 Astro 项目中启用 SSR 并在 Deno Deploy 上进行部署,请执行以下 astro add
命令添加 Deno 适配器。这将一步安装适配器并对你的 astro.config.mjs
文件进行适当更改。
npx astro add deno
如果你更喜欢手动安装适配器,则需要完成以下两个步骤:
使用你喜欢的包管理器将
@astrojs/deno
适配器 安装到你的项目依赖中。如果你不确定是否使用 npm 的话,可以在终端中运行以下命令:npm install @astrojs/deno
使用下面的修改来更新你的
astro.config.mjsastro.config.mjs
项目配置文件。import { defineConfig } from 'astro/config';import deno from '@astrojs/deno'; export default defineConfig({ output: 'server', adapter: deno(), });
接下来,使用以下修改来更新
package.jsonpackage.json
中的preview
脚本。{ // ... "scripts": { "dev": "astro dev", "start": "astro dev", "build": "astro build", "preview": "astro preview" "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs" } }
你现在可以使用以下命令通过 Deno 在本地预览你生产环境的 Astro 站点。
npm run preview
如何部署 SSR Astro 站点
你可以通过 GitHub Actions 或使用 Deno Deploy 的命令行界面(CLI)将项目部署到 Deno Deploy。
使用 GitHub Actions 进行部署
如果你的项目存储在 GitHub 上,Deno Deploy 网站 将指导你设置 GitHub Actions 来部署你的 Astro 站点。
将你的代码推送到公开或私有的 GitHub 存储仓库。
使用你的 GitHub 账号登录 Deno Deploy,然后单击 New Project。
选择你的存储仓库和要部署的分支,并选择 GitHub Action 模式。(你的 Astro 站点需要一个构建步骤,不能使用 Automatic 模式。)
在你的 Astro 项目中,创建一个名为
.github/workflows/deploy.yml
的新文件,并粘贴下面的 YAML 内容。这类似于 Deno Deploy 提供的 YAML,但还包括你的 Astro 站点所需的其他步骤。name: Deploy on: [push] jobs: deploy: name: Deploy runs-on: ubuntu-latest permissions: id-token: write # 用于 Deno Deploy 身份认证 contents: read # 用于克隆仓库 steps: - name: Clone repository uses: actions/checkout@v4 # 没有使用 npm?请将 `npm ci` 修改为 `yarn install` 或 `pnpm i` - name: Install dependencies run: npm ci # 没有使用 npm?请将 `npm run build` 修改为 `yarn build` 或 `pnpm run build` - name: Build Astro run: npm run build - name: Upload to Deno Deploy uses: denoland/deployctl@v1 with: project: my-deno-project # TODO: 替换为 Deno Deploy 项目的名称 entrypoint: server/entry.mjs root: dist
提交此 YAML 文件,然后推送到你配置的部署分支后,将会自动开始部署!
你可以在 GitHub 存储库页面上的 “Actions” 选项卡上,或在 Deno Deploy 上跟查看部署进度。
使用 CLI 进行部署
安装 Deno Deploy CLI。
deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts
运行 Astro 的构建步骤。
npm run build
运行
deployctl
进行部署!在下面的命令中,将
<ACCESS-TOKEN>
替换为你的 个人访问令牌,将<MY-DENO-PROJECT>
替换为你的 Deno Deploy 项目名称。DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs
你可以在 Deno Deploy 上跟踪所有部署。
(可选) 为了将构建和部署简化为一个命令,可以在
package.jsonpackage.json
中添加一个deploy-deno
脚本。{ // ... "scripts": { "dev": "astro dev", "start": "astro dev", "build": "astro build", "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs", "deno-deploy": "npm run build && deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs" } }
然后你可以使用以下命令一步构建和部署你的 Astro 站点。
DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> npm run deno-deploy
更多部署指南
Recipes如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论