├── .babelrc ├── .gitignore ├── Gemfile ├── Gemfile.lock ├── README.MD ├── _config.yml ├── _data └── app.yml ├── _includes ├── gridly.html └── head.html ├── _layouts ├── default.html ├── index.html ├── page.html └── post.html ├── _posts └── 2017-03-01-the-best-of-both-worlds.md ├── _sass ├── grid.scss ├── gridly.scss ├── layout.scss ├── reset.scss ├── typesetting.scss └── variables.scss ├── about.md ├── build ├── about.html ├── css │ └── main.css ├── data │ └── data.json ├── index.html ├── js │ └── bundle.js └── news │ └── the-best-of-both-worlds.html ├── components └── app.vue ├── css └── main.scss ├── data └── data.json ├── index.md ├── js ├── bundle.js └── source.js ├── package.json └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | _site 3 | node_modules 4 | .sass-cache 5 | .jekyll-metadata 6 | Gemfile.lock 7 | npm-debug.log 8 | *package-lock.json -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | gem "github-pages" 4 | 5 | gem "webrick", "~> 1.7" 6 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (6.0.5.1) 5 | concurrent-ruby (~> 1.0, >= 1.0.2) 6 | i18n (>= 0.7, < 2) 7 | minitest (~> 5.1) 8 | tzinfo (~> 1.1) 9 | zeitwerk (~> 2.2, >= 2.2.2) 10 | addressable (2.8.0) 11 | public_suffix (>= 2.0.2, < 5.0) 12 | coffee-script (2.4.1) 13 | coffee-script-source 14 | execjs 15 | coffee-script-source (1.11.1) 16 | colorator (1.1.0) 17 | commonmarker (0.23.5) 18 | concurrent-ruby (1.1.10) 19 | dnsruby (1.61.9) 20 | simpleidn (~> 0.1) 21 | em-websocket (0.5.3) 22 | eventmachine (>= 0.12.9) 23 | http_parser.rb (~> 0) 24 | ethon (0.15.0) 25 | ffi (>= 1.15.0) 26 | eventmachine (1.2.7) 27 | execjs (2.8.1) 28 | faraday (2.3.0) 29 | faraday-net_http (~> 2.0) 30 | ruby2_keywords (>= 0.0.4) 31 | faraday-net_http (2.0.3) 32 | ffi (1.15.5) 33 | forwardable-extended (2.6.0) 34 | gemoji (3.0.1) 35 | github-pages (227) 36 | github-pages-health-check (= 1.17.9) 37 | jekyll (= 3.9.2) 38 | jekyll-avatar (= 0.7.0) 39 | jekyll-coffeescript (= 1.1.1) 40 | jekyll-commonmark-ghpages (= 0.2.0) 41 | jekyll-default-layout (= 0.1.4) 42 | jekyll-feed (= 0.15.1) 43 | jekyll-gist (= 1.5.0) 44 | jekyll-github-metadata (= 2.13.0) 45 | jekyll-include-cache (= 0.2.1) 46 | jekyll-mentions (= 1.6.0) 47 | jekyll-optional-front-matter (= 0.3.2) 48 | jekyll-paginate (= 1.1.0) 49 | jekyll-readme-index (= 0.3.0) 50 | jekyll-redirect-from (= 0.16.0) 51 | jekyll-relative-links (= 0.6.1) 52 | jekyll-remote-theme (= 0.4.3) 53 | jekyll-sass-converter (= 1.5.2) 54 | jekyll-seo-tag (= 2.8.0) 55 | jekyll-sitemap (= 1.4.0) 56 | jekyll-swiss (= 1.0.0) 57 | jekyll-theme-architect (= 0.2.0) 58 | jekyll-theme-cayman (= 0.2.0) 59 | jekyll-theme-dinky (= 0.2.0) 60 | jekyll-theme-hacker (= 0.2.0) 61 | jekyll-theme-leap-day (= 0.2.0) 62 | jekyll-theme-merlot (= 0.2.0) 63 | jekyll-theme-midnight (= 0.2.0) 64 | jekyll-theme-minimal (= 0.2.0) 65 | jekyll-theme-modernist (= 0.2.0) 66 | jekyll-theme-primer (= 0.6.0) 67 | jekyll-theme-slate (= 0.2.0) 68 | jekyll-theme-tactile (= 0.2.0) 69 | jekyll-theme-time-machine (= 0.2.0) 70 | jekyll-titles-from-headings (= 0.5.3) 71 | jemoji (= 0.12.0) 72 | kramdown (= 2.3.2) 73 | kramdown-parser-gfm (= 1.1.0) 74 | liquid (= 4.0.3) 75 | mercenary (~> 0.3) 76 | minima (= 2.5.1) 77 | nokogiri (>= 1.13.6, < 2.0) 78 | rouge (= 3.26.0) 79 | terminal-table (~> 1.4) 80 | github-pages-health-check (1.17.9) 81 | addressable (~> 2.3) 82 | dnsruby (~> 1.60) 83 | octokit (~> 4.0) 84 | public_suffix (>= 3.0, < 5.0) 85 | typhoeus (~> 1.3) 86 | html-pipeline (2.14.2) 87 | activesupport (>= 2) 88 | nokogiri (>= 1.4) 89 | http_parser.rb (0.8.0) 90 | i18n (0.9.5) 91 | concurrent-ruby (~> 1.0) 92 | jekyll (3.9.2) 93 | addressable (~> 2.4) 94 | colorator (~> 1.0) 95 | em-websocket (~> 0.5) 96 | i18n (~> 0.7) 97 | jekyll-sass-converter (~> 1.0) 98 | jekyll-watch (~> 2.0) 99 | kramdown (>= 1.17, < 3) 100 | liquid (~> 4.0) 101 | mercenary (~> 0.3.3) 102 | pathutil (~> 0.9) 103 | rouge (>= 1.7, < 4) 104 | safe_yaml (~> 1.0) 105 | jekyll-avatar (0.7.0) 106 | jekyll (>= 3.0, < 5.0) 107 | jekyll-coffeescript (1.1.1) 108 | coffee-script (~> 2.2) 109 | coffee-script-source (~> 1.11.1) 110 | jekyll-commonmark (1.4.0) 111 | commonmarker (~> 0.22) 112 | jekyll-commonmark-ghpages (0.2.0) 113 | commonmarker (~> 0.23.4) 114 | jekyll (~> 3.9.0) 115 | jekyll-commonmark (~> 1.4.0) 116 | rouge (>= 2.0, < 4.0) 117 | jekyll-default-layout (0.1.4) 118 | jekyll (~> 3.0) 119 | jekyll-feed (0.15.1) 120 | jekyll (>= 3.7, < 5.0) 121 | jekyll-gist (1.5.0) 122 | octokit (~> 4.2) 123 | jekyll-github-metadata (2.13.0) 124 | jekyll (>= 3.4, < 5.0) 125 | octokit (~> 4.0, != 4.4.0) 126 | jekyll-include-cache (0.2.1) 127 | jekyll (>= 3.7, < 5.0) 128 | jekyll-mentions (1.6.0) 129 | html-pipeline (~> 2.3) 130 | jekyll (>= 3.7, < 5.0) 131 | jekyll-optional-front-matter (0.3.2) 132 | jekyll (>= 3.0, < 5.0) 133 | jekyll-paginate (1.1.0) 134 | jekyll-readme-index (0.3.0) 135 | jekyll (>= 3.0, < 5.0) 136 | jekyll-redirect-from (0.16.0) 137 | jekyll (>= 3.3, < 5.0) 138 | jekyll-relative-links (0.6.1) 139 | jekyll (>= 3.3, < 5.0) 140 | jekyll-remote-theme (0.4.3) 141 | addressable (~> 2.0) 142 | jekyll (>= 3.5, < 5.0) 143 | jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0) 144 | rubyzip (>= 1.3.0, < 3.0) 145 | jekyll-sass-converter (1.5.2) 146 | sass (~> 3.4) 147 | jekyll-seo-tag (2.8.0) 148 | jekyll (>= 3.8, < 5.0) 149 | jekyll-sitemap (1.4.0) 150 | jekyll (>= 3.7, < 5.0) 151 | jekyll-swiss (1.0.0) 152 | jekyll-theme-architect (0.2.0) 153 | jekyll (> 3.5, < 5.0) 154 | jekyll-seo-tag (~> 2.0) 155 | jekyll-theme-cayman (0.2.0) 156 | jekyll (> 3.5, < 5.0) 157 | jekyll-seo-tag (~> 2.0) 158 | jekyll-theme-dinky (0.2.0) 159 | jekyll (> 3.5, < 5.0) 160 | jekyll-seo-tag (~> 2.0) 161 | jekyll-theme-hacker (0.2.0) 162 | jekyll (> 3.5, < 5.0) 163 | jekyll-seo-tag (~> 2.0) 164 | jekyll-theme-leap-day (0.2.0) 165 | jekyll (> 3.5, < 5.0) 166 | jekyll-seo-tag (~> 2.0) 167 | jekyll-theme-merlot (0.2.0) 168 | jekyll (> 3.5, < 5.0) 169 | jekyll-seo-tag (~> 2.0) 170 | jekyll-theme-midnight (0.2.0) 171 | jekyll (> 3.5, < 5.0) 172 | jekyll-seo-tag (~> 2.0) 173 | jekyll-theme-minimal (0.2.0) 174 | jekyll (> 3.5, < 5.0) 175 | jekyll-seo-tag (~> 2.0) 176 | jekyll-theme-modernist (0.2.0) 177 | jekyll (> 3.5, < 5.0) 178 | jekyll-seo-tag (~> 2.0) 179 | jekyll-theme-primer (0.6.0) 180 | jekyll (> 3.5, < 5.0) 181 | jekyll-github-metadata (~> 2.9) 182 | jekyll-seo-tag (~> 2.0) 183 | jekyll-theme-slate (0.2.0) 184 | jekyll (> 3.5, < 5.0) 185 | jekyll-seo-tag (~> 2.0) 186 | jekyll-theme-tactile (0.2.0) 187 | jekyll (> 3.5, < 5.0) 188 | jekyll-seo-tag (~> 2.0) 189 | jekyll-theme-time-machine (0.2.0) 190 | jekyll (> 3.5, < 5.0) 191 | jekyll-seo-tag (~> 2.0) 192 | jekyll-titles-from-headings (0.5.3) 193 | jekyll (>= 3.3, < 5.0) 194 | jekyll-watch (2.2.1) 195 | listen (~> 3.0) 196 | jemoji (0.12.0) 197 | gemoji (~> 3.0) 198 | html-pipeline (~> 2.2) 199 | jekyll (>= 3.0, < 5.0) 200 | kramdown (2.3.2) 201 | rexml 202 | kramdown-parser-gfm (1.1.0) 203 | kramdown (~> 2.0) 204 | liquid (4.0.3) 205 | listen (3.7.1) 206 | rb-fsevent (~> 0.10, >= 0.10.3) 207 | rb-inotify (~> 0.9, >= 0.9.10) 208 | mercenary (0.3.6) 209 | minima (2.5.1) 210 | jekyll (>= 3.5, < 5.0) 211 | jekyll-feed (~> 0.9) 212 | jekyll-seo-tag (~> 2.1) 213 | minitest (5.16.2) 214 | nokogiri (1.13.7-x86_64-darwin) 215 | racc (~> 1.4) 216 | octokit (4.25.1) 217 | faraday (>= 1, < 3) 218 | sawyer (~> 0.9) 219 | pathutil (0.16.2) 220 | forwardable-extended (~> 2.6) 221 | public_suffix (4.0.7) 222 | racc (1.6.0) 223 | rb-fsevent (0.11.1) 224 | rb-inotify (0.10.1) 225 | ffi (~> 1.0) 226 | rexml (3.2.5) 227 | rouge (3.26.0) 228 | ruby2_keywords (0.0.5) 229 | rubyzip (2.3.2) 230 | safe_yaml (1.0.5) 231 | sass (3.7.4) 232 | sass-listen (~> 4.0.0) 233 | sass-listen (4.0.0) 234 | rb-fsevent (~> 0.9, >= 0.9.4) 235 | rb-inotify (~> 0.9, >= 0.9.7) 236 | sawyer (0.9.2) 237 | addressable (>= 2.3.5) 238 | faraday (>= 0.17.3, < 3) 239 | simpleidn (0.2.1) 240 | unf (~> 0.1.4) 241 | terminal-table (1.8.0) 242 | unicode-display_width (~> 1.1, >= 1.1.1) 243 | thread_safe (0.3.6) 244 | typhoeus (1.4.0) 245 | ethon (>= 0.9.0) 246 | tzinfo (1.2.9) 247 | thread_safe (~> 0.1) 248 | unf (0.1.4) 249 | unf_ext 250 | unf_ext (0.0.8.2) 251 | unicode-display_width (1.8.0) 252 | webrick (1.7.0) 253 | zeitwerk (2.6.0) 254 | 255 | PLATFORMS 256 | x86_64-darwin-21 257 | 258 | DEPENDENCIES 259 | github-pages 260 | webrick (~> 1.7) 261 | 262 | BUNDLED WITH 263 | 2.3.11 264 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | ## Static, meet dynamic. 2 | 3 | **Demo: https://vue-jekyll.surge.sh** 4 | 5 | [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. 6 | 7 | **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/) 8 | 9 | ## The best of both worlds. 10 | 11 | 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. 12 | 13 | ## Setup 14 | 15 | * Clone the Repo 16 | * `npm install` 17 | * `bundle install` 18 | * `npm run jekyllfy` 19 | 20 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | 2 | # Info 3 | title: Vue❤Jekyll 4 | twitter: "http://twitter.com/bryanschuetz" 5 | github: "http://github.com/bryanschuetz" 6 | baseurl: "" 7 | url: "http://bryanschuetz.github.io" 8 | 9 | # Collections 10 | collections: 11 | posts: 12 | title: Posts 13 | output: true 14 | permalink: "/news/:title" 15 | 16 | # Settings 17 | markdown: kramdown 18 | excerpt_seperator: "" 19 | destination: "./build" 20 | permalink: "/:title" 21 | exclude: 22 | - components 23 | - Gemfile 24 | - Gemfile.lock 25 | - ".gitignore" 26 | - node_modules 27 | - js/source.js 28 | - webpack.config.js 29 | - package.json 30 | - .jshintrc 31 | - .sass-cache 32 | - browser-sync.js 33 | - npm-debug.log 34 | - README.MD 35 | sass: 36 | style: compressed 37 | -------------------------------------------------------------------------------- /_data/app.yml: -------------------------------------------------------------------------------- 1 | title: "Static, Meet Dynamic." 2 | description: | 3 | [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. 4 | combination: | 5 | 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. 6 | staticBenefits: 7 | - speed (cdn/pre-rendered) 8 | - cacheability 9 | - reliability 10 | - developer workflow 11 | dynamicBenefits: 12 | - speed (ui/ux) 13 | - isomorphic rendering 14 | - complex state management 15 | - dynamic components -------------------------------------------------------------------------------- /_includes/gridly.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
-------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }}{% endif %} 8 | 9 | 10 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 | {% include gridly.html %} 6 |
7 |
8 |

