Сборка проекта на GitHub и деплой на домен

Пошаговое руководство по сборке и хостингу сайта внутри экосистемы GitHub, используя свой домен. Настройка репозитория и экшена, подключение своего домена к GitHub для автоматической сборки и публикации (развёртывания) сайта.

В статье используется бесплатный аккаунт GitHub, сборка на генераторе статических сайтов Eleventy и домен на reg.ru, в других случаях шаги и настройки могут несколько отличаться.

Для выполнения этого руководства необходимо заранее создать репозиторий GitHub и выгрузить в него файлы проекта на Eleventy. Репозиторий обязательно должен быть публичным (Public), если у вас базовый тариф GitHub.

Шаг 1. Настройка репозитория

Переходим в свой репозиторий с кодом > Settings > Pages. В разделе Build and deployment, параметру Source устанавливаем значение GitHub Actions. В разделе Custom domain указываем наше доменное имя, например example.com, нажимаем Save.

На этом этапе возникнет ошибка проверки DNS, так и должно быть.

Шаг 2. Настройка DNS-записей

В настройках домена нужно настроить ресурсные записи. Перейти в личный кабинет рег.ру > выбрать услугу нашего домена > DNS-серверы и управление зоной. Для домена должны быть указаны DNS-серверы ns1.reg.ru и ns2.reg.ru (это когда домен не подключён к хостингу). Ниже: Ресурсные записи > Добавить запись.

Нужно создать 4 ресурсные A-записи. В поле Subdomain для назначения IP-адреса самому домену example.com указываем @. А в поле IP Address добавляем следующие адреса (для каждого отдельно создаём новую ресурсную запись):

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Аналогично создать 4 ресурсные AAAA-записи для поддержки IPv6, где указать @ и следующие адреса:

2606:50c0:8000::153
2606:50c0:8001::153
2606:50c0:8002::153
2606:50c0:8003::153

И ещё создать запись CNAME с указанием www и mitorun-studio.github.io.

Шаг 3. Верифицирование домена на GitHub

Зайти в аккаунт GitHub > Настройки > GitHub Pages. В раздел с доменами нужно внести наш домен, там выдадут TXT-запись, которую нужно добавить в ресурсные записи домена на reg.ru. После вернуться на страницу GitHub и нажать там Подтвердить.

Шаг 4. Ещё немного настройки Pages

Переходим в свой репозиторий с кодом > Settings > Pages. В разделе Custom domain, где отображается ошибка (InvalidDNSError), нажимаем кнопку Check again. Если ошибка осталось, необходимо подождать, пока обновятся DNS записи и попробовать ещё раз позже. Ниже отмечаем флажок HTTPS.

Шаг 5. Создаём экшен

В репозитории создаём в корне файл: Add file > Create new file, вставляем этот путь и название файла: .github/workflows/deploy.yml

Добавляем в файл следующий код:

name: Deploy static content to Pages

on:
  # Этот экшен собирает и публикует сайт, когда мы делаем пуш в ветку main (если необходимо, можно изменить название ветки в этом блоке):
  push:
    branches: ["main"]
  # Этот код разрешает запуск экшена вручную:
  workflow_dispatch:

# Этот код получает разрешения на работу с GitHub Pages:
permissions:
  contents: read
  pages: write
  id-token: write

# Настраиваем преоритезацию и запрещаем отмену во время процесса:
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # сборка и публикация:
  deploy:
    environment:
      name: github-pages
      url: $
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18]
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: $NaN

      - run: set -eu
# Сборка с помощью скрипта build, если проект собирается с помощью скрипта с другим названием, его можно поменять тут:
      - run: npm i
      - run: npm run build
      - uses: actions/configure-pages@v3
      - uses: actions/upload-pages-artifact@v2
        with:
          # Публикация проекта, тут можно изменить имя публикуемой папки:
          path: 'site'
        id: deployment
      - uses: actions/deploy-pages@v2

В строке node-version: [18] нужно указать текущую версию NODE проекта.

Сохраняем изменения: Commit changes, не забываем сделать коммит и пуш в репозиторий.

Если всё сделано правильно, при следующем пуше в выбраную ветку сайт автоматический обновится на домене example.com. Также, публикацию можно инициировать вручную, запустив экшен deploy в разделе Actions репозитория.

Дополнения

Ограничения этого способа развёртывания сайта: файлы сайта не должны превышать 100 МБ, объём всех (опубликованных) репозиториев GitHub Pages не более 1 ГБ, предел пропускной способности 100 ГБ в месяц, не более 10 сборок в час (не применяется для пользовательского рабочего процесса GitHub Actions), время развётывания сайта ограничено 10 минутами.