Usando Live Reload con Jekyll

StackOverflow https://stackoverflow.com/questions/8395526

  •  28-10-2019
  •  | 
  •  

Pregunta

estoy empezando con Generador de sitios estáticos Jekyll y me gustaría usar recarga en vivo con eso.Sé que Jekyll tiene un generador y comandos de servidor, y Live Reload puede ejecutar varios compiladores y comandos personalizados.¿Cómo los configuro para que funcionen juntos?

¿Fue útil?

Solución

El enfoque más simple que he encontrado que funciona es usar dos ventanas de terminal:Uno para jekyll serve --watch y uno para guard.

Probé el enfoque guard-jekyll-plus sugerido por Nobu pero tuve un montón de errores.

Como shumushin señaló, Jekyll puede manejar el proceso de reconstrucción automática, simplemente ejecútelo usando jekyll serve --watch

Ahora, para que LiveReload funcione, ejecute guard con guard-livereload en una segunda ventana de terminal.Esto es básicamente lo mismo que La respuesta de Jan Segre, pero sin guard-jekyll.

Mi Guardfile Se ve como esto:

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

Y mi Gemfile:

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

Nota:Aún necesitas incluir el script livereload en tu index.html página;es el "pegamento" que une guard-livereload y el navegador juntos.

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

Otros consejos

Para uso de jekyll 1.0+: 

jekyll serve --watch

Consulte Jekyll: uso básico para obtener más detalles y opciones.

Hay guard-livereload que puede usar con guard-jekyll y centralice el proceso de visualización con guard , un ejemplo sería (no lo he probado):

  • Instale guard-jekyll, ya sea a través de gem o bundler
  • Instale guard-livereload, ya sea a través de gem o bundler

Init guard-jekyll 

guard init jekyll

Agregue esto a su Guardfile: 

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

Puede adaptar lo anterior para que se adapte mejor a su proyecto y probablemente ya sepa que tiene que incluir la recarga en vivo secuencia de comandos en su página: 

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

Ah, y para empezar con todo el lío de la visualización: 

guard

LiveReload está integrado en Jekyll 3.7+. 

jekyll serve --livereload

También puede configurar el puerto, el retraso y los archivos ignorados de LiveReload.Consulte jekyll help serve.

ACTUALIZACIÓN: esto ya no funciona con la última versión de Jekyll 

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

Esta publicación explica una forma más limpia: Configuración de LiveReload con 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

Instale cualquier extensión de navegador LiveReload .Luego ejecute guard.

Escribí un complemento Jekyll llamado Hawkins que incorpora LiveReload en el Jekyll watch proceso.Funciona con Jekyll 3.1 y superiores.

Simplemente agregue 

group :jekyll_plugins do
  gem 'hawkins'
end

a su Gemfile (y luego un bundle install).Desde allí puedes correr jekyll liveserve.Hawkins modificará el head secciones de sus páginas para incluir los componentes necesarios para LiveReload, y cuando Jekyll detecta un cambio de página, Hawkins enviará un mensaje a su navegador a través de WebSockets.Tenga en cuenta que necesitará un navegador que admita WebSockets.Para recargas muy rápidas, puedes usar el nuevo Jekyll. --incremental opción que solo regenerará las páginas modificadas.

Comience ejecutando jekyll normalmente en la carpeta de su sitio:

cd your/site/folder
jekyll

Por defecto Jekyll genera una carpeta llamada _site dentro de eso (your/site/folder/_site).

Dile a LiveReload que vea eso. _site carpeta.

Acabo de comenzar a usar las páginas de GitHub hoy y quería poder usar la recarga en vivo con Jekyll.Lo conseguí funcionando y escribí mi primera publicación sobre Creación de páginas de GitHub con Jekyll y LiveReload .

Utiliza Grunt con el complemento grunt-contrib-watch en lugar del comando serve de Jekyll; funciona bien para mí.Espero que también funcione para usted.

Puedes usar solo jekyll serve -w, una opción que prefiero porque soy vago.

Para Live Reload, Elimina Jekyll Admin de Gemfile en el directorio raíz de tu proyecto y funciona a la perfección.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top