跳转到内容

将你的 Astro 网站部署到 Netlify

Netlify 为 Web 应用程序和静态网站提供托管和无服务器后端服务。任何 Astro 网站都可以托管在 Netlify 上！

本指南包含通过网站 UI 或 Netlify 的 CLI 部署到 Netlify 的说明。

项目配置

你的 Astro 项目可以通过三种不同的方式部署到 Netlify：作为静态站点、服务器端渲染站点或边缘渲染站点。

静态站点

你的 Astro 项目默认是静态站点。你无需任何额外配置即可将静态 Astro 网站部署到 Netlify。

按需渲染适配器

添加 Netlify 适配器以在你的 Astro 项目中启用按需渲染，并使用以下 astro add 命令部署到 Netlify。此操作将一步完成适配器的安装并对你的 astro.config.mjs 文件进行适当的更改。

npx astro add netlify

若要手动安装，或了解更多配置选项，例如使用 Netlify 的边缘函数（Edge Functions）部署项目的 Astro 中间件，请参阅 Netlify 适配器指南。

如何部署

你可以通过网站 UI 或使用 Netlify 的 CLI（命令行界面）部署到 Netlify。对于静态和按需渲染的 Astro 网站，部署过程是相同的。

网站 UI 部署

如果你的项目存储在 GitHub、GitLab、BitBucket 或 Azure DevOps 中，你可以使用 Netlify 网站 UI 来部署你的 Astro 网站。

在你的 Netlify 仪表盘中点击 添加新站点
选择 导入现有项目

当你从你的 Git 提供商导入你的 Astro 仓库时，Netlify 应该会自动检测并为你预填正确的配置设置。
确保输入了以下设置，然后按 部署 按钮
- 构建命令： astro build 或 npm run build
- 发布目录： dist
部署后，你将被重定向到站点概览页面。在那里，你可以编辑你的站点详细信息。

未来对源仓库的任何更改都将根据你的部署配置触发预览和生产部署。

`netlify.toml` 文件

你可以选择在你的项目仓库的顶层创建一个新的 netlify.toml 文件来配置你的构建命令和发布目录，以及其他项目设置，包括环境变量和重定向。Netlify 将读取此文件并自动配置你的部署。

要配置默认设置，请创建一个包含以下内容的 netlify.toml 文件

[build]
  command = "npm run build"
  publish = "dist"

更多信息请参阅 Netlify 博客上的 “部署现有的 Astro Git 仓库”

CLI 部署

你还可以在 Netlify 上创建一个新站点，并通过安装和使用 Netlify CLI 来关联你的 Git 仓库。

全局安装 Netlify CLI
终端窗口
```
npm install --global netlify-cli
```
运行 netlify login 并按照说明登录和授权 Netlify
运行 netlify init 并按照说明操作
确认你的构建命令（astro build）

CLI 将自动检测构建设置（astro build）和部署目录（dist），并会提供自动生成包含这些设置的 netlify.toml 文件的选项。
通过推送到 Git 来构建和部署

CLI 会向仓库添加一个部署密钥，这意味着每次你 git push 时，你的网站都会在 Netlify 上自动重新构建。

有关 Netlify 的更多详细信息，请参阅使用 Netlify CLI 部署 Astro 网站

设置 Node.js 版本

如果你在 Netlify 上使用旧的构建镜像（Xenial），请确保已设置你的 Node.js 版本。Astro 要求 v18.20.8 或 v20.3.0 或更高版本。

你可以通过以下方式在 Netlify 中指定你的 Node.js 版本

在你的基本目录中放置一个 .nvmrc 文件。
在你的网站设置中使用 Netlify 项目仪表板设置一个 NODE_VERSION 环境变量。

使用 Netlify Functions

使用 Netlify Functions 和 Astro 无需特殊配置。在你的项目根目录中添加一个 netlify/functions 目录，并遵循 Netlify Functions 文档开始！

示例

使用表单、无服务器函数和重定向部署 Astro 网站 — Netlify 博客
部署演示视频 — Netlify YouTube 频道

更多部署指南

贡献社区赞助