LinkSearchMenuExpandDocument
Table of contents

Jekyll-browsersync

Gem Version 

Tags: , , , ,

Browsersyncを使用してJekyll開発にライブリロードを追加します。

オプションの設定が不要な場合は、Jekyll version 3.7.0より導入された serve --livereloadで代替が可能です。

インストール

  1. Browsersync (npm) のインストール

    npm install --save-dev browser-sync
    # or globally with
    npm install -g browser-sync
    
  2. Gemfileを編集

    # Gemfile
    group :jekyll_plugins do
      gem 'jekyll-browsersync'
    end
    
  3. Pluginのインストール

    bundle
    

使い方

インストールするとJekyllのコマンドにbrowsersyncが追加されます。

Usage:

  jekyll browsersync [options]

Options:
        -H, --host [HOST]  Host to bind to
        -P, --port [PORT]  Port to listen on
        -o, --open         Launch your site in a browser
        -e, --cli [PATH]   Path to browsersync CLI
            --config CONFIG_FILE[,CONFIG_FILE2,...]  Custom configuration file
        -d, --destination DESTINATION  The current folder will be generated into DESTINATION
        -s, --source SOURCE  Custom source directory
            --future       Publishes posts with a future date
            --limit_posts MAX_POSTS  Limits the number of posts to parse and publish
        -w, --[no-]watch   Watch for changes and rebuild
        -b, --baseurl URL  Serve the website from the given base URL
            --force_polling  Force watch to use polling
            --lsi          Use LSI for improved related posts
        -D, --drafts       Render posts in the _drafts folder
            --unpublished  Render posts that were marked as unpublished
            --disable-disk-cache  Disable caching to disk in non-safe mode
        -q, --quiet        Silence output.
        -V, --verbose      Print verbose output.
        -I, --incremental  Enable incremental rebuild.
            --strict_front_matter  Fail if errors are present in front matter
        -s, --source [DIR]  Source directory (defaults to ./)
        -d, --destination [DIR]  Destination directory (defaults to ./_site)
            --safe         Safe mode (defaults to false)
        -p, --plugins PLUGINS_DIR1[,PLUGINS_DIR2[,...]]  Plugins directory (defaults to ./_plugins)
            --layouts DIR  Layouts directory (defaults to ./_layouts)
            --profile      Generate a Liquid rendering profile
        -h, --help         Show this message
        -v, --version      Print the name and version
        -t, --trace        Show the full backtrace when an error occurs

[options]のあとに -- をつけてBrowsersyncのオプション 1 を渡すことができます。

bundle exec jekyll browsersync -- --no-notify --config browsersync.js

ブラウザでhttp://localhost:4000にアクセスすると確認できます。

Tip

URLの生成にabolute_urlフィルタ を使用しているテーマではうまく動作しない。

  1. Browsersync options(browsersync.io) 

ブログ記事

下記に掲載を希望される方はご連絡ください (詳細)

Back to top


Back to top

Copyright © 2021 Otti

Page last modified: