Post

Быстрый старт

Начните работу с основами Chirpy из этого подробного обзора. Вы узнаете, как установить, настроить и использовать свой первый веб-сайт на базе Chirpy, а также развернуть его на веб-сервере.

Быстрый старт

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

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

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

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

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

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

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

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

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

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

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

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

Шаги:

  1. Установите Docker:
  2. Установите VS Code и расширение Dev Containers.
  3. Клонируйте свой репозиторий:
  4. Дождитесь завершения настройки Dev Containers.

Собственная настройка (рекомендуется для Unix-подобных ОС)

Для Unix-подобных систем вы можете настроить среду для оптимальной производительности, хотя в качестве альтернативы вы также можете использовать Dev Containers.

Шаги:

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

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

Запустите сервер Jekyll

Чтобы запустить сайт локально, используйте следующую команду:

1
$ bundle exec jekyll serve

Если вы используете Dev-контейнеры, вам необходимо запустить эту команду в терминале VS Code.

Через несколько секунд локальный сервер будет доступен по адресу 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 и не используете собственный домен или хотите посещать свой веб-сайт с базовым URL-адресом на веб-сервере, отличном от GitHub Pages, не забудьте установить baseurl для имени вашего проекта, начиная с косой черты, например, /project-name.

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

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

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

  • Если вы пользуетесь бесплатным планом GitHub, сделайте репозиторий своего сайта общедоступным.
  • Если вы зафиксировали Gemfile.lock в репозитории, а на вашем локальном компьютере не установлена ​​ОС Linux, обновите список платформ файла блокировки:

    1
    
    $ bundle lock --add-platform x86_64-linux
    

Далее настройте сервис Pages:

  1. Перейдите в свой репозиторий на GitHub. Выберите вкладку Настройки, затем нажмите Страницы на левой панели навигации. В разделе Источник (в разделе Сборка и развертывание) выберите Действия GitHub в раскрывающемся меню. Build source Build source

  2. Отправьте все коммиты на GitHub, чтобы запустить рабочий процесс Actions. На вкладке Действия вашего репозитория вы должны увидеть запущенный рабочий процесс Build and Deploy. После успешного завершения сборки сайт будет развернут автоматически.

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

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

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

Перейдите в корень исходного проекта и создайте свой сайт с помощью следующей команды:

1
$ JEKYLL_ENV=production bundle exec jekyll b

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

This post is licensed under CC BY 4.0 by the author.