web-dev-qa-db-fra.com

Utiliser Live Reload avec Jekyll

Je commence à utiliser le générateur de sites statiques Jekyll et j'aimerais utiliser Live Reload avec ce dernier. Je sais que Jekyll a un générateur et des commandes de serveur, et Live Reload peut exécuter divers compilateurs et commandes personnalisées. Comment est-ce que je les configure pour fonctionner ensemble? 

rubyjekyll
51
Andrew

La méthode la plus simple que j'ai trouvée et qui fonctionne consiste à utiliser deux fenêtres de terminal: une pour jekyll serve --watch et une pour guard.

J'ai essayé l'approche guard-jekyll-plus suggérée par Nobu mais j'ai eu un tas d'erreurs.

Comme l'a fait remarquer shumushin , Jekyll peut gérer le processus de reconstruction automatique. Il vous suffit de le lancer à l'aide de jekyll serve --watch.

Il faut maintenant que LiveReload fonctionne avec guard-livereload dans une deuxième fenêtre de terminal. C'est fondamentalement la même chose que La réponse de Jan Segre , mais sans guard-jekyll.

Ma Guardfile ressemble à ceci:

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

Et ma Gemfile:

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

Note: Vous devez toujours inclure le script livereload dans votre page index.html; c'est la "colle" qui lie guard-livereload et le navigateur.

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

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, via gem ou bundler
  • Installez le garde-foie, soit à travers une gemme ou un bundler

Init garde-jekyll

guard init jekyll

Ajoutez ceci à votre Guardfile:

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

Vous pouvez adapter ce qui précède à votre projet, et vous savez probablement déjà que vous devez inclure le script hépatique Sur votre page:

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

Oh, et pour commencer tout le bazar en regardant:

guard
24
Jan Segre

Pour jekyll 1.0+, utilisez:

jekyll serve --watch

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

23
shumushin

UPDATE: cela ne fonctionne plus avec la dernière version de Jekyll

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

Ce message explique une méthode plus propre - Configuration de LiveReload avec 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

Installez n’importe quelle extension de navigateur LiveReload . Puis lancez guard.

13
Nobu

J'ai écrit un plugin Jekyll appelé Hawkins qui intègre LiveReload au processus Jekyll watch. Cela fonctionne avec Jekyll 3.1 et plus.

Ajoutez simplement 

group :jekyll_plugins do
  gem 'hawkins'
end

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

11
Alex Wood

LiveReload est intégré à Jekyll 3.7+.

jekyll serve --livereload

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

7
Bluu

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 appelé _site à l'intérieur (your/site/folder/_site).

Dites à LiveReload de regarder ce dossier _site.

4
kikito

Je viens juste de commencer à utiliser GitHub Pages aujourd'hui et je souhaitais pouvoir utiliser Live Reload avec Jekyll. Je travaille et écrit mon premier post sur Création de pages GitHub avec Jekyll & LiveReload .

Il utilise Grunt avec le plugin grunt-contrib-watch au lieu de la commande serve de Jekyll - fonctionne bien pour moi. J'espère que cela fonctionne pour vous aussi.

1
kctang

Pour Live Reload, Supprimez Jekyll Admin deGemfiledans le répertoire racine de votre projet et cela fonctionnera à merveille.

0
Yash Agrawal

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

0
Seth Warburton