Начало работы с Jekyll

Создание репозитория сайта

При создании репозитория сайта есть два варианта в зависимости от ваших потребностей:

Вариант 1. Использовать стартовый шаблон (рекомендуется)

Этот подход упрощает обновления, устраняет лишние файлы и идеально подходит для пользователей, которые хотят сосредоточиться на написании с минимальной настройкой.

1. Войдите в GitHub и откройте страницу starter.
2. Нажмите кнопку Use this template, затем выберите Create a new repository.
3. Назовите новый репозиторий <username>.github.io, где username — ваш логин GitHub в нижнем регистре.

Вариант 2. Форкнуть тему

Этот подход удобен для изменения функционала или дизайна интерфейса, но усложняет обновления. Если вы не знакомы с Jekyll и не планируете серьёзно менять тему, не используйте этот метод.

1. Войдите в GitHub.
2. Сделайте форк репозитория темы.
3. Назовите новый репозиторий <username>.github.io, где username — ваш логин GitHub в нижнем регистре.

Настройка окружения

После создания репозитория пора настроить среду разработки. Есть два основных способа:

Использование Dev Containers (рекомендуется для Windows)

Dev Containers предоставляет изолированную среду с Docker, избегая конфликтов с системой и управляя зависимостями внутри контейнера.

Шаги:

1. Установите Docker:
   • Для Windows/macOS установите Docker Desktop.
   • Для Linux установите Docker Engine.
2. Установите VS Code и расширение Dev Containers.
3. Клонируйте репозиторий:
   • Для Docker Desktop: запустите VS Code и клонируйте репозиторий в контейнерный том.
   • Для Docker Engine: клонируйте репозиторий локально, затем откройте папку в контейнере через VS Code (инструкция).
4. Дождитесь завершения настроек Dev Containers.

Локальная настройка (рекомендуется для Unix‑подобных систем)

Для Unix‑подобных систем вы можете настроить окружение локально; это альтернатива Dev Containers.

Шаги:

1. Установите Jekyll, следуя инструкции по установке Jekyll и убедитесь, что установлен Git.
2. Клонируйте репозиторий на локальную машину.
3. Если вы форкнули тему, установите Node.js и выполните в корне репозитория bash tools/init.sh.
4. В корне репозитория выполните bundle для установки зависимостей.

Использование

Запуск Jekyll-сервера

Для локального запуска сайта используйте:

$ bundle exec jekyll serve

Внесение изменений и проверка на Jekyll‑сервере

Внимание При запуске сайта локально с помощью Jekyll важно правильно управлять и проверять изменения! {: .prompt-warning }

Ниже приведены рекомендации по безопасному внесению изменений и проверке сайта во время работы сервера.

---

1. Остановите сервер

Перед внесением изменений остановите локальный сервер. В терминале используйте комбинацию клавиш:

Ctrl + C

Эта команда остановит сервер и позволит безопасно внести изменения.

---

2. Очистите сайт

После внесения изменений рекомендуется очистить кэш и временные файлы, создаваемые Jekyll:

$ bundle exec jekyll clean

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

---

3. Перезапустите сайт

Для перезапуска сайта используйте:

$ bundle exec jekyll s --incremental --limit_posts 10

• --incremental: пересобирает только изменённые части сайта, что экономит время.
• --limit_posts 10: загружает только 10 постов, что ускоряет запуск.

---

4. Проверьте сайт

После запуска сервера проверьте сайт по адресу:

http://127.0.0.1:4000

Откройте сайт в браузере и убедитесь в корректности внесённых изменений.

---

5. Рекомендации

• Перед крупными изменениями всегда останавливайте сервер и выполняйте очистку.
• Параметр --incremental ускоряет пересборку, но для значительных изменений рекомендуется полная очистка и повторная сборка.

Эти шаги помогут упростить работу с Jekyll и эффективно управлять локальным сервером.

Если вы используете Dev Containers, выполняйте эти команды в терминале VS Code. {: .prompt-info }

Через несколько секунд локальный сервер будет доступен по адресу http://127.0.0.1:4000.

Настройка

Обновите переменные в файле _config.yml по мере необходимости. Часто настраиваемые параметры включают:

• url
• avatar
• timezone
• lang

Варианты контактной информации

Варианты отображения социальных и контактных ссылок находятся в нижней части боковой панели. В файле _data/contact.yml вы можете включать или отключать конкретные варианты контактов.

Настройка темы

Для кастомизации темы скопируйте файл assets/css/jekyll-theme-chirpy.scss из темы в ту же путь в вашем Jekyll‑сайте и добавьте свои стили в конец файла.

Настройка статических активов

Конфигурация статических активов введена в версии 5.1.0. CDN для статических активов определён в _data/origin/cors.yml. Вы можете заменить некоторые ресурсы в зависимости от сетевых условий в регионе размещения вашего сайта.

Если вы предпочитаете самостоятельно хостить статические активы, обратитесь к репозиторию chirpy-static-assets.

Развертывание

Перед развертыванием проверьте файл _config.yml и убедитесь, что url настроен корректно. Если вы выбираете сайт проекта ([project site]) и не используете кастомный домен или разворачиваете сайт не на GitHub Pages, не забудьте установить baseurl в имя проекта, например /project-name.

Теперь вы можете выбрать один из следующих способов развертывания Jekyll‑сайта.

Развертывание с помощью GitHub Actions

Подготовьте следующее:

• Если у вас план GitHub Free, держите репозиторий сайта публичным.

• Если вы добавили Gemfile.lock в репозиторий и ваша локальная машина не Linux, обновите список платформ в lock‑файле:

  $ bundle lock --add-platform x86_64-linux
  

Затем настройте сервис Pages:

1. Перейдите в репозиторий на GitHub. Откройте вкладку Settings, затем в левой панели выберите Pages. В разделе Source (в группе Build and deployment) выберите GitHub Actions.
   

2. Отправьте любой коммит в GitHub — это запустит workflow в Actions. В разделе Actions репозитория вы увидите процесс Build and Deploy. После успешной сборки сайт будет автоматически развернут.

Далее вы сможете перейти по URL, предоставленному GitHub, чтобы открыть сайт.

Ручная сборка и развертывание

Если вы развертываете на собственных серверах, соберите сайт локально и затем загрузите файлы на сервер.

Перейдите в корневую папку проекта и выполните сборку:

$ JEKYLL_ENV=production bundle exec jekyll b

Если вы не указывали путь вывода, сгенерированные файлы будут в папке _site в корне проекта. Загрузите содержимое этой папки на целевой сервер.