title | description | type | i18nReady |
---|---|---|---|
部署你的 Astro 站点至 GitLab Pages |
如何使用 GitLab Pages 将你的 Astro 网站部署到网络上。 |
deploy |
true |
import { Steps } from '@astrojs/starlight/components';
你可以使用 GitLab Pages 为你的 GitLab 项目、组或用户账号托管 Astro 网站。
:::tip[正在寻找示例?] 看一看 GitLab Pages 官方的 Astro 示例项目! :::
1. 在 `astro.config.mjs` 文件中设置正确的 `site`。-
将
public/
文件夹重命名为static
。 -
在
astro.config.mjs
文件中设置outDir:public
。这会告诉 Astro 将静态构建输出放在public
目录下,该目录是 GitLab Pages 指定的静态资源存放位置。如果你在 Astro 项目中使用
public/
目录 存放静态资源,你需要重命名该目录,并在astro.config.mjs
文件中将publicDir
的值改为新的目录名。例如,当
public/
目录被重命名为static/
,正确的astro.config.mjs
文件设置则如下:import { defineConfig } from 'astro/config'; export default defineConfig({ site: 'https://<user>.gitlab.io', base: '/<project-name>', outDir: 'public', publicDir: 'static', });
-
在项目根目录下创建一个名为
.gitlab-ci.yml
的文件,文件内容如下。这样,每当你对项目内容作出更改,该文件便会自动构建并部署你的站点。pages: # 用于构建你的应用的 Docker 镜像 image: node:lts before_script: - npm ci script: # 在这里指定构建你的应用所需的步骤 - npm run build artifacts: paths: # 包含用于发布的构建文件的文件夹 # 必须命名为"public" - public only: # 仅在推送到以下分支时, # 触发新的构建和部署 - main