Хостинг статического сайта из репозитория с помощью SourceCraft Sites

SourceCraft Sites — инструмент для бесплатного хостинга статического сайта без необходимости настройки серверной инфраструктуры. Сайт публикуется на основе файлов, которые размещены в публичном репозитории публичной организации SourceCraft.

Статический сайт строится на клиентских технологиях, таких как HTML, CSS и JavaScript. Он не может содержать каких-либо скриптов, требующих запуска на стороне веб-сервера. Вы можете использовать любые генераторы статических сайтов, например: Jekyll, Hugo, Gatsby и др.

Доступ к сайтам, размещенным в SourceCraft Sites, осуществляется по защищенному протоколу HTTPS. Загрузка собственного TLS-сертификата не требуется.

В этом руководстве вы настроите хостинг статического сайта из репозитория с помощью SourceCraft Sites.

Подробнее о SourceCraft Sites

Чтобы настроить хостинг:

  1. Подготовьтесь к работе
  2. Создайте репозиторий из шаблона
  3. Отредактируйте исходные файлы
  4. Проверьте работоспособность сайта

Если сайт вам больше не нужен, снимите его с публикации.

Подготовьтесь к работе

  1. Аутентифицируйтесь в SourceCraft на главной странице сервиса или зарегистрируйтесь.

    Важно

    Публикация сайта возможна только из публичного репозитория в публичной организации.

    Если вы работаете в приватной организации, измените настройки ее видимости или создайте новую публичную организацию.

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

Создайте репозиторий из шаблона

  1. Откройте главную страницу сервиса.

  2. На панели слева нажмите Создать репозиторий.

  3. В открывшемся окне выберите Репозиторий из шаблона.

  4. Рядом с шаблоном sites-landing нажмите Использовать шаблон.

    На основе репозитория для этого шаблона развернут лендинг SourceCraft Sites.

    Чтобы посмотреть содержимое шаблона, нажмите Предварительный просмотр.

    Шаблон содержит предустановленную конфигурацию SourceCraft Sites, а также типовые файлы проекта.

  5. В блоке Сведения о новом репозитории:

    • В поле Владелец выберите организацию, в которой будет создан репозиторий.

    • В поле Название укажите название репозитория.

      Название должно быть уникальным в пределах организации и может содержать следующие ASCII-символы: строчные и заглавные буквы латинского алфавита, цифры, запятые, дефисы и подчеркивания.

      Под названием отображается адрес, по которому репозиторий будет доступен.

    • (опционально) В поле Описание укажите описание репозитория.

  6. В поле Видимость выберите тип доступа к репозиторию Публичный — доступ к просмотру репозитория будут иметь все пользователи интернета без аутентификации. Доступ к изменению репозитория будут иметь только приглашенные пользователи.

    Важно

    Публикация сайта возможна только из публичного репозитория в публичной организации.

    Если вы работаете в приватном или внутреннем репозитории, измените настройки его видимости или создайте новый публичный репозиторий.

  7. Нажмите Создать репозиторий.

Отредактируйте исходные файлы

  1. Посмотрите содержимое созданного репозитория.

    В репозитории расположены следующие элементы для статического сайта:

    • файл конфигурации SourceCraft Sites — .sourcecraft/sites.yaml;
    • файл конфигурации СI/CD — .sourcecraft/ci.yaml;
    • исходники для генерации сайта.

    Подробнее о структуре репозитория и об используемых технологиях см. в файле README.md.

    Конфигурация SourceCraft Sites в репозитории уже преднастроена так, что шаблонный сайт будет доступен по адресу https://<слаг_организации>.sourcecraft.site/<название_репозитория> в течение нескольких минут после создания репозитория.

  2. Отредактируйте файл .sourcecraft/sites.yaml, нажав Редактировать в правом верхнем углу, или оставьте настройки по умолчанию.

    Конфигурация SourceCraft Sites задается для конкретного репозитория и хранится в файле .sourcecraft/sites.yaml. Для всего репозитория действует конфигурация, которая размещена в основной ветке, например master или main.

    Общий вид конфигурации SourceCraft Sites в .sourcecraft/sites.yaml:

    site:
  root: "<путь_к_директории_с_файлами_сайта>"
  ref: "<ветка_или_тег>"

    Где:

    • root — абсолютный путь от корня репозитория до директории с файлами сайта, например site. Опциональный параметр. По умолчанию — корень репозитория.

      Совет

      Рекомендуем использовать для главной страницы сайта файл index.html.

    • ref — название ветки или тега, файлы из которых будут использованы для публикации статического сайта, например release. Опциональный параметр. По умолчанию — основная ветка репозитория. После внесения изменений в ветку сайт обновляется автоматически в течение нескольких минут.

  3. Аналогичным образом измените содержимое в директории src, например:

    • Поменяйте конфигурацию основной страницы сайта src/pages/index.yaml на нужную вам — по умолчанию там находится конфигурация для лендинга SourceCraft Sites. Не меняйте имя файла index.yaml.
    • Добавьте свои CSS-файлы или React-компоненты. Пример конфигурации есть в файле page-builder.config.yml.

  4. Сохраните изменения в основной ветке репозитория.

Проверьте работоспособность сайта

В соответствии с конфигурацией .sourcecraft/ci.yaml после внесения изменений в основную ветку репозитория main автоматически запускается рабочий процесс build-site, в котором:

  1. Из исходных файлов в директории src в ветке main генерируются файлы сайта.
  2. Файлы сайта публикуются в директории site в ветке release.

Чтобы проверить работоспособность сайта:

  1. На странице репозитория в разделе Код перейдите в секцию CI/CD.
  2. В списке запусков автоматизаций вы увидите новый запуск. Дождитесь, когда статус изменится на Успех.
  3. На главной странице репозитория на панели слева в блоке Выкладки перейдите по ссылке.

Соберите сайт локально

Опционально вы можете собрать и проверить сайт локально:

  1. Склонируйте репозиторий:

    git clone https://git@git.sourcecraft.dev/<слаг_организации>/<название_репозитория>.git

  2. Установите Node.js версии 18 или выше.

    Для установки рекомендуется использовать Node Version Manager.

  3. Перейдите в директорию с репозиторием и соберите проект:

    cd <название_репозитория>
npm ci
npm run build

  4. Откройте файл site/index.html в браузере.

Снимите сайт с публикации

Если сайт вам больше не нужен, в основной ветке репозитория очистите содержимое файла .sourcecraft/sites.yaml или удалите репозиторий.

Предыдущая
Настройка CI/CD для развертывания Serverless Containers с помощью GitHub Actions
Следующая
Взаимосвязь ресурсов