将你的 Astro 站点部署到 Netlify

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

¥Netlify offers hosting and serverless backend services for web applications and static websites. Any Astro site can be hosted on Netlify!

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

¥This guide includes instructions for deploying to Netlify through the website UI or Netlify’s CLI.

项目配置

¥Project Configuration

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

¥Your Astro project can be deployed to Netlify in three different ways: as a static site, a server-rendered site, or an edge-rendered site.

静态站点

¥Static Site

默认情况下，你的 Astro 项目是静态站点。你不需要任何额外的配置即可将静态 Astro 站点部署到 Netlify。

¥Your Astro project is a static site by default. You don’t need any extra configuration to deploy a static Astro site to Netlify.

SSR 适配器

¥Adapter for SSR

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

¥Add the Netlify adapter to enable SSR in your Astro project and deploy to Netlify with the following astro add command. This will install the adapter and make the appropriate changes to your astro.config.mjs file in one step.

npx astro add netlify

如果你更愿意手动安装适配器，请完成以下两个步骤：

¥If you prefer to install the adapter manually instead, complete the following two steps:

Install the @astrojs/netlify adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:
终端窗口
```
npm install @astrojs/netlify
```
Add two new lines to your astro.config.mjs project configuration file.
astro.config.mjs
```
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

export default defineConfig({
  output: 'server',
  adapter: netlify(),
});
```
You can also deploy your project’s Astro middleware using Netlify’s Edge Functions by adding edgeMiddleware: true to the Netlify adapter’s configuration:
astro.config.mjs
```
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';

export default defineConfig({
  output: 'server',
  adapter: netlify({
    edgeMiddleware: true
  }),
});
```
To run middleware for pre-rendered pages, set edgeMiddleware: true. This allows you to use middleware to implement authentication, redirects, or similar things, while still using static HTML output.

如何部署

¥How to deploy

你可以通过网站 UI 或使用 Netlify 的 CLI（命令行接口）部署到 Netlify。对于静态站点和 SSR Astro 站点，该过程是相同的。

¥You can deploy to Netlify through the website UI or using Netlify’s CLI (command line interface). The process is the same for both static and SSR Astro sites.

网站 UI 部署

¥Website UI Deployment

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

¥If your project is stored in GitHub, GitLab, BitBucket, or Azure DevOps, you can use the Netlify website UI to deploy your Astro site.

Click Add a new site in your Netlify dashboard
Choose Import an existing project

When you import your Astro repository from your Git provider, Netlify should automatically detect and pre-fill the correct configuration settings for you.
Make sure that the following settings are entered, then press the Deploy button:
- Build Command: astro build or npm run build
- Publish directory: dist
After deploying, you will be redirected to the site overview page. There, you can edit the details of your site.

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

¥Any future changes to your source repository will trigger preview and production deploys based on your deployment configuration.

`netlify.toml` 文件

¥netlify.toml file

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

¥You can optionally create a new netlify.toml file at the top level of your project repository to configure your build command and publish directory, as well as other project settings including environment variables and redirects. Netlify will read this file and automatically configure your deployment.

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

¥To configure the default settings, create a netlify.toml file with the following contents:

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

More info at “Deploying an existing Astro Git repository” on Netlify’s blog

CLI 部署

¥CLI Deployment

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

¥You can also create a new site on Netlify and link up your Git repository by installing and using the Netlify CLI.

Install Netlify’s CLI globally
终端窗口
```
npm install --global netlify-cli
```
Run netlify login and follow the instructions to log in and authorize Netlify
Run netlify init and follow the instructions
Confirm your build command (astro build)

The CLI will automatically detect the build settings (astro build) and deploy directory (dist), and will offer to automatically generate a netlify.toml file with those settings.
Build and deploy by pushing to Git

The CLI will add a deploy key to the repository, which means your site will be automatically rebuilt on Netlify every time you git push.

More details from Netlify on Deploy an Astro site using the Netlify CLI

设置 Node.js 版本

¥Set a Node.js Version

如果你在 Netlify 上使用旧版建立形象 (Xenial)，请确保设置你的 Node.js 版本。Astro 需要 v18.17.1 或 v20.3.0 或更高版本。

¥If you are using a legacy build image (Xenial) on Netlify, make sure that your Node.js version is set. Astro requires v18.17.1 or v20.3.0 or higher.

你可以使用在 Netlify 中指定你的 Node.js 版本：

¥You can specify your Node.js version in Netlify using:

基目录中的 .nvmrc 文件。
使用 Netlify 项目仪表板在站点设置中添加 NODE_VERSION 环境变量。

使用 Netlify 函数

¥Using Netlify Functions

无需特殊配置即可将 Netlify Functions 与 Astro 结合使用。将 netlify/functions 目录添加到你的项目根目录并按照 Netlify 函数文档开始！

¥No special configuration is required to use Netlify Functions with Astro. Add a netlify/functions directory to your project root and follow the Netlify Functions documentation to get started!