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

Question

Я начинаю работать с Генератором статического сайта Jekyll , и я хотел бы использовать Live Reload с ним. Я знаю, что у Джекилла есть команды генератора и сервера, и Live Reload может запускать различные компиляторы и пользовательские команды. Как мне настроить их для совместной работы?

Answer 1

Для jekyll 1.0+ используйте:

jekyll serve --watch

См. Jekyll: базовое использование для более подробной информации и опций.

Answer 2

Существует guard-livereload , который вы можете использовать с guard-jekyll и централизовать процесс наблюдения с помощью guard , например, (у меня нет проверил это):

• Установите guard-jekyll либо через gem, либо через bundler
• Установить guard-livereload либо через гем, либо через упаковщик

Инициал-страж Джекил

guard init jekyll

Добавьте это в ваш Guardfile:

guard 'livereload' do
  watch(%r{_site/.+})
end

Вы можете адаптировать вышеупомянутое, чтобы лучше соответствовать вашему проекту, и вы, вероятно, уже знаете, что вы должны включить livereload скрипт на вашей странице:

<script src="http://localhost:35729/livereload.js"></script>

О, и для начала весь беспорядок просмотра:

guard

Answer 3

Самый простой подход, который я обнаружил, - это использовать два окна терминала: одно для jekyll serve --watch и одно для guard.

Я попробовал подход guard-jekyll-plus, предложенный Nobu , но у меня была куча ошибок.

Как указал Шумушин , Jekyll может управлять процессом автоматического восстановления, вы просто запускаете его, используя jekyll serve --watch

Теперь, чтобы получить работающую LiveReload, запустите guard с guard-livereload во втором окне терминала. Это в основном то же самое, что и ответ Яна Сегре , но без guard-jekyll.

Мой Guardfile выглядит так:

guard 'livereload' do
  watch(/^_site/)
end

И мой Gemfile:

gem 'jekyll'
gem 'guard'
gem 'guard-livereload'

Примечание : Вам все еще нужно включить скрипт livereload на страницу index.html; это «клей», который связывает guard-livereload и браузер.

<script src="http://localhost:35729/livereload.js"></script>

Answer 4

ОБНОВЛЕНИЕ: это больше не работает с последней версией Jekyll

cd your/site/folder
jekyll --server --auto

Answer 5

LiveReload встроен в Jekyll 3.7 +.

jekyll serve --livereload

Вы также можете установить порт LiveReload, задержку и игнорируемые файлы. Смотри jekyll help serve.

Answer 6

Этот пост объясняет более понятный способ - Настройка LiveReload с Jekyll

Gemfile:

gem 'jekyll'
gem 'guard'
gem 'guard-jekyll-plus'
gem 'guard-livereload'

Guardfile:

guard 'jekyll-plus', :serve => true do
  watch /.*/
  ignore /^_site/
end

guard 'livereload' do
  watch /.*/
end

Установить любое расширение браузера LiveReload . Затем запустите guard.

Answer 7

Я написал плагин Jekyll под названием Hawkins , который включает LiveReload в процесс Jekyll watch.Он работает с Jekyll 3.1 и выше.

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

group :jekyll_plugins do
  gem 'hawkins'
end

в ваш Gemfile (а затем bundle install).Оттуда вы можете запустить jekyll liveserve.Hawkins изменит разделы head на ваших страницах, добавив в них необходимые компоненты для LiveReload, и, когда Jekyll обнаружит изменение страницы, Hawkins отправит сообщение в ваш браузер через WebSockets.Обратите внимание, что вам потребуется браузер, поддерживающий WebSockets .Для очень быстрой перезагрузки вы можете использовать новую опцию Jekyll --incremental, которая будет восстанавливать только измененные страницы.

Answer 8

Начните с обычного запуска jekyll в папке вашего сайта:

cd your/site/folder
jekyll

По умолчанию Jekyll создает в нем папку с именем _site (your/site/folder/_site).

Скажите LiveReload для просмотраэта _site папка.

Answer 9

Я только начал использовать GitHub Pages сегодня и хотел иметь возможность использовать живую перезагрузку с Jekyll.Получил свою работу и написал мой первый пост на Создание страниц GitHub с Jekyll & LiveReload .

Он использует Grunt с плагином grunt-contrib-watch вместо команды serve Джекилла - хорошо работает для меня,Надеюсь, это сработает и у вас.

Answer 10

Для Live Reload удалите Jekyll Admin из Gemfile в корневой директории вашего проекта, и она работает как шарм.