{{ site.title }}

9 |
10 |
11 |
12 | {{ content }} 13 |
14 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /_layouts/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |
6 | {{ content }} 7 |
8 |
-------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 | {{ content }} 6 |
7 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 | {{ content }} 6 |
7 | -------------------------------------------------------------------------------- /_posts/2017-03-01-the-best-of-both-worlds.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "The Best of Both Worlds" 4 | date: 2017-03-01 12:47:12 -0500 5 | categories: jekyll vue 6 | --- 7 | The new static. All the performance, none of the simplicity. Just so. 8 | -------------------------------------------------------------------------------- /_sass/grid.scss: -------------------------------------------------------------------------------- 1 | // 🎌 ADAPTIVE GRID MIXINS AND FUNCTIONS 🎌 2 | 3 | 4 | // 🎌 WIDTHS IN PIXELS 🎌 5 | 6 | $font-size: 10px; 7 | $column: 48px; 8 | $gutter: 24px; 9 | 10 | // 🎌 COLUMN WIDTHS AS VARIABLES 🎌 11 | 12 | $cols1: ( 1 * ($column + $gutter) - $gutter); 13 | $cols2: ( 2 * ($column + $gutter) - $gutter); 14 | $cols3: ( 3 * ($column + $gutter) - $gutter); 15 | $cols4: ( 4 * ($column + $gutter) - $gutter); 16 | $cols5: ( 5 * ($column + $gutter) - $gutter); 17 | $cols6: ( 6 * ($column + $gutter) - $gutter); 18 | $cols7: ( 7 * ($column + $gutter) - $gutter); 19 | $cols8: ( 8 * ($column + $gutter) - $gutter); 20 | $cols9: ( 9 * ($column + $gutter) - $gutter); 21 | $cols10: (10 * ($column + $gutter) - $gutter); 22 | $cols11: (11 * ($column + $gutter) - $gutter); 23 | $cols12: (12 * ($column + $gutter) - $gutter); 24 | $cols13: (13 * ($column + $gutter) - $gutter); 25 | $cols14: (14 * ($column + $gutter) - $gutter); 26 | $cols15: (15 * ($column + $gutter) - $gutter); 27 | $cols16: (16 * ($column + $gutter) - $gutter); 28 | 29 | // 🎌 MIXIN FUNCTION FOR SETING THE WIDTH, IN COLUMNS, OF AN OBJECT 🎌 30 | // 🎌 E.G. @INCLUDE WIDTH(4); 🎌 31 | 32 | @mixin width ($cols:1) { 33 | width: ($cols * ($column + $gutter) - $gutter); 34 | } 35 | @mixin full-width ($cols:1){ 36 | width: ($cols * ($column + $gutter)); 37 | } 38 | @mixin min-width ($cols:1) { 39 | width: ($cols * ($column + $gutter) - $gutter); 40 | } 41 | -------------------------------------------------------------------------------- /_sass/gridly.scss: -------------------------------------------------------------------------------- 1 | // 🎌 A VISUAL AID FOR UNDERSTANDING THE GRID JUST TOGGLE DISPLAY ON THE .GRIDLY-WRAP BELOW 🎌 2 | body{ 3 | position: relative; 4 | margin: 0; 5 | } 6 | .gridly-wrap{ 7 | display: none; 8 | @include clearfix; 9 | position: relative; 10 | z-index: -100; 11 | } 12 | div.gridly{ 13 | @include clearfix; 14 | background-color: rgba(white, 0.0); 15 | position: absolute; 16 | } 17 | .column{ 18 | background-color: rgba($orange, 0.2); 19 | @include width(1); 20 | height: 1000px; 21 | float: left; 22 | margin-right: $gutter; 23 | &.four{ 24 | margin-right: 0; 25 | } 26 | @include responsive(tiny-screens){ 27 | &.four{ 28 | margin-right: $gutter; 29 | } 30 | &.five{ 31 | margin-right: 0; 32 | } 33 | } 34 | @include responsive(small-screens){ 35 | &.five{ 36 | margin-right: $gutter; 37 | } 38 | &.six{ 39 | margin-right: 0; 40 | } 41 | } 42 | @include responsive(medium-screens){ 43 | &.six{ 44 | margin-right: $gutter; 45 | } 46 | &.eight{ 47 | margin-right: 0; 48 | } 49 | } 50 | @include responsive(wide-screens){ 51 | &.eight{ 52 | margin-right: $gutter; 53 | } 54 | &.ten{ 55 | margin-right: 0; 56 | } 57 | } 58 | @include responsive(ultra-wide-screens){ 59 | &.ten{ 60 | margin-right: $gutter; 61 | } 62 | &.twelve{ 63 | margin-right: 0; 64 | } 65 | } 66 | @include responsive(extra-ultra-wide-screens){ 67 | &.twelve{ 68 | margin-right: $gutter; 69 | } 70 | &.fourteen{ 71 | margin-right: 0; 72 | } 73 | } 74 | @include responsive(extra-extra-ultra-wide-screens){ 75 | &.fourteen{ 76 | margin-right: $gutter; 77 | } 78 | &.sixteen{ 79 | margin-right: 0; 80 | } 81 | } 82 | } -------------------------------------------------------------------------------- /_sass/layout.scss: -------------------------------------------------------------------------------- 1 | // 🎌 INNER ADAPTIVE GRID 🎌 2 | .footer-inner, .main-inner, .header-inner, .gridly-wrap{ 3 | @include width(4); 4 | margin: auto; 5 | @include responsive(tiny-screens){ 6 | @include width(5); 7 | } 8 | @include responsive(small-screens){ 9 | @include width(6); 10 | } 11 | @include responsive(medium-screens){ 12 | @include width(8); 13 | } 14 | @include responsive(wide-screens){ 15 | @include width(10); 16 | } 17 | @include responsive(ultra-wide-screens){ 18 | @include width(12); 19 | } 20 | @include responsive(extra-ultra-wide-screens){ 21 | @include width(14); 22 | } 23 | @include responsive(extra-extra-ultra-wide-screens){ 24 | @include width(16); 25 | } 26 | } 27 | 28 | // 🎌 FULL VIEWPORT 🎌 29 | 30 | header{ 31 | padding: 1rem; 32 | h1{ 33 | text-align: center; 34 | color: $vueblue; 35 | } 36 | background-color: $vuegreen; 37 | } 38 | .benefits{ 39 | @include width(4); 40 | margin: auto; 41 | @include responsive(medium-screens){ 42 | float: left; 43 | margin-right: $gutter; 44 | } 45 | @include responsive(wide-screens){ 46 | @include width(5); 47 | } 48 | @include responsive(ultra-wide-screens){ 49 | @include width(6); 50 | } 51 | @include responsive(extra-ultra-wide-screens){ 52 | @include width(7); 53 | } 54 | @include responsive(extra-extra-ultra-wide-screens){ 55 | @include width(8); 56 | } 57 | } 58 | .copy .benefits:last-of-type{ 59 | @include responsive(medium-screens){ 60 | margin-right: 0; 61 | } 62 | } 63 | .main, .bennies{ 64 | @include clearfix; 65 | } 66 | input, button{ 67 | font-size: 1rem; 68 | font-family: 'Alegreya', 'Georgia', serif; 69 | } 70 | input{ 71 | padding-left: .1rem; 72 | } 73 | button{ 74 | padding: .1rem; 75 | } 76 | footer{ 77 | margin-top: 15rem; 78 | .footer-inner p{ 79 | text-align: center; 80 | } 81 | } 82 | .environment{ 83 | text-align: center; 84 | margin-top: 5rem; 85 | } -------------------------------------------------------------------------------- /_sass/reset.scss: -------------------------------------------------------------------------------- 1 | // 🎌 RESET ALL THE ANNOYING THINGS 🎌 2 | 3 | * { 4 | -webkit-box-sizing: border-box; 5 | -moz-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | * { 10 | margin: 0; 11 | padding: 0; 12 | } 13 | ul, ol, dl{ 14 | margin-left: 2rem; 15 | li{ 16 | list-style-position: outside; 17 | } 18 | } 19 | div{ 20 | display: block; 21 | width: 100%; 22 | } 23 | hr{ 24 | border-top: 1px solid $vuegreen; 25 | border-bottom: 0px; 26 | } -------------------------------------------------------------------------------- /_sass/typesetting.scss: -------------------------------------------------------------------------------- 1 | // 🎌 ADAPTIVE REM BASED SIZING 🎌 2 | html{ 3 | font-size: 14px; 4 | @include responsive(medium-screens){ 5 | font-size: 16px; 6 | } 7 | @include responsive(wide-screens){ 8 | font-size: 20px; 9 | } 10 | // @include responsive(ultra-wide-screens){ 11 | // font-size: 24px; 12 | // } 13 | // @include responsive(extra-ultra-wide-screens){ 14 | // font-size: 30px; 15 | // } 16 | // @include responsive(extra-extra-ultra-wide-screens){ 17 | // font-size: 40px; 18 | // } 19 | &.wf-loading{ 20 | opacity: 0; 21 | } 22 | &.wf-active{ 23 | opacity: 1; 24 | display: block; 25 | font-family: 'Alegreya', 'Georgia', serif; 26 | } 27 | &.wf-inactive, &.wf-fontinactive{ 28 | opacity: 1; 29 | display: block; 30 | font-family: 'Georgia', serif; 31 | } 32 | } 33 | 34 | // 🎌 PSUEDO TYPOGRAPHIC MODULAR SCALE BASED ON A 1.5 RATIO 🎌 35 | body { 36 | font-weight: 400; 37 | line-height: 1.45; 38 | color: $black; 39 | font-size: 1rem; 40 | } 41 | 42 | p { 43 | margin-bottom: 1.3rem; 44 | } 45 | 46 | h1, h2, h3, h4 { 47 | margin: 1.414Rem 0 0.5rem; 48 | font-weight: inherit; 49 | line-height: 1.2; 50 | } 51 | 52 | h1 { 53 | margin-top: 0; 54 | font-size: 5.063rem; 55 | } 56 | 57 | h2 { 58 | font-size: 3.375rem; 59 | } 60 | 61 | h3 { 62 | font-size: 2.25rem; 63 | } 64 | 65 | h4 { 66 | font-size: 1.5rem; 67 | } 68 | 69 | small, .font_small { 70 | font-size: 0.667rem; 71 | } -------------------------------------------------------------------------------- /_sass/variables.scss: -------------------------------------------------------------------------------- 1 | // 🎌 COLORS 🎌 2 | $vuegreen: #2FB06D; 3 | $vueblue: #28374D; 4 | $orange: #FF8019; 5 | $purple: #B729D9; 6 | $green: #7BD128; 7 | $pink: #EE5B6C; 8 | $blue: #446CFF; 9 | $light-blue: #4AA3FF; 10 | $lighter-blue: #77DAFF; 11 | $yellow: #F4DC6E; 12 | $gray: #999999; 13 | $white: #f2f0ed; 14 | $blackish: #313437; 15 | $red: #FF0000; 16 | $link_green: #74BC70; 17 | $slate: #303B40; 18 | $button-green: rgb(116, 188, 112); 19 | 20 | // 🎌 WEIGHTS 🎌 21 | 22 | $thin: 100; 23 | $light: 300; 24 | $regular: 400; 25 | $bold: 700; 26 | $black: 900; 27 | 28 | // WIDTHS 29 | $width-tiny: 370px; //5bits 30 | $width-small: 480px; //6bits 31 | $width-medium: 600px; //8bits 32 | $width-wide: 800px; //10bits 33 | $width-ultra-wide: 960px; //12bits 34 | $width-extra-ultra-wide: 1200px; //14bits 35 | $width-extra-extra-ultra-wide: 1400px; //16bits 36 | 37 | // 🎌 MIXINS 🎌 38 | 39 | // Responsive mixin for bubbled media-querries 40 | @mixin responsive($width){ 41 | @if $width == tiny-screens{ 42 | @media screen and (min-width: $width-tiny){ 43 | @content; 44 | } 45 | } 46 | @else if $width == small-screens{ 47 | @media screen and (min-width: $width-small){ 48 | @content; 49 | } 50 | } 51 | @else if $width == medium-screens{ 52 | @media screen and (min-width: $width-medium){ 53 | @content; 54 | } 55 | } 56 | @else if $width == wide-screens{ 57 | @media screen and (min-width: $width-wide){ 58 | @content; 59 | } 60 | } 61 | @else if $width == ultra-wide-screens{ 62 | @media screen and (min-width: $width-ultra-wide){ 63 | @content; 64 | } 65 | } 66 | @else if $width == extra-ultra-wide-screens{ 67 | @media screen and (min-width: $width-extra-ultra-wide){ 68 | @content; 69 | } 70 | } 71 | @else if $width == extra-extra-ultra-wide-screens{ 72 | @media screen and (min-width: $width-extra-extra-ultra-wide){ 73 | @content; 74 | } 75 | } 76 | } 77 | 78 | @mixin clearfix { 79 | *zoom: 1; 80 | 81 | &:before, 82 | &:after { 83 | content: " "; 84 | display: table; 85 | } 86 | 87 | &:after { 88 | clear: both; 89 | } 90 | } -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | --- 5 | A bunch of great stuff explaining why this template works well. -------------------------------------------------------------------------------- /build/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | About | Vue❤Jekyll 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |

Vue❤Jekyll

37 |
38 |
39 |
40 |
41 |

A bunch of great stuff explaining why this template works well.

42 | 43 |
44 | 45 |
46 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /build/css/main.css: -------------------------------------------------------------------------------- 1 | body{position:relative;margin:0}.gridly-wrap{display:none;*zoom:1;position:relative;z-index:-100}.gridly-wrap:before,.gridly-wrap:after{content:" ";display:table}.gridly-wrap:after{clear:both}div.gridly{*zoom:1;background-color:rgba(255,255,255,0);position:absolute}div.gridly:before,div.gridly:after{content:" ";display:table}div.gridly:after{clear:both}.column{background-color:rgba(255,128,25,0.2);width:48px;height:1000px;float:left;margin-right:24px}.column.four{margin-right:0}@media screen and (min-width: 370px){.column.four{margin-right:24px}.column.five{margin-right:0}}@media screen and (min-width: 480px){.column.five{margin-right:24px}.column.six{margin-right:0}}@media screen and (min-width: 600px){.column.six{margin-right:24px}.column.eight{margin-right:0}}@media screen and (min-width: 800px){.column.eight{margin-right:24px}.column.ten{margin-right:0}}@media screen and (min-width: 960px){.column.ten{margin-right:24px}.column.twelve{margin-right:0}}@media screen and (min-width: 1200px){.column.twelve{margin-right:24px}.column.fourteen{margin-right:0}}@media screen and (min-width: 1400px){.column.fourteen{margin-right:24px}.column.sixteen{margin-right:0}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*{margin:0;padding:0}ul,ol,dl{margin-left:2rem}ul li,ol li,dl li{list-style-position:outside}div{display:block;width:100%}hr{border-top:1px solid #2FB06D;border-bottom:0px}.footer-inner,.main-inner,.header-inner,.gridly-wrap{width:264px;margin:auto}@media screen and (min-width: 370px){.footer-inner,.main-inner,.header-inner,.gridly-wrap{width:336px}}@media screen and (min-width: 480px){.footer-inner,.main-inner,.header-inner,.gridly-wrap{width:408px}}@media screen and (min-width: 600px){.footer-inner,.main-inner,.header-inner,.gridly-wrap{width:552px}}@media screen and (min-width: 800px){.footer-inner,.main-inner,.header-inner,.gridly-wrap{width:696px}}@media screen and (min-width: 960px){.footer-inner,.main-inner,.header-inner,.gridly-wrap{width:840px}}@media screen and (min-width: 1200px){.footer-inner,.main-inner,.header-inner,.gridly-wrap{width:984px}}@media screen and (min-width: 1400px){.footer-inner,.main-inner,.header-inner,.gridly-wrap{width:1128px}}header{padding:1rem;background-color:#2FB06D}header h1{text-align:center;color:#28374D}.benefits{width:264px;margin:auto}@media screen and (min-width: 600px){.benefits{float:left;margin-right:24px}}@media screen and (min-width: 800px){.benefits{width:336px}}@media screen and (min-width: 960px){.benefits{width:408px}}@media screen and (min-width: 1200px){.benefits{width:480px}}@media screen and (min-width: 1400px){.benefits{width:552px}}@media screen and (min-width: 600px){.copy .benefits:last-of-type{margin-right:0}}.main,.bennies{*zoom:1}.main:before,.main:after,.bennies:before,.bennies:after{content:" ";display:table}.main:after,.bennies:after{clear:both}input,button{font-size:1rem;font-family:'Alegreya', 'Georgia', serif}input{padding-left:.1rem}button{padding:.1rem}footer{margin-top:15rem}footer .footer-inner p{text-align:center}.environment{text-align:center;margin-top:5rem}html{font-size:14px}@media screen and (min-width: 600px){html{font-size:16px}}@media screen and (min-width: 800px){html{font-size:20px}}html.wf-loading{opacity:0}html.wf-active{opacity:1;display:block;font-family:'Alegreya', 'Georgia', serif}html.wf-inactive,html.wf-fontinactive{opacity:1;display:block;font-family:'Georgia', serif}body{font-weight:400;line-height:1.45;color:900;font-size:1rem}p{margin-bottom:1.3rem}h1,h2,h3,h4{margin:1.414Rem 0 0.5rem;font-weight:inherit;line-height:1.2}h1{margin-top:0;font-size:5.063rem}h2{font-size:3.375rem}h3{font-size:2.25rem}h4{font-size:1.5rem}small,.font_small{font-size:0.667rem} 2 | -------------------------------------------------------------------------------- /build/data/data.json: -------------------------------------------------------------------------------- 1 | {"title":"Static, Meet Dynamic.","description":"[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.\n","combination":"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.\n","staticBenefits":["speed (cdn/pre-rendered)","cacheability","reliability","developer workflow"],"dynamicBenefits":["speed (ui/ux)","isomorphic rendering","complex state management","dynamic components"]} -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Vue❤Jekyll 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |

Vue❤Jekyll

37 |
38 |
39 |
40 |
41 |
42 |
43 |

Static, Meet Dynamic.

44 |

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.

45 |

46 |

The Best of Both Worlds.

47 |

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. 48 |

49 |
50 |
51 |

Static Sites

52 |
53 |
    54 | 55 |
  • Speed (cdn/pre-rendered)
  • 56 | 57 |
  • Cacheability
  • 58 | 59 |
  • Reliability
  • 60 | 61 |
  • Developer workflow
  • 62 | 63 |
64 |
65 |
66 |

Client-Side JS

67 |
68 |
    69 | 70 |
  • Speed (ui/ux)
  • 71 | 72 |
  • Isomorphic rendering
  • 73 | 74 |
  • Complex state management
  • 75 | 76 |
  • Dynamic components
  • 77 | 78 |
79 |
80 |
81 |

*Enable Javascript to see the page rendered with Vue.

82 |
83 | 84 |
85 |
86 |
87 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /build/news/the-best-of-both-worlds.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | The Best of Both Worlds | Vue❤Jekyll 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |

Vue❤Jekyll

37 |
38 |
39 |
40 |
41 |

The new static. All the performance, none of the simplicity. Just so.

42 | 43 |
44 | 45 |
46 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /components/app.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | -------------------------------------------------------------------------------- /css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | // 🎌 IMPORT ALL THE STUFF—I LET JEKYLL HANDLE THE SASS 🎌 4 | @import 'grid'; 5 | @import 'variables'; 6 | @import 'gridly'; 7 | @import 'reset'; 8 | @import 'layout'; 9 | @import 'typesetting'; -------------------------------------------------------------------------------- /data/data.json: -------------------------------------------------------------------------------- 1 | --- 2 | title: siteData 3 | --- 4 | 5 | {{ site.data.app | jsonify }} -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: index 3 | --- 4 |
5 |

{{ site.data.app.title }}

6 |

{{ site.data.app.description | markdownify }}

7 |

The Best of Both Worlds.

8 |

{{ site.data.app.combination }}

9 |
10 |
11 |

Static Sites

12 |
13 |
    14 | {% for benefit in site.data.app.staticBenefits %} 15 |
  • {{ benefit | capitalize }}
  • 16 | {% endfor %} 17 |
18 |
19 |
20 |

Client-Side JS

21 |
22 |
    23 | {% for benefit in site.data.app.dynamicBenefits %} 24 |
  • {{ benefit | capitalize }}
  • 25 | {% endfor %} 26 |
27 |
28 |
29 |

*Enable Javascript to see the page rendered with Vue.

30 |
-------------------------------------------------------------------------------- /js/source.js: -------------------------------------------------------------------------------- 1 | // 🎌 IMPORT MODULES, COMPONENTS AND WHATNOT. CREATE THE VUE INSTANCE 🎌 2 | import Vue from 'vue' 3 | import WebFont from 'webfontloader' 4 | import Marked from 'marked' 5 | import App from '../components/app.vue' 6 | 7 | // 🎌 GOOGLE FONTS, CAUSE TYPOGRAPHY 🎌 8 | WebFont.load({ 9 | google: { 10 | families: ['Alegreya:400,italic,700,900'] 11 | } 12 | }); 13 | 14 | var app = new Vue({ 15 | el: '#content', 16 | render: h => h(App) 17 | }) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "_comment": "🎌 WE'RE USING NPM SCRIPTS TO MANAGE THE BUILD PROCESS. LOCALLY, JUST `NPM INSTALL && BUNDLE INSTALL && NPM RUN JEKYLLFY 🎌", 3 | "name": "vue-jekyll", 4 | "repository": "https://github.com/keerthik/vue-jekyll", 5 | "version": "0.0.1", 6 | "description": "A bare-bones template for building static sites that leverage a modern javascript framework for dynamic functionality. Built with [NPM](https://www.npmjs.com), [Vue](https://vuejs.org), and [Jekyll](https://jekyllrb.com).", 7 | "main": "main.js", 8 | "scripts": { 9 | "packit": "webpack --watch", 10 | "buildit": "bundle exec jekyll serve --watch --incremental --host 0.0.0.0", 11 | "jekyllfy": "npm run packit & npm run buildit", 12 | }, 13 | "keywords": [ 14 | "jekyll", 15 | "Vue" 16 | ], 17 | "author": "Bryan Schuetz", 18 | "license": "Fuck do I care?", 19 | "dependencies": { 20 | "babel-cli": "^6.23.0", 21 | "babel-core": "^6.23.1", 22 | "babel-loader": "^8.0.0", 23 | "babel-preset-es2015": "^6.22.0", 24 | "json-loader": "^0.5.4", 25 | "marked": "^0.3.6", 26 | "vue": "^2.2.1", 27 | "vue-loader": "^17.0.0", 28 | "vue-template-compiler": "^2.2.2", 29 | "webfontloader": "^1.6.27", 30 | "webpack": "^5.0.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | // 🎌 WE'RE USING WEBPACK TO TRANSPILE AND ROLL UP MODULES 🎌 2 | 3 | module.exports = { 4 | entry: { 5 | // 🎌 OUR SOURCE FILE 🎌 6 | jsSource: './js/source.js' 7 | }, 8 | output: { 9 | // 🎌 OUR DESTINATION 🎌 10 | filename: './js/bundle.js' 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.js$/, 16 | exclude: /(node_modules)/, 17 | loader: 'babel-loader', 18 | }, 19 | { 20 | test: /\.json$/, 21 | use: 'json-loader' 22 | }, 23 | { 24 | test: /\.vue$/, 25 | use: 'vue-loader' 26 | } 27 | ] 28 | }, 29 | resolve: { 30 | alias: { 31 | 'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1 32 | } 33 | } 34 | } 35 | --------------------------------------------------------------------------------