将 Astro 站点部署到 GitHub Pages
你可以使用 GitHub Pages 直接从 GitHub.com 上的存储库托管 Astro 网站。
¥You can use GitHub Pages to host an Astro website directly from a repository on GitHub.com.
如何部署
标题部分 如何部署¥How to deploy
你可以使用 GitHub Actions 自动构建和部署你的网站,将 Astro 网站部署到 GitHub Pages。为此,你的源代码必须托管在 GitHub 上。
¥You can deploy an Astro site to GitHub Pages by using GitHub Actions to automatically build and deploy your site. To do this, your source code must be hosted on GitHub.
Astro 维护了官方的 withastro/action
,只需很少的配置即可部署你的项目。按照以下说明将 Astro 站点部署到 GitHub 页面,如果需要更多信息,请参阅 包自述文件。
¥Astro maintains the official withastro/action
to deploy your project with very little configuration. Follow the instructions below to deploy your Astro site to GitHub pages, and see the package README if you need more information.
为 GitHub Pages 配置 Astro
标题部分 为 GitHub Pages 配置 Astro¥Configure Astro for GitHub Pages
部署到 github.io
URL
标题部分 部署到 github.io URL¥Deploying to a github.io
URL
在 astro.config.mjs
中设置 site
和 base
选项。
¥Set the site
and base
options in astro.config.mjs
.
import { defineConfig } from 'astro/config'
export default defineConfig({ site: 'https://astronaut.github.io', base: 'my-repo',})
site
标题部分 sitesite
的值必须是以下之一:
¥The value for site
must be one of the following:
-
以下基于你的用户名的 URL:
https://<username>.github.io
-
为 GitHub 组织的私有页面 自动生成的随机 URL:
https://<random-string>.pages.github.io/
base
标题部分 base可能需要 base
的值,以便 Astro 将你的存储库名称(例如 /my-repo
)视为你网站的根目录。
¥A value for base
may be required so that Astro will treat your repository name (e.g. /my-repo
) as the root of your website.
base
的值应该是你的存储库名称,以正斜杠开头,例如 /my-blog
。这是为了让 Astro 知道你网站的根目录是 /my-repo
,而不是默认的 /
。
¥The value for base
should be your repository’s name starting with a forward slash, for example /my-blog
. This is so that Astro understands your website’s root is /my-repo
, rather than the default /
.
使用带有自定义域的 GitHub 页面
标题部分 使用带有自定义域的 GitHub 页面¥Using GitHub pages with a custom domain
要配置 Astro 以使用带有自定义域的 GitHub 页面,请将你的域设置为 site
的值。不要为 base
设置值:
¥To configure Astro for using GitHub pages with a custom domain, set your domain as the value for site
. Do not set a value for base
:
import { defineConfig } from 'astro/config'
export default defineConfig({ site: 'https://example.com',})
配置 GitHub 操作
标题部分 配置 GitHub 操作¥Configure a GitHub Action
-
Create a new file in your project at
.github/workflows/deploy.yml
and paste in the YAML below.deploy.yml name: Deploy to GitHub Pageson:# Trigger the workflow every time you push to the `main` branch# Using a different branch name? Replace `main` with your branch’s namepush:branches: [ main ]# Allows you to run this workflow manually from the Actions tab on GitHub.workflow_dispatch:# Allow this job to clone the repo and create a page deploymentpermissions:contents: readpages: writeid-token: writejobs:build:runs-on: ubuntu-lateststeps:- name: Checkout your repository using gituses: actions/checkout@v4- name: Install, build, and upload your siteuses: withastro/action@v3# with:# path: . # The root location of your Astro project inside the repository. (optional)# node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional)# package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)deploy:needs: buildruns-on: ubuntu-latestenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}steps:- name: Deploy to GitHub Pagesid: deploymentuses: actions/deploy-pages@v4 -
On GitHub, go to your repository’s Settings tab and find the Pages section of the settings.
-
Choose GitHub Actions as the Source of your site.
-
Commit the new workflow file and push it to GitHub.
你的网站现在应该可以发布了!当你将更改推送到 Astro 项目的存储库时,GitHub Action 会自动为你部署它们。
¥Your site should now be published! When you push changes to your Astro project’s repository, the GitHub Action will automatically deploy them for you.