Разверните свой сайт Astro на GitHub Pages

Вы можете использовать GitHub Pages, чтобы разместить в Интернете сайт Astro прямо из репозитория на GitHub.com.

Как развернуть

Вы можете развернуть сайт Astro на GitHub Pages, используя GitHub Actions чтобы автоматически собрать и развернуть свой сайт. Для этого исходный код сайта должен располагаться на GitHub.

Astro поддерживает официальный withastro/action чтобы развернуть ваш сайт с минимальной конфигурацией. Следуйте инструкциям ниже, чтобы развернуть свой сайт Astro на GitHub Actions, и смотрите README проекта для дополнительной информации.

Настройте Astro для GitHub Pages

Развёртывание на `github.io` URL

Установите опции site (EN) и base (EN) в astro.config.mjs.

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://astronaut.github.io',
  base: 'my-repo',
})

`site`

Значение site должно быть одним из следующих:

Следующий URL на основе вашего имени пользователя: https://<имя-пользователя>.github.io
Случайный URL, автоматически сгенерированный для приватной страницы организации GitHub: https://<случайная-строка>.pages.github.io/

`base`

Значение base может быть необходимо, чтобы Astro считал имя репозитория (например /my-repo) как корень вашего сайта.

:::noteНе устанавливайте параметр base, если:

Ваша страница развёрнута из корневой директории.
Ваш репозиторий расположен на https://github.com/<ИМЯ-ПОЛЬЗОВАТЕЛЯ>/<ИМЯ-ПОЛЬЗОВАТЕЛЯ>.github.io.:::

Значение для base должно быть именем репозитория, начинающееся с косой черты, например /my-blog. Благодаря этому Astro понимает, что корнем вашего сайта является /my-repo, а не / (по умолчанию).

:::cautionКогда это значение настроено, все внутренние ссылки на страницы должны начинаться с вашего значения base:

<a href="/my-repo/about">О проекте</a>

Узнайте больше о настройке значения base (EN):::

Использование GitHub Pages с кастомным доменом

:::tip[Настройка кастомного домена]Вы можете настроить кастомный домен, добавив следующий ./public/CNAME файл в свой проект:

sub.mydomain.com

Благодаря этому сайт будет развёрнут на ваш кастомный домен вместо user.github.io. Не забудьте также настроить DNS для своего провайдера домена.
:::

Чтобы настроить Astro для использования GitHub pages с кастомным доменом, установите своё доменное имя как значение для site. Не устанавливайте значение для base:

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://example.com',
})

Настройте GitHub Action

Создайте в вашем проекте новый файл с именем .github/workflows/deploy.yml и вставьте в него следующий YAML.

name: Deploy to GitHub Pages

on:
  # Вызывать workflow при каждом пуше в ветку `main`
  # Используете другое имя для ветки? Замените `main` на имя своей ветки
  push:
    branches: [ main ]
  # Разрешает запускать этот workflow вручную с вкладки Actions на GitHub.
  workflow_dispatch:
  
# Разрешить этому workflow клонировать репозиторий и создавать развёртывание Pages
permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout your repository using git
        uses: actions/checkout@v4
      - name: Install, build, and upload your site
        uses: withastro/action@v3
        # with:
          # path: . # Корень вашего проекта Astro внутри репозитория (опционально)
          # node-version: 20 # Версия Node, которую следует использовать для сборки сайта. По умолчанию 20. (опционально)
          # package-manager: pnpm@latest # Менеджер пакетов Node, который следует использовать для установки зависимостей и сборки сайта. Автоматически определяется на основе лок-файла. (опционально)

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

:::noteAction Astro принимает несколько опциональных значений, которые могут быть переданы путём раскомментирования строки с with и нужной строки.:::

:::cautionОфициальный Astro action сканирует лок-файл для определения предпочтительного пакетного менеджера (npm, yarn, pnpm, или bun). Вы должны закоммитить автоматически сгенерированный пакетным менеджером файл package-lock.json, yarn.lock, pnpm-lock.yaml, или bun.lockb в свой репозиторий.:::

(Опционально) Если вы передаёте переменные среды в свой проект Astro во время локальной разработки или превью-сборок, вам необходимо определить публичные переменные в файле deploy.yml, чтобы они были обработаны во время развёртывания на GitHub Pages. (Смотрите документацию GitHub по установке секретов для добавления приватных переменных среды.)
```
jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
       - name: Install, build, and upload your site
         uses: withastro/action@v3
         env:
           # Используйте одинарные кавычки для значения переменной
           PUBLIC_EVM_WALLET_ADDRESS: '0x4bFc229A40d41698154336aFF864f61083E76659'
```
На GitHub, перейдите в настройки вашего репозитория (вкладка Settings) и найдите секцию Pages.
Выберите GitHub Actions как Source (источник) вашего сайта.
Сделайте коммит нового файла workflow и запушьте на GitHub.