jekyll-vue-template

A Jekyll project template that uses Vue.js single file components complete with webpack bundling and optimizations.

Overview

jekyll-vue-template is an opinionated, but minimal boilerplate for creating statically generated sites with Jekyll and Vue.js. It supports Vue single file components and webpack optimizations including code-splitting and cache-control.

Features

• Support for Vue single file components
• Vendor code-splitting with webpack 4
• Cache control for bundled assets using webpack 4
• Babel transpilation
• Sass language support in Vue single file components
• eslint with Vue style guide plugin
• Hot-reloading via BrowserSync

Installation

The easiest way to use the jekyll-vue-template is to clone or fork this repo, then customize it to suit your needs.

Install npm Packages

npm i

Install Ruby Gems

bundle

Usage

The src directory contains the Vue application and its components. Create single file components and mount them anywhere in your Jekyll pages, including layouts, markdown pages, or includes.

Development

To run the jekyll-vue-template in a development environment, first compile assets with webpack:

npm run dev

Alternatively you can use the watch command to watch for changes in your webpack-managed assets and automatically recompile.

npm run watch

After assets have been built, spool up a development server with Jekyll:

bundle exec jekyll s

Production

To build for production, first compile webpack assets:

npm run build

After assets have been built, generate the static files with Jekyll:

bundle exec jekyll build

Technical

jekyll-vue-template uses the following projects as critical workflow components:

• Jekyll v4.0.0
• Vue v2.6.10
• webpack v4.39.3

License

MIT © Christopher Murphy

Jekyll License Info

Vue.js License Info