https://github.com/bryanschuetz/vue-jekyll
This Repo is a bare-bones template for building static sites that leverage a client-side JS framework for dynamic functionality.
https://github.com/bryanschuetz/vue-jekyll
jekyll vuejs2
Last synced: 9 months ago
JSON representation
This Repo is a bare-bones template for building static sites that leverage a client-side JS framework for dynamic functionality.
- Host: GitHub
- URL: https://github.com/bryanschuetz/vue-jekyll
- Owner: BryanSchuetz
- Created: 2017-03-11T17:50:59.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-31T04:04:13.000Z (over 3 years ago)
- Last Synced: 2023-03-11T08:42:14.376Z (over 3 years ago)
- Topics: jekyll, vuejs2
- Language: JavaScript
- Homepage: https://vue-jekyll.surge.sh
- Size: 160 KB
- Stars: 85
- Watchers: 7
- Forks: 19
- Open Issues: 5
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
## Static, meet dynamic.
**Demo: https://vue-jekyll.surge.sh**
[This Repo](https://github.com/BryanSchuetz/vue-jekyll) is a bare-bones template for building static sites that leverage a client-side JS framework for dynamic functionality. It uses [NPM](https://www.npmjs.com/), [Webpack](https://webpack.js.org), [Vue](https://vuejs.org), and [Jekyll](https://jekyllrb.com). It uses **NPM (and Bundler)** to manage the project's dependencies, and improve the development workflow. It uses **Webpack** to roll up and transpile all the individual modules and components into a single bundeled JS file. It uses **Jekyll** to bring it all together, build the site, and serve an initial static file to the browser. It uses **Vue** to render pages on the client side (if JS is supported), and provide any additional dynamic functionality that may be needed.
**Why not use Nuxt?** [Nuxt](https://nuxtjs.org) is great, but if you're working with non-technical writers and editors—why not roll in a nicely baked web-based back end for them to work with. There are a number of nice Jekyll based CMS' to choose from, I like [Siteleaf](https://www.siteleaf.com/)
## The best of both worlds.
Take the best parts of a static site workflow and combine them with the new hotness of a client side framework. What you end up with is a great new way to publish content on the modern web. Isomorphic blah blah blah: Use Jekyll to publish the site's pages, and the JSON data behind them—use Vue to build the same pages with the same data. Serve the first static page to the user—if JS is supported, just send the JSON down the wire and build the rest of the pages/content with Vue. If there's no JS support, continue to send pre-rendered static pages down the wire.
## Setup
* Clone the Repo
* `npm install`
* `bundle install`
* `npm run jekyllfy`