IT박스

Jekyll과 함께 Live Reload 사용

itboxs 2020. 12. 29. 06:50
반응형

Jekyll과 함께 Live Reload 사용


Jekyll 정적 사이트 생성기를 시작 중이며 Live Reload를 함께 사용하고 싶습니다 . Jekyll에는 생성기와 서버 명령이 있으며 Live Reload는 다양한 컴파일러와 사용자 정의 명령을 실행할 수 있습니다. 함께 작동하도록 구성하려면 어떻게해야합니까?


내가 찾은 가장 간단한 접근 방식은 두 개의 터미널 창을 사용하는 jekyll serve --watch것입니다 guard. 하나는 .

나는 Nobu가 제안한 guard-jekyll-plus 접근 방식을 시도했지만 많은 오류가있었습니다.

으로 지적 아웃 shumushin , 지킬이 자동 재 구축 프로세스를 처리 할 수 있습니다, 당신은 단순히 사용하여 시작jekyll serve --watch

이제 LiveReload가 두 번째 터미널 창에서 guard-livereload를 사용하여 실행 경비를 작동하게합니다. 이것은 기본적으로 Jan Segre의 대답 과 동일 하지만 guard-jekyll.

Guardfile모습은 다음과 같습니다.

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

그리고 내 Gemfile:

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

참고 : 여전히 index.html페이지에 livereload 스크립트를 포함해야 합니다. guard-livereload브라우저와 결합하는 것은 "접착제"입니다 .

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

jekyll 1.0+ 사용 :

jekyll serve --watch

자세한 내용과 옵션 Jekyll : 기본 사용법 을 참조하십시오.


거기 가드 livereload 당신이 사용할 수있는 가드 지킬 과보고 과정과 중앙 가드 , 예를 들어이 될 것이다 (나는 그것을 테스트하지 않은 경우) :

  • gem 또는 bundler를 통해 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

LiveReload는 Jekyll 3.7 이상에 내장되어 있습니다.

jekyll serve --livereload

LiveReload의 포트, 지연 및 무시 된 파일을 설정할 수도 있습니다. 을 참조하십시오 jekyll help serve.


업데이트 : 이것은 더 이상 최신 버전의 Jekyll에서 작동하지 않습니다.

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

이 게시물은 더 깨끗한 방법을 설명합니다 -Jekyll로 LiveReload 설정

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.


LiveReload를 Jekyll 프로세스에 통합하는 Hawkins 라는 Jekyll 플러그인을 작성했습니다 watch. Jekyll 3.1 이상에서 작동합니다.

간단히 추가

group :jekyll_plugins do
  gem 'hawkins'
end

to your Gemfile (and then a bundle install). From there you can run jekyll liveserve. Hawkins will modify the head sections of your pages to include the necessary components for LiveReload, and when Jekyll detects a page change, Hawkins will push a message to your browser via WebSockets. Please note that you will need a browser that supports WebSockets. For very fast reloads, you can use Jekyll's new --incremental option that will only regenerate the changed pages.


Start by running jekyll normally in your site folder:

cd your/site/folder
jekyll

By default Jekyll generates a folder called _site inside it (your/site/folder/_site).

Tell LiveReload to watch that _site folder.


I just started using GitHub Pages today, and wanted to be able to use live reload with Jekyll. Got it working & written my first post on Creating GitHub Pages with Jekyll & LiveReload.

It uses Grunt with the grunt-contrib-watch plugin instead of Jekyll's serve command - works well for me. Hope it works for you as well.


You can use just jekyll serve -w, an option I prefer as I am lazy.


For Live Reload, Remove Jekyll Admin from Gemfile in the root directory of your project and it works like charm.

ReferenceURL : https://stackoverflow.com/questions/8395526/using-live-reload-with-jekyll

반응형