├── .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 |
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 |
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 |
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 |
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 |
2 |
3 |
{{ siteData.title }}
4 |
5 |
The Best of Both Worlds.
6 |
{{ siteData.combination }}
7 |
8 |
9 |
Static Sites
10 |
11 |
12 | {{ benefit | capitalize }}
13 |
14 |
15 |
16 |
Client-Side JS
17 |
18 |
24 |
25 |
26 |
*Disable Javascript to see the page rendered with Jekyll.
27 |
28 |
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 |
--------------------------------------------------------------------------------