Разверните сайт Jekyll бесплатно с помощью GitHub Actions и хостинга статических сайтов Kinsta

Jekyll — один из самых популярных генераторов статических сайтов (SSG), широко используемый сообществом разработчиков для создания блогов, портфолио и личных веб-сайтов. В этой статье объясняется, как создать сайт Jekyll с помощью GitHub Actions и бесплатно развернуть его с помощью статического хостинга сайтов Kinsta.

Статический хостинг сайтов Kinsta может автоматически создавать сайты из SSG и веб-приложений, созданных на основе Node.js. Для обслуживания другого статического контента, например статических сайтов, созданных Jekyll (построенных на Ruby), нам нужен другой подход.

Требования

Для этого урока мы предполагаем, что у вас есть:

• Опыт работы с Jekyll и Git.

• Веб-сайт Jekyll запущен и работает локально.

Чтобы продолжить, вы можете использовать этот пример кодовой базы в качестве справочника.

Разверните свой веб-сайт Jekyll в Kinsta

Существуют различные способы развертывания вашего веб-сайта Jekyll в Kinsta, например:

• Использование хостинга приложений Kinsta.
• Использование статического хостинга сайтов Kinsta любым из этих методов:
  • А. Здание ваш веб-сайт с помощью непрерывной интеграции и непрерывного развертывания (CI/CD) перед развертыванием в Kinsta.
  • Б. Обслуживание ваших статических файлов только.

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

A. Создайте свой веб-сайт с помощью действий GitHub перед развертыванием в Kinsta.

Этот метод использует рабочий процесс GitHub Actions (GHA) для создания вашего веб-сайта в определенной ветке (deploy) и используйте эту ветку для развертывания сгенерированных статических файлов в Kinsta.

Чтобы использовать этот метод, поскольку мы используем GitHub Actions, ваша кодовая база должна размещаться на GitHub репозиторий (публичный или частный). Но вы можете использовать другие инструменты CI/CD для достижения того же результата.

Наиболее существенными преимуществами этого метода являются:

• Вы можете дополнительно реализовать процессы непрерывной интеграции (CI) для своего сайта, например test и/или lint этап проверки вашего кода.
• Ваш сайт создается автоматически при каждом нажатии на ваш репозиторий. Вам не нужно строить его перед тем, как нажать.
• Вы гарантируете, что ваш веб-сайт будет обновляться только в случае успешного завершения конвейера CI/CD.

Шаги:

1. Откройте свой терминал в корне репозитория вашего сайта Jekyll.
2. Создайте новую сиротскую (пустую) ветку (deploy) и поместите его в свой репозиторий:

git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deploy

Не добавляйте файлы в эту ветку. Он будет автоматически заполнен рабочим процессом GitHub Actions содержимым сгенерированного файла Jekyll. _сайт папка.

3. Оформить заказ main ветвь:

git checkout main

4. Создать .github/рабочие процессы каталог в main.

5. Чтобы настроить GHA, создайте новый файл gh-actions.yml под .github/рабочие процессы со следующим содержанием:

name: Deploy Jekyll
on:
  # The workflow runs only on pushes to the <main> branch
  push:
    branches: ["main"]
    workflow_dispatch:
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
      - name: Set up Jekyll
        run: gem install bundler && bundle install
      - name: Build site
        run: bundle exec jekyll build
        env:
          JEKYLL_ENV: production
      - name: Upload artifact
        uses: actions/upload-artifact@v3
        with:
          name: compiled-site
          path: _site
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
# Commit and push the artifacts to the <deploy> branch
      - uses: actions/checkout@v4
        with:
          ref: deploy
      - name: Download artifacts
        uses: actions/download-artifact@v3
        with:
          name: compiled-site
          path: _site
      - name: Commit and push
      # Replace "<username>" with your GH org or user name
        run: |
          git config user.name "<username>"
          git config user.email "<username>@users.noreply.github.com"
          git pull origin deploy
          git add _site
          git commit -m "Auto generated from ${GITHUB_SHA::7}"
          git push

6. Зафиксируйте и отправьте код в main ветвь.

При каждом нажатии на main ветка, рабочий процесс GitHub Actions:

1. Создает ваш веб-сайт Jekyll со статическими файлами в разделе _сайт.
2. Создает артефакты с содержимым _сайт.
3. Проверяет deploy ветвь.
4. фиксирует _сайт изменения в deploy ветвь.

Чтобы обновить сайт, вам нужно всего лишь отправить изменения в main ветвь.

