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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  5. В блоке Шаблон репозитория нажмите Просмотр шаблонов и выберите шаблон sites-landing.

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

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

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

  6. Нажмите Использовать шаблон.

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

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

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

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

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

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

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

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

  2. Склонируйте созданный репозиторий:

    1. Установите Git.

    2. На странице репозитория в правом верхнем углу нажмите кнопку Клонировать.

    3. Скопируйте ссылку для клонирования репозитория из поля HTTPS.

    4. В терминале выполните команду:

      git clone <ссылка_для_клонирования_репозитория>

    5. Введите произвольное имя пользователя.

    6. В качестве пароля укажите персональный токен.

    7. Перейдите в склонированный репозиторий:

      cd <имя_репозитория>

  3. Отредактируйте файл .sourcecraft/sites.yaml или оставьте настройки по умолчанию.

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

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

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

    Где:

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

      Совет

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

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

  4. Если вы отредактировали .sourcecraft/sites.yaml, внесите измененный файл в индекс git, сделайте коммит и отправьте изменения в основную ветку репозитория:

    git add .sourcecraft/sites.yaml
git commit -m "Updated site configuration"
git push -u origin main

  5. Если в конфигурации .sourcecraft/sites.yaml вы указали ветку для публикации сайта, отличную от основной, создайте эту ветку и переключитесь на нее:

    git checkout -b <название_ветки_для_публикации_сайта>
git push -u origin <название_ветки_для_публикации_сайта>

  6. Измените содержимое в директории src, например:

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

Соберите проект

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

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

  2. Соберите проект:

    npm ci
npm run build

    По умолчанию при сборке директория site/ будет очищена и перезаписана новыми файлами статического сайта. Если в настройках .sourcecraft/sites.yaml вы изменили директорию с сайтом, укажите ее в файле package.json.

Внесите изменения

Добавьте новые и измененные файлы в индекс git, сделайте коммит и отправьте изменения в ветку репозитория, указанную в .sourcecraft/sites.yaml:

git add .
git commit -m "Updated site files"
git push -u origin <название_ветки_для_публикации_сайта>

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

После внесения изменений в ветку, указанную в .sourcecraft/sites.yaml, сайт обновляется автоматически в течение нескольких минут.

Перейдите в браузере по адресу https://<слаг_организации>.sourcecraft.site/<название_репозитория> и проверьте работоспособность сайта.

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

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

git checkout -b main origin/main
git rm .sourcecraft/sites.yaml
git commit -m "Deleted site configuration"
git push -u origin main
Предыдущая
Настройка CI/CD с Yandex Cloud Functions
Следующая
Взаимосвязь ресурсов