Utiliser Live Reload avec Jekyll

Je commence à utiliser le générateur de sites statiques Jekyll et j’aimerais utiliser Live Reload avec lui. Je sais que Jekyll a un générateur et des commandes de serveur, et Live Reload peut exécuter différents compilateurs et commandes personnalisées. Comment puis-je les configurer pour qu’ils fonctionnent ensemble?

L’approche la plus simple que j’ai trouvée est d’utiliser deux fenêtres de terminal: une pour jekyll serve --watch et une pour la guard .

J’ai essayé l’ approche guard-jekyll-plus proposée par Nobu mais j’ai eu beaucoup d’erreurs.

Comme Shumushin l’a souligné , Jekyll peut gérer le processus de reconstruction automatique, vous le lancez simplement en utilisant jekyll serve --watch

Maintenant, faites fonctionner LiveReload avec une garde-foie dans une seconde fenêtre de terminal. C’est fondamentalement la même chose que la réponse de Jan Segre , mais sans guard-jekyll .

Mon Guardfile ressemble à ceci:

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

Et ma Gemfile :

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

Remarque : vous devez toujours inclure le script livereload dans votre page index.html ; c’est la “colle” qui lie le guard-livereload et le navigateur ensemble.

  

Pour jekyll 1.0+ utilisation:

 jekyll serve --watch 

Voir Jekyll: Utilisation de base pour plus de détails et d’options.

Il y a guard-livereload que vous pouvez utiliser avec guard-jekyll et centraliser le processus de surveillance avec guard , par exemple (je ne l’ai pas testé):

  • Installez guard-jekyll, soit par gem ou par bundler
  • Installez guard-livereload, par gem ou par bundler

Init guard-jekyll

 guard init jekyll 

Ajoutez ceci à votre fichier de garde:

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

Vous pouvez adapter ce qui précède pour mieux adapter votre projet et vous savez probablement que vous devez déjà inclure le script livereload sur votre page:

  

Oh, et pour commencer tout le désordre de regarder:

 guard 

MISE À JOUR: cela ne fonctionne plus avec la dernière version de Jekyll

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

Cet article explique une manière plus propre – Configurer LiveReload With Jekyll

Gemfile:

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

Fichier de garde:

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

Installez toute extension de navigateur LiveReload . Ensuite, montez la guard .

J’ai écrit un plugin Jekyll appelé Hawkins qui incorpore LiveReload dans le processus de watch Jekyll. Cela fonctionne avec Jekyll 3.1 et plus.

Ajoutez simplement

 group :jekyll_plugins do gem 'hawkins' end 

à votre Gemfile (puis à une bundle install ). De là, vous pouvez exécuter jekyll liveserve . Hawkins modifiera les sections principales de vos pages pour inclure les composants nécessaires à LiveReload, et lorsque Jekyll détectera un changement de page, Hawkins transmettra un message à votre navigateur via WebSockets. Veuillez noter que vous aurez besoin d’un navigateur prenant en charge WebSockets . Pour des rechargements très rapides, vous pouvez utiliser la nouvelle option --incremental Jekyll qui ne régénérera que les pages modifiées.

Commencez par exécuter jekyll normalement dans le dossier de votre site:

 cd your/site/folder jekyll 

Par défaut, Jekyll génère un dossier nommé _site ( your/site/folder/_site ).

Dites à LiveReload de regarder ce dossier _site .

LiveReload est intégré à Jekyll 3.7+.

 jekyll serve --livereload 

Vous pouvez également définir le port, le délai et les fichiers ignorés de LiveReload. Voir jekyll help serve .

Je viens de commencer à utiliser GitHub Pages aujourd’hui et je voulais pouvoir utiliser le rechargement en direct avec Jekyll. Il a fonctionné et écrit mon premier article sur la création de pages GitHub avec Jekyll & LiveReload .

Il utilise Grunt avec le plug grunt-consortingb-watch in grunt-consortingb-watch au lieu de la commande serve de Jekyll – fonctionne bien pour moi. J’espère que cela fonctionne pour vous aussi.

Vous pouvez utiliser simplement jekyll serve -w , une option que je préfère car je suis paresseux.

Pour Live Reload, supprimez Jekyll Admin de Gemfile dans le répertoire racine de votre projet et cela fonctionne comme un charme.