Не вносите изменения в deploy филиал напрямую. Вы можете заблокировать эту ветку на GitHub, чтобы избежать непреднамеренных отправок.

Посмотрите, как развернуть его в Kinsta ниже.

Б. Создайте свой веб-сайт локально и разверните его непосредственно в Kinsta.

В качестве альтернативы описанному выше методу вы можете создать свой сайт локально (и обновить содержимое _сайт папку локально), затем поместите содержимое папки Jekyll's _сайт папку в репозиторий (на GitHub, GitLab или Bitbucket). Используя этот метод, вам не нужны GH Actions или какой-либо другой инструмент CI/CD для создания сайта при каждом обращении к репозиторию, поэтому он намного проще, чем предыдущий метод.

Недостаток этого метода в том, что вы должен создавайте содержимое вашего сайта перед каждой отправкой в ​​​​репозиторий.

Этот метод использует только содержимое файла _сайт папку и напрямую обслуживает их на хостинге статических сайтов Kinsta.

Шаги:

1. Откройте свое репо .gitignore файл и удалите строку с _site.
2. Зафиксируйте и нажмите _сайт папку в ваш репозиторий.

Чтобы обновить свой веб-сайт, убедитесь, что вы создайте свой сайт с Джекилом прежде чем нажать это в ваш репо.

Разверните свой сайт Jekyll в Kinsta с помощью статического хостинга сайтов

Метод действий GitHub

Если вы использовали рабочий процесс GitHub Actions для создания своего веб-сайта, выполните следующие действия, чтобы развернуть его с помощью статического хостинга сайтов Kinsta.

1. Войдите в свою учетную запись MyKinsta или создайте новую.
2. Перейдите на панель управления MyKinsta.
3. Нажмите значок меню в верхнем левом углу экрана.
4. На боковой панели нажмите Статические сайты.
5. В правом верхнем углу нажмите Добавить сайт.
6. Авторизуйте своего провайдера Git.
7. Выберите свой репозиторий.
8. Выберите deploy филиал как Ветка по умолчанию (где содержание _сайт папка находится).
9. Выбирать Автоматическое развертывание при фиксации для развертывания вашего сайта при каждом нажатии на ваш репозиторий.
10. Добавьте уникальный Отображаемое имя на ваш сайт и нажмите Продолжать.
11. Настройте параметры сборки:
    1. Команда сборки: оставить пустым.
    2. Версия узла: оставить как есть.
    3. Опубликовать каталог: _site.

12. Нажмите Создать сайт.

Kinsta развернет ваш сайт и предложит вам URL-адрес сайта по умолчанию. Затем вы можете добавить свой собственный домен и собственный сертификат SSL, если хотите.

Локальный метод сборки

Если вы использовали метод локальной сборки, выполните те же действия, чтобы развернуть свой веб-сайт. Вам нужно только изменить ветку, из которой вы хотите выполнить развертывание (на шаге 8). Вместо deployиспользовать main или любое другое отделение по вашему выбору.

Краткое содержание

В этой статье представлены два возможных способа развертывания вашего веб-сайта Jekyll с помощью статического хостинга сайтов Kinsta.

Первый метод использует CI/CD для создания приложения и генерации содержимого _сайт папка в другой ветке вашего репозитория. Самыми большими преимуществами использования этого метода с хостингом статических сайтов Kinsta являются:

• С помощью CI/CD вы можете добавить на свой сайт множество процессов.
• Вы развертываете свой сайт на превосходном хостинге и обслуживаете его с максимальной производительностью.
• Вам не нужна премиум-учетная запись GitHub, чтобы сохранить конфиденциальность вашего репозитория (как, например, если вы используете GitHub Pages).

Во втором методе мы собираем Jekyll локально и помещаем содержимое _сайт папку в ту же ветку, что и остальные файлы Jekyll. Это можно повторить для репозиториев, размещенных у других поставщиков Git (GitLab и Bitbucket), без необходимости дополнительной настройки. Это самый простой метод, но он сопряжен с неудобствами, связанными с необходимостью создавать сайт перед каждым переходом в репозиторий.

В дополнение к этим опциям вы можете выбрать развертывание своего сайта Jekyll с помощью хостинга приложений Kinsta. Он обеспечивает большую гибкость хостинга, более широкий спектр преимуществ и доступ к более надежным функциям. Например, масштабируемость, индивидуальное развертывание с использованием Dockerfile и комплексная аналитика, охватывающая данные в реальном времени и исторические данные.

Дополнительные статьи о статических веб-сайтах читайте в блоге Kinsta.