ti-enxame.com

Usando o Live Reload com o Jekyll

Estou começando com gerador de site estático Jekyll e gostaria de usar Live Reload com ele. Eu sei que o Jekyll tem um gerador e comandos do servidor, e o Live Reload pode executar vários compiladores e comandos personalizados. Como faço para configurá-los para trabalhar juntos? 

51
Andrew

A abordagem mais simples que encontrei é a de usar duas janelas de terminal: uma para jekyll serve --watch e outra para guard.

Eu tentei a abordagem guard-jekyll-plus sugerida por Nobu mas eu tive um monte de erros.

Como shumushin apontou , Jekyll pode lidar com o processo de reconstrução automática, basta iniciá-lo usando jekyll serve --watch

Agora, para fazer o LiveReload funcionar, corra com guard-livereload em uma segunda janela de terminal. Isso é basicamente o mesmo que a resposta de Jan Segre , mas sem guard-jekyll.

Meu Guardfile é assim:

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

E meu Gemfile:

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

Nota : Você ainda precisa incluir o script de carregamento na sua página index.html; é a "cola" que liga guard-livereload e o navegador juntos.

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

guard-livereload que você pode usar com guard-jekyll e centralizar o processo de observação com guard , um exemplo seria (eu não testei):

  • Instalar guard-jekyll, seja através de gem ou bundler
  • Instalar guarda-fígado, seja através de gem ou bundler

Init guard-jekyll

guard init jekyll

Adicione isto ao seu Guardfile:

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

Você pode adaptar o texto acima para se adequar melhor ao seu projeto, e Provavelmente já sabe que deve incluir o script de carregamento Em sua página:

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

Ah, e começar toda a bagunça assistindo:

guard
24
Jan Segre

Para jekyll 1.0+ use:

jekyll serve --watch

Veja Jekyll: Uso Básico para mais detalhes e opções.

23
shumushin

ATUALIZAÇÃO: isso não funciona mais com a versão mais recente do Jekyll

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

Este post explica uma maneira mais limpa - Configurando LiveReload com 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

Instalar qualquer extensão do navegador LiveReload . Em seguida, execute guard.

13
Nobu

Eu escrevi um plugin Jekyll chamado Hawkins que incorpora o LiveReload no processo Jekyll watch. Funciona com o Jekyll 3.1 e acima.

Basta adicionar 

group :jekyll_plugins do
  gem 'hawkins'
end

para o seu Gemfile (e, em seguida, um bundle install). De lá você pode executar jekyll liveserve. O Hawkins modificará as seções head de suas páginas para incluir os componentes necessários para o LiveReload, e quando o Jekyll detectar uma mudança de página, o Hawkins enviará uma mensagem para o seu navegador via WebSockets. Por favor, note que você vai precisar de um navegador que suporte WebSockets . Para recarregamentos muito rápidos, você pode usar a nova opção --incremental do Jekyll que só irá regenerar as páginas alteradas.

11
Alex Wood

O LiveReload está embutido no Jekyll 3.7+.

jekyll serve --livereload

Você também pode definir a porta, o atraso e os arquivos ignorados do LiveReload. Veja jekyll help serve.

7
Bluu

Comece correndo jekyll normalmente na pasta do seu site:

cd your/site/folder
jekyll

Por padrão, o Jekyll gera uma pasta chamada _site dentro dele (your/site/folder/_site).

Diga ao LiveReload para ver a pasta _site.

4
kikito

Eu comecei a usar o GitHub Pages hoje e queria poder usar o recarregamento ao vivo com o Jekyll. Trabalhei e escrevi meu primeiro post em Criando páginas do GitHub com o Jekyll & LiveReload .

Ele usa o Grunt com o plugin grunt-contrib-watch em vez do comando serve do Jekyll - funciona bem para mim. Espero que funcione para você também.

1
kctang

Para Live Reload, Remover Jekyll Admin de Gemfile no diretório raiz do seu projeto e funciona como charme.

0
Yash Agrawal

Você pode usar apenas jekyll serve -w, uma opção que prefiro, pois sou preguiçoso.

0
Seth Warburton