bryanschuetz / vue-jekyll

This Repo is a bare-bones template for building static sites that leverage a client-side JS framework for dynamic functionality.

Static, meet dynamic.

Demo: https://vue-jekyll.surge.sh

This Repo is a bare-bones template for building static sites that leverage a client-side JS framework for dynamic functionality. It uses NPM, Webpack, Vue, and Jekyll. 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 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

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

vue-jekyll's Issues

Sass loaders?

Hello! How can I put <style lang="scss" scoped> in my .vue files?

Data folder not rebuilding when update

I downloaded you app and can run locally on my computer. However, I notice that if I make changes to the data in app.yml file, it does not get automatically rebuild and in the build folder (the data in the build folder is not modified) - I have to delete the build folder and rebuild to get it to work. Would you be able to check if you are having the same issue? I expect there is an easy fix - is the issue in the webpack config?

Thanks!

new post doesn't generate

how to build it?

Proper cross-platform configuration to also support Windows environment

"jekyllfy": "npm run packit & npm run buildit & npm run serve" won't seem to work on windows (at least on mine, for some strange reason..), it seems. Eg. if i use npm run packit & npm run blahblahDoesntExist on command line, i don't see the 2nd portion executing at all. Consider using https://www.npmjs.com/package/concurrently package.

Additionally, it's better to rename browser-sync.js to something like browser-sync-config.js or place it in a seperate folder. This is because the command browser-sync in some environments like Windows might end up opening the local .js file instead at that location instead of refering to the actual NPM package browser-sync. (eg. My default text editor opens up with the browser-sync.js file loaded, and fails to execute the npm package).

Conversion error: Jekyll::Converters::Scss Error: Invalid US-ASCII character "\xF0"

Hi,

first of all thanks for this template.

I have a problem when I do yarn run jekyllfy,

I have this message :

       Destination: ./build
 Incremental build: enabled
      Generating...
  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss':
                    Invalid US-ASCII character "\xF0" on line 1
jekyll 3.3.1 | Error:  Invalid US-ASCII character "\xF0" on line 1

edit : If I add @charset "UTF-8"; on the top of the css/main.scss, I don't have any style on the site.