jekyll-vue-template
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
