├── .gitignore ├── 404.html ├── CNAME ├── README.md ├── Thumbs.db ├── _config.yml ├── _data └── buttonmodal.yaml ├── _includes ├── accordion.html ├── add-to-homescreen.html ├── analytics.html ├── better-forms.html ├── breadcrumbs.html ├── buttonmodal.html ├── buttons.html ├── carousel.html ├── cart.html ├── chatbutton.js ├── checkout.html ├── comments.html ├── cookie-consent.html ├── follow-buttons.html ├── footer.html ├── form.html ├── future-dates.html ├── ga.js ├── header.html ├── icon-github.html ├── icon-github.svg ├── icon-twitter.html ├── icon-twitter.svg ├── image-gallery-index.html ├── image-gallery.html ├── instagram.html ├── lazyload.html ├── navigation.html ├── new-window-fix.html ├── open-embed.html ├── productimages.html ├── randomize.html ├── reading-time.html ├── search-google.html ├── search-lunr.html ├── share-buttons.html ├── sidebar.html ├── simple-menu.html ├── text-expand.html └── toggle-menu.html ├── _layouts ├── cart.html ├── checkout.html ├── home.html ├── page.html ├── paylink.html ├── post.html ├── product.html ├── products.html ├── without-plugin-item.html └── without-plugin.html ├── _posts ├── 2015-11-09-introduction.md ├── 2016-02-03-github-pages-now-faster-and-simpler.md ├── 2016-06-04-why-use-jekyll.md ├── 2016-09-21-getting-started-with-jekyll.md ├── 2017-10-17-major-update.md ├── 2017-11-01-what-is-github-pages.md ├── 2017-11-17-cloudcannon.md ├── 2017-11-18-building-a-webshop-with-jekyll.md ├── 2017-12-07-interview-with-joost-van-der-schee.md ├── 2017-12-20-i-hire-people-they-do-a-website-it-costs-me-three-dollars.md ├── 2018-01-02-lightbox-improved.md ├── 2018-07-17-digital-downloads-in-the-webshop.md ├── 2018-08-22-lightbox-captions-added.md ├── 2018-11-02-gdpr-compliant-comment.md ├── 2018-11-13-add-your-website-to-the-home-screen-of-ios.md ├── 2018-12-09-improvements-to-the-form-builder.md ├── 2018-12-10-about-availability-and-redundancy.md ├── 2019-07-08-ditching-jquery-and-twitter-bootstrap.md ├── 2019-09-22-speaking-at-jekyllconf2019.md ├── 2019-11-10-a-complete-rebuild-of-jekyll-codex.md ├── 2020-02-25-instafeed-js-alternative-for-instagram.md ├── 2020-10-07-instagram-on-your-website-without-api.md └── 2021-01-19-instagram-without-api.md ├── _products ├── beer.md ├── chocolates.md ├── coffee.md ├── feature.md ├── share.md └── t-shirt.md ├── _themes └── agency-theme.md ├── _without-plugin ├── accordion.md ├── add-to-home-screen-ios.md ├── auto-resize-images.md ├── better-forms.md ├── breadcrumbs.md ├── button-modal.md ├── buttons.md ├── comments.md ├── cookie-consent.md ├── follow-buttons.md ├── form-builder.md ├── future-dates.md ├── image-gallery-index.md ├── image-gallery.md ├── instagram.md ├── lazy-loading.md ├── lightbox.md ├── live-chat.md ├── metrics.md ├── new-window-fix.md ├── open-embed.md ├── pretty-permalinks.md ├── randomize.md ├── reading-time-indicator.md ├── rss-feed.md ├── search-google.md ├── search-lunr.md ├── seo.md ├── share-buttons.md ├── simple-menu.md ├── sitemap.md ├── slider.md ├── text-expand.md ├── toggle-menu.md └── webshop.md ├── about.md ├── admin ├── config.yml └── index.html ├── blog.html ├── contact.md ├── css ├── lightbox.css ├── style.css └── webshop.css ├── disclaimer.md ├── donate ├── cart.md ├── checkout.md ├── index.md └── paylink.md ├── favicon.ico ├── feed.xml ├── fonts ├── open-sans-v15-latin-700.eot ├── open-sans-v15-latin-700.svg ├── open-sans-v15-latin-700.ttf ├── open-sans-v15-latin-700.woff ├── open-sans-v15-latin-700.woff2 ├── open-sans-v15-latin-regular.eot ├── open-sans-v15-latin-regular.svg ├── open-sans-v15-latin-regular.ttf ├── open-sans-v15-latin-regular.woff └── open-sans-v15-latin-regular.woff2 ├── getting-started.md ├── google50d887eee3ca04cf.html ├── img ├── Thumbs.db ├── addtohomescreen.svg ├── bg_content.svg ├── blank.png ├── check.svg ├── chevron_down.svg ├── cloud_cannon.png ├── emptyavatar.png ├── favicon.png ├── github.png ├── icon-192x192.png ├── it_square.png ├── logo-2x.png ├── share.svg └── shopping-cart.svg ├── index.html ├── js ├── jquery.min.js ├── lightbox.js ├── lunr.js └── webshop.js ├── privacy.md ├── search.md ├── sitemap.xml ├── terms.md ├── uploads ├── Paper_Navy_-_08_-_Swan_Song.mp3 ├── Thumbs.db ├── addtohomescreen1.jpeg ├── addtohomescreen2.jpg ├── album │ ├── Beautiful Mountains.jpg │ ├── Museum of Pop Culture.jpg │ ├── Seattle View.jpg │ ├── Seattle by Night.jpg │ ├── Space Needle.jpg │ └── Thumbs.db ├── beer │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ └── Thumbs.db ├── chocolates │ ├── 1.jpg │ ├── 2.jpg │ └── 3.jpg ├── chrisferdinandi.jpg ├── coffee │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ └── Thumbs.db ├── feature.jpg ├── grumpycat.jpg ├── grumpycat2.jpg ├── img_20181101_113818211.jpg ├── joost │ └── Joost van der Schee.jpg ├── joostvanderschee.jpg ├── macdonaldsrump.jpg ├── share.jpg ├── slider │ ├── ganapathy-kumar-93498.jpg │ ├── ganapathy-kumar-93498_scaled.jpg │ ├── ricardo-gomez-angel-180819.jpg │ ├── ricardo-gomez-angel-180819_scaled.jpg │ ├── samuel-zeller-356272.jpg │ ├── samuel-zeller-356272_scaled.jpg │ ├── samuel-zeller-356338.jpg │ └── samuel-zeller-356338_scaled.jpg └── t-shirt │ ├── Thumbs.db │ ├── view.jpeg │ ├── view3.jpeg │ └── view4.jpeg ├── without-plugin.md └── without-plugins.md /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | .jekyll-metadata 4 | .jekyll-cache -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Redirecting 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | jekyllcodex.org -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Jekyll Codex 2 | 3 | A website for front-end developers who want to learn Jekyll. https://jekyllcodex.org 4 | 5 | Jekyll Codex is created by Joost van der Schee ([@jhvanderschee](https://twitter.com/jhvanderschee) or joost@vdschee.nl) to make it easier for fellow front-end developers to choose static web technology in their next project. The getting started guide even shows how to do that without touching the command-line. You can also watch [JekyllCodex at JekyllConf 2019](https://vimeo.com/361839295) which shows exactly that in under twenty minutes. Note that this video uses the [jQuery and Twitter Bootstrap version](https://fresh-butterfly.cloudvent.net) of this website. If you want to know more about Jekyll, please visit the official Jekyll documentation. The link can be found in the menu at the top. 6 | 7 | Why Jekyll? Jekyll is the most popular static site generator. Static sites are better for performance, they’re cheaper to build and maintain, and they’re much more secure than traditional database driven websites. Thus they offer a great added value to front-end developers and their clients. 8 | 9 | ## Copyrights 10 | 11 | Feel free to use all code presented on this website under the MIT License (see below). The code of the website itself may also be used, as this website is a demo of the code it presents. However, respect the copyright of the used trademarks and the licenses of the open-source software used, as their rights belong to their respective owners. All images are CC0 images from Unsplash. 12 | 13 | ### MIT License 14 | 15 | Copyright (c) 2020 Usecue BV 16 | 17 | Permission is hereby granted, free of charge, to any person obtaining a copy 18 | of this software and associated documentation files (the "Software"), to deal 19 | in the Software without restriction, including without limitation the rights 20 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 21 | copies of the Software, and to permit persons to whom the Software is 22 | furnished to do so, subject to the following conditions: 23 | 24 | The above copyright notice and this permission notice shall be included in all 25 | copies or substantial portions of the Software. 26 | 27 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 33 | SOFTWARE. 34 | -------------------------------------------------------------------------------- /Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/Thumbs.db -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | --- 2 | title: Jekyll Codex 3 | timezone: UTC 4 | collections: 5 | posts: 6 | title: Posts 7 | output: true 8 | products: 9 | title: Products 10 | output: true 11 | permalink: "/donate/:path/" 12 | uploads: 13 | title: Uploads 14 | output: false 15 | without-plugin: 16 | title: Without Plugin 17 | output: true 18 | permalink: "/without-plugin/:path/" 19 | defaults: 20 | - scope: 21 | path: '' 22 | type: pages 23 | values: 24 | layout: page 25 | - scope: 26 | path: '' 27 | type: posts 28 | values: 29 | layout: post 30 | - scope: 31 | path: '' 32 | type: without-plugin 33 | values: 34 | layout: without-plugin-item 35 | - scope: 36 | path: '' 37 | type: products 38 | values: 39 | layout: product 40 | description: Jekyll Codex wants to make it easier for front-end developers to choose 41 | Jekyll in their next project. 42 | url: https://jekyllcodex.org 43 | permalink: "/blog/:title/" 44 | facebook_url: https://www.facebook.com/jhvanderschee 45 | twitter_url: https://twitter.com/jhvanderschee 46 | linkedin_url: https://www.linkedin.com/in/joost-van-der-schee-4b26682 47 | pinterest_url: 48 | instagram_url: 49 | highlighter: rouge 50 | markdown: kramdown 51 | kramdown: 52 | syntax_highlighter_opts: 53 | disable: true 54 | input_types: 55 | - text 56 | - textarea 57 | - email 58 | - date 59 | - checkbox 60 | - radio 61 | - number 62 | - submit 63 | form_engines: 64 | - cloudcannon 65 | - formspree 66 | - formbucket 67 | -------------------------------------------------------------------------------- /_data/buttonmodal.yaml: -------------------------------------------------------------------------------- 1 | title: Are you sure you want to donate? 2 | text: We have got plenty of donations. We would love you to help us do something else... 3 | items: 4 | - title: First other thing 5 | url: https://www.usecue.com 6 | - title: Second other thing 7 | url: https://jekyllcodex.org 8 | - title: Third other thing 9 | url: https://www.google.com -------------------------------------------------------------------------------- /_includes/accordion.html: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /_includes/add-to-homescreen.html: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /_includes/analytics.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/breadcrumbs.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/buttonmodal.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{ site.data.buttonmodal.title }}

4 |

{{ site.data.buttonmodal.text }}

5 | 10 |
11 |
12 | 13 | 27 | 28 | -------------------------------------------------------------------------------- /_includes/buttons.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/cart.html: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
QuantityPrice
22 | 23 |
Continue shopping    Proceed to checkout
24 | 25 |
26 | 29 |
-------------------------------------------------------------------------------- /_includes/chatbutton.js: -------------------------------------------------------------------------------- 1 | window.$crisp=[];window.CRISP_WEBSITE_ID="08f726ab-0303-4a41-9563-b9a32526b8ea";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})(); -------------------------------------------------------------------------------- /_includes/cookie-consent.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 47 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 13 | 14 | {% include text-expand.html %} 15 | {% include cookie-consent.html %} 16 | {% include open-embed.html %} 17 | {% include new-window-fix.html %} 18 | {% include follow-buttons.html %} 19 | {% include buttons.html %} 20 | {% include buttonmodal.html %} 21 | 22 | {% if page.url contains 'gdpr-compliant-comment' %} 23 | 27 | 28 | {% include comments.html element=".post-content" github_account="jhvanderschee/jekyllcodex" require_cookie_consent="true" %} 29 | {% endif %} 30 | {% comment %} 31 | {% include better-forms.html %} 32 | {% include add-to-homescreen.html %} 33 | {% endcomment %} 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /_includes/future-dates.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/ga.js: -------------------------------------------------------------------------------- 1 | var _gaq = _gaq || []; 2 | _gaq.push(['_setAccount', 'UA-70348270-1']); 3 | _gaq.push(['_gat._forceSSL']); 4 | _gaq.push(['_gat._anonymizeIp']); 5 | _gaq.push(['_trackPageview']); 6 | 7 | (function() { 8 | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 9 | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 10 | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 11 | })(); -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {% if page.title and page.title != 'Home' %}{{ page.title }} | {% endif %}{{ site.title }} 10 | {% assign pagecontent_description = page.content | markdownify | replace: '.', '. ' | replace: '', ': ' | replace: '', ': ' | replace: '', ': ' | strip_html | strip_newlines | replace: ' ', ' ' | truncate: 160 %} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | {% if page.image %}{% endif %} 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {% if site.twitter_url %}{% endif %} 28 | 29 | {% if page.image %}{% endif %} 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | {% include navigation.html %} 43 | -------------------------------------------------------------------------------- /_includes/icon-github.html: -------------------------------------------------------------------------------- 1 | {% include icon-github.svg %}{{ include.username }} 2 | -------------------------------------------------------------------------------- /_includes/icon-github.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_includes/icon-twitter.html: -------------------------------------------------------------------------------- 1 | {% include icon-twitter.svg %}{{ include.username }} 2 | -------------------------------------------------------------------------------- /_includes/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_includes/image-gallery-index.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |

{% for item in page.galleries %}{{ item.title }}{% endfor %}

9 | -------------------------------------------------------------------------------- /_includes/image-gallery.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /_includes/instagram.html: -------------------------------------------------------------------------------- 1 | 6 | 9 | -------------------------------------------------------------------------------- /_includes/navigation.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /_includes/new-window-fix.html: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /_includes/open-embed.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 96 | -------------------------------------------------------------------------------- /_includes/productimages.html: -------------------------------------------------------------------------------- 1 |
2 | 6 |
-------------------------------------------------------------------------------- /_includes/randomize.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/reading-time.html: -------------------------------------------------------------------------------- 1 | {% capture words %} 2 | {{ content | number_of_words | minus: 180 }} 3 | {% endcapture %} 4 | {% unless words contains '-' %} 5 | {{ words | plus: 150 | divided_by: 150 | append: ' minutes to read' }} 6 | {% endunless %} -------------------------------------------------------------------------------- /_includes/search-google.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /_includes/search-lunr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 55 | 64 | 65 | 66 |
67 |

68 |
69 |
70 | 71 |
-------------------------------------------------------------------------------- /_includes/share-buttons.html: -------------------------------------------------------------------------------- 1 | {% if include.pageurl != nil and include.pageurl != '' %} 2 | {% assign pageurl = include.pageurl %} 3 | {% else %} 4 | {% assign pageurl = page.url %} 5 | {% endif %} 6 | 7 | 32 | 33 | Share on:
34 |
35 |
36 |
37 | {% if page.image %}
{% endif %} 38 |
39 |
40 | -------------------------------------------------------------------------------- /_includes/sidebar.html: -------------------------------------------------------------------------------- 1 |

Audience

2 | 3 |

If you are a front-end developer who is afraid of the command-line and wants to learn Jekyll: you have come to the right place. If you are not a front-end developer, or you like nerdy stuff, please visit the official Jekyll documentation.

-------------------------------------------------------------------------------- /_includes/simple-menu.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/text-expand.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/toggle-menu.html: -------------------------------------------------------------------------------- 1 | Menu 2 | 3 | 50 | -------------------------------------------------------------------------------- /_layouts/cart.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 | 3 |
4 |
5 |

{{ page.title }}

6 | 7 | {{ content }} 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
Quantity  Price
Your shopping cart is currently empty.
26 | 27 |
€ 0.00
28 | 29 |
continue shopping
30 | 31 |
32 | 33 |
34 | 37 |
38 |
39 |
40 | 41 | 42 | {% include footer.html %} -------------------------------------------------------------------------------- /_layouts/home.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 | 3 |
4 |
5 |

Jekyll logo 6 |
7 | {{ content }} 8 |
9 | 10 |
11 |
12 | 13 | {% comment %} 14 | {% endcomment %} 25 | 26 | {% include footer.html %} -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 |
3 |
4 | 5 | 6 |
7 | 8 |
9 | {% include breadcrumbs.html %} 10 |

{{ page.title }}

11 |
12 | 13 |
14 | {{ content }} 15 | 16 | {% if page.forms %}{% include form.html %}{% endif %} 17 | 18 | {% if page.title == 'Search' %} 19 | {% include search-lunr.html %} 20 | {% endif %} 21 |
22 | 23 |
24 |
25 |
26 | 27 | {% include footer.html %} -------------------------------------------------------------------------------- /_layouts/paylink.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 |
3 |
4 |

{{ page.title }}

5 | 6 | {{ content }} 7 | 8 |
9 |
10 | 11 | {% include footer.html %} -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 |
3 |
4 | 5 | 6 |
7 | 8 |
9 | {% include breadcrumbs.html %} 10 |

{{ page.title }}

11 |

{% if page.author %} • {% endif %}

12 |
13 | 14 |

15 | 16 | {% include reading-time.html %} 17 | 18 |
19 | {{ content }} 20 | Joost van der Schee
21 |
22 | {% include share-buttons.html %} 23 | 24 |
25 | 26 |
27 | 28 |
29 |
30 | 31 | {% include footer.html %} 32 | -------------------------------------------------------------------------------- /_layouts/product.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 |
3 |
4 | 5 | 6 |
7 | 8 |
9 | {% include breadcrumbs.html %} 10 |
11 |
12 |
13 | {% include productimages.html %} 14 | 15 |
16 | 17 |

{{ page.title }}

18 | {% if page.variants[0].price > 0 %}

€ {% assign price_split = page.variants[0].price | round: 2 | split: "." %}{% assign integral = price_split[0] %}{% assign fractional = price_split[1] | append: "00" | truncate: 2, "" %}{{ integral }}.{{ fractional }}

{% else %} 19 | {% include share-buttons.html %} 20 | {% endif %} 21 | 22 |
23 | {% if page.variants[1].name %} 24 |
25 | 26 | 29 |
30 | {% endif %} 31 | {% if page.variants[0].price > 0 %} 32 |
33 | 34 |
35 | {% endif %} 36 | 37 |
38 | 39 | {% include productimages.html %} 40 | 41 | {{ content }} 42 |
43 |
44 | 45 |
46 | 47 |
48 |
49 | 50 | {% include footer.html %} -------------------------------------------------------------------------------- /_layouts/products.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 |
3 |
4 | 5 |
6 | 7 |
8 | {% include breadcrumbs.html %} 9 |

{{ page.title }}

10 |
11 | 12 |
13 | {{ content }} 14 |
15 | 16 | 32 |
33 | 34 | 35 | 36 |
37 |
38 |
39 | 40 | {% include footer.html %} -------------------------------------------------------------------------------- /_layouts/without-plugin-item.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 |
3 |
4 | 5 |
6 | 7 |
8 | {% include breadcrumbs.html %} 9 |

{{ page.title }}

10 |
11 | 12 |
13 | {{ content }} 14 |
15 | 16 | 17 | 18 |
19 |
20 |
21 | 22 | {% include footer.html %} -------------------------------------------------------------------------------- /_layouts/without-plugin.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 |
3 |
4 | 5 |
6 | 7 |
8 | {% include breadcrumbs.html %} 9 |

{{ page.title }}

10 |
11 | 12 |
13 | {{ content }} 14 |
15 |
    16 | {% assign items = site.without-plugin | sort: 'title' %} 17 | {% for item in items %} 18 |
  • {{ item.title }}
    • 19 | {% endfor %} 20 |
21 |
22 |

Why no plugins?

23 | 24 |

Plugin-free solutions are easier to 'install' and cheaper to host. If you use no plugins, you can simply choose to host your Jekyll project on GitHub Pages. GitHub Pages allows you to deploy your site for free on GitHub, with a custom domain name!

25 |
26 | 27 | 28 | 29 |
30 |
31 |
32 | 33 | {% include footer.html %} 34 | -------------------------------------------------------------------------------- /_posts/2015-11-09-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Jekyll against the rest of the world 3 | date: 2015-11-09 00:00:00 Z 4 | --- 5 | 6 | Heavy with confidence, I would deposit my lumbering frame in the middle of the room. My choice to go all static had been a good one. It was quite a serene scenery—nothing could touch me. 7 | 8 | There were website owners running around wildly, chasing WordPress security vulnerabilities, while at the same time trying to plug holes, which the dubious free plug-ins they downloaded had ripped into their very essence. 9 |
I saw a man standing at the window and bashing his head against it in a slow rhythmic pace. This wasn’t a medical condition. He was simply repeating the rate at which his PHP-based and database-driven publishing solution would accept new requests. 10 |
From the corner of my eye I could make out a woman who was frantically flailing her arms about. She was trying to get into the room. Unfortunately, no one would let her in—her website had been infected with malware and whenever someone tried to visit it, there was a warning, urging users to run away as fast as they could. 11 |
Static publishing, oh blissful serenity. Why do I like you so much? 12 | 13 | ### Dynamic is evil 14 | 15 | It’s not, really. But bear with me for a moment. 16 |
Imagine you’re publishing a new post on your site. How often does that content change? Is it really necessary to recreate the final HTML output you deliver to your users every single time someone accesses your site? Query the database, run it through the templating engine, run it through plugins, render HTML, deliver. That’s a lot of work. 17 |
Most likely, you won’t notice this immediately. But if your site suddenly becomes popular, chances are, it won’t scale very well. It could go down. Of course there’s options for you if you wish to stay dynamic and have that flexibility. You could use caching plugins or even full-fledged web accelerators like Varnish. To me, this is just throwing huge piles of code and applications at the problem. 18 | 19 | [...] 20 | 21 | *This is the first part of an article from Tobias Horvath, posted at [tobyx.com](https://tobyx.com/2015/jekyll-vs-world).* -------------------------------------------------------------------------------- /_posts/2016-02-03-github-pages-now-faster-and-simpler.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GitHub Pages now faster and simpler 3 | date: 2016-02-03 00:00:00 Z 4 | --- 5 | 6 | GitHub Pages is now running the latest major version of Jekyll, Jekyll 3.0, and with it, many of the complexities associated with publishing have been further simplified, meaning it's now easier and faster to publish beautiful sites for you and your projects. 7 | 8 | * A more intuitive Markdown experience 9 | * The highlight zone 10 | * Need for speed 11 | * Two additional changes 12 | 13 | Read more about these changes in the [full article](https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-0). 14 | 15 | The changes introduced today promise to make GitHub Pages a faster, more intuitive experience for new and power users alike. For more information on upgrading, see Jekyll's 3.0 upgrade guide, and if you have any questions about Jekyll 3.0, the upgrade process, or just GitHub Pages in general, please get in touch with us. 16 | 17 | Happy (simplified) publishing! 18 | 19 | -------------------------------------------------------------------------------- /_posts/2016-06-04-why-use-jekyll.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Why should you use Jekyll? 3 | date: 2016-06-04 00:00:00 Z 4 | --- 5 | 6 | https://www.youtube.com/embed/iWowJBRMtpc?rel=0&showinfo=0&start=90&end=163 7 | 8 | Why should you use Jekyll? Here is a [nice video](https://youtu.be/iWowJBRMtpc?t=90s){:.no-lightbox} explaining what it is and why it is awesome. 9 | 10 | -------------------------------------------------------------------------------- /_posts/2016-09-21-getting-started-with-jekyll.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting started with Jekyll 3 | date: 2016-09-21 00:00:00 Z 4 | --- 5 | 6 | I have written a three step [Getting Started manual for Jekyll](/getting-started/). The manual can be followed by anyone (no command line needed). Everything you need to do, can be done in a browser and a text editor. 7 | 8 | Jekyll/a static sites are quick to develop, simple to adjust, hosting is cheaper and they can be easily optimized for SEO and speed. As a bonus, static websites are extremely stable and they can handle a huge amount of visitors. 9 | 10 | So do you want a next-generation website? Follow the [manual](/getting-started/)! Your first Jekyll site is only minutes away! 11 | -------------------------------------------------------------------------------- /_posts/2017-10-17-major-update.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Major update: Jekyll without plugins' 3 | date: 2017-10-17 00:00:00 Z 4 | --- 5 | 6 | This site exists now for almost two years. It has been a place to collect scripts I have created during the production of over 70 commercial Jekyll websites (I create about 30 commercial Jekyll website per year). It was time to reorder my scripts, so I have rewritten their descriptions to fit the theme 'Jekyll without plugins'. 7 | 8 | For easy reuse, I adjusted the scripts so that they work on any website without adjustments (assuming you have a 'site.url', 'site.title' and 'site.description' variable in your '_config.yml' file). I made downloadable includes of each one of them, including an instruction on how to 'install' them. Note that all scripts that you find on this website are also implemented on this website itself. This makes this site a living example for its own scripts. 9 | 10 | I consider the site to be a success when I succesfully use it myself as a library. Please feel free to do the same. 11 | 12 | -------------------------------------------------------------------------------- /_posts/2017-11-01-what-is-github-pages.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: What is GitHub Pages? 3 | date: 2017-11-01 00:00:00 Z 4 | --- 5 | 6 | https://www.youtube.com/watch?v=2MsN8gpT6jY&autoplay=1 7 | 8 | Ready to get started? Build your own site from for free at [Github Pages](https://pages.github.com/) and use Jekyll Codex for all your code snippets! Github Pages even offers manuals on how to set up Jekyll, how to use your own custom domain, and how to create custom 404 pages. Just so you know: This website is [hosted on Github](https://github.com/jhvanderschee/jekyllcodex) too. 9 | 10 | -------------------------------------------------------------------------------- /_posts/2017-11-17-cloudcannon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'CloudCannon CMS: edit with ease' 3 | date: 2017-11-17 00:00:00 Z 4 | --- 5 | 6 | CloudCannon is a cloud-based content management system (CMS) and hosting provider for static and Jekyll websites. Agencies, freelancers and enterprise teams use CloudCannon to deliver CMS editable websites to clients and non-technical team members. 7 | 8 |
9 | 10 | CloudCannon is pure magic. Just add `class="editable"` to your HTML elements, and your static website has a full featured CMS. Jekyll is also fully supported. Do you want to host your websites on Github pages? No problem. Just connect your Github repository to CloudCannon. This allows you to host on Github and edit your content seamlessly in CloudCannon. 11 | 12 | Interested? Take a look at the very friendly [CloudCannon pricing](https://cloudcannon.com/pricing/). You can even start for free. 13 | 14 | -------------------------------------------------------------------------------- /_posts/2017-11-18-building-a-webshop-with-jekyll.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Building a webshop with Jekyll 3 | date: 2017-11-18 00:00:00 Z 4 | --- 5 | 6 | This has been on my wish-list for almost two years now: building a simple webshop in Jekyll without paying a monthly fee to a third party. And I have finally succeeded! To see how it works, please visit my [donate page](/donate). The webshop requires just two settings, the email address for the confirmation and your Plink payment link. Setup can be done in minutes and only requires a Mollie account. There are no limitations on the layout of the product pages. It uses HTML API, a principle on which Lea Verou from MIT has done a decent amount of research and is proven to be easy to implement. In the donate page I have shown how this can work for product variants. 7 | 8 | The webshop accepts all payment methods from Mollie: 9 | 10 | - Mastercard 11 | - Visa 12 | - American Express 13 | - PayPal 14 | - SEPA Bank Transfer 15 | - SEPA Direct Debit 16 | - Bitcoin 17 | - SOFORT Banking 18 | - iDEAL 19 | - Bancontact 20 | - KBC/CBC Payment Button 21 | - Belfius Pay Button 22 | - paysafecard 23 | - CartaSi 24 | - Cartes Bancaires 25 | - Gift cards 26 | 27 | This webshop is far from perfect. It has no stock keeping, no VAT calculations and no automated invoices. However, this webshop does allow you to sell products in almost any country for a very small fee. All fields in the checkout form are automagically added to your confirmation email and when you add radio buttons with a price and description, these values will be added to the order (i.e. gift wrapping or shipping method). 28 | 29 | -------------------------------------------------------------------------------- /_posts/2017-12-07-interview-with-joost-van-der-schee.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Interview with Joost van der Schee 3 | date: 2017-12-07 00:00:00 Z 4 | --- 5 | 6 | This is a double interview with Michael Rose, who was interviewed by [{static is} The New Dynamic](https://www.thenewdynamic.org). I borrowed their questions and answered them myself. Please also read [his interview](https://www.thenewdynamic.org/article/interview-michael-rose/){:.gray}, as it is very inspiring. 7 | 8 |
{% include image-gallery.html folder="/uploads/joost" %}
9 | 10 | ### Hi Joost, how would you introduce yourself? 11 | 12 | I consider myself to be a front-end developer. I graduated as Industrial Design Engineer, but started as a self-thought self-employed programmer as soon as I finished my masters 10 years ago. 13 | 14 | ### How did you come to adopt Jekyll as a publishing platform? 15 | 16 | I already sold static websites since 2000, using Adobe Contribute as client CMS, and people asked me increasingly often to fix their hacked WordPress sites. That is why the Smashing Magazine article [Why Static Site Generators Are The Next Big Thing](https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/){:.gray} immediately got me interested. I looked up what the most popular SSG was (a lesson I learned from using WordPress) and got started. Before 2000, when I started using Adobe Contribute, I was using a static site generator called 'Merlin', built by my twin brother. It was built in 1996 in PHP and was database-driven. It used a custom type of Markdown in combination with FTP for deployment. The rise of flat files for content and version control in Git have improved things a lot, since then. 17 | 18 | ### What kind of websites are you working on? 19 | 20 | I build websites for designers/advertising agencies. I think I build around 30 static websites each year. They vary from one-pagers to big corporate websites with all the bells and whistles. 21 | 22 | ### What do you like about the SSG workflow? 23 | 24 | There are two things I like about working with SSGs. First of all their simplicity. Flat files are easily viewed, edited, and tranformed into HTML. There’s no magic to process, you can build the workflow you want. Second of all their robustness. The fact they don’t rely on (communication to) a database means you have got so much less to worry about. Any hosting environment will do and security is not an issue (anymore). 25 | 26 | ### What is your most favorite feature in Jekyll? 27 | 28 | I do not really have a favorite feature. But what stands out about Jekyll is the fact that it has a solid community. I love things like [JekyllConf](https://jekyllconf.com/){:.gray}, a Jekyll conference, the [excellent documentation](https://jekyllrb.com/){:.gray} and the fact that there are so many different good graphical CMS systems. [CloudCannon](https://cloudcannon.com/){:.gray} is absolutely fabulous, but [Jekyll Admin](https://jekyll.github.io/jekyll-admin/){:.gray} and [Forestry.io](https://forestry.io/){:.gray} are pretty good too. These things are most definitely all related. 29 | 30 | ### What feature do you miss the most? 31 | 32 | Build speed is my main problem with Jekyll. Not for this website, as this one builds in under 5 seconds, but some of my client sites take several minutes to build. That is why I am currently porting this website to Hugo at [hugocodex.org](http://hugocodex.org){:.gray}. I want to be able to choose Hugo when needed and might even switch to Hugo completely in the future. 33 | 34 | ### Why is there so few Jekyll quality themes? 35 | 36 | Yes, that is really strange. I think most Jekyll developers are people like Michael Rose. They are pretty good at CSS and they love to build themes and layouts. Jekyll also makes that really easy. Maybe it is too easy to build your own theme... I really don't know. 37 | 38 | ### Why aren’t there more webdesigners working with Static Site Generators? 39 | 40 | I think a lot of webdesigners think that SSG's cannot deliver an high-end editing experience for clients. They think manual image resizing is needed, form builders are not an option and that graphical CMS systems have too limited functionality. Also... clients often explicitly ask for a WordPres solution, as that is the only thing they know. They also often think that WordPress sites get the best Google ranking. So basically because Static Site Generators are not very well known yet. -------------------------------------------------------------------------------- /_posts/2017-12-20-i-hire-people-they-do-a-website-it-costs-me-three-dollars.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: I hire people, they do a website, it costs me $3 3 | date: 2017-12-20 00:00:00 Z 4 | --- 5 | 6 | https://www.youtube.com/watch?v=k_rdevccD08&autoplay=1 7 | 8 | I love internet memes. Especially internet memes about the internet. Ofcourse there is [grumpy cat](/uploads/grumpycat2.jpg){:.gray} and the good old [rickroll](https://www.youtube.com/watch?v=dQw4w9WgXcQ&showinfo=0&rel=0){:.gray}, but there is nothing quite as satisfying as making fun of [Mac Donalds rump](/uploads/macdonaldsrump.jpg){:.gray}. And fortunately the big leader does not stop at saying they cost only three dollars. Because the fun thing about websites being so cheap, he explains, is that you can have so many websites, you can literally have them [all over the place!](https://www.youtube.com/watch?v=PkcqAkvZKlo){:.gray} That is right. All over the place. I think he refers to Amazon, GoDaddy, Bluehost, Google, etc., but I am not sure. He might also be referring to the internet itself. Who knows... 9 | 10 | So you might catch me soon, sitting at a bar, being wasted, wearing my 'you are the CSS to my HTML' t-shirt and trying to impress a girl with the following lines: "Wait listen... I have so many websites, I have them seriously... burp... all over the place... so many. And they cost me only three dollars. I just hire people." 11 | 12 | -------------------------------------------------------------------------------- /_posts/2018-01-02-lightbox-improved.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lightbox improved 3 | date: 2018-01-02 00:00:00 Z 4 | --- 5 | 6 | Happy New Year! As a present from me to you I have improved the lightbox. I hope you like it. 7 | 8 | I updated some style rules with an '!important' tag, to prevent lightbox styles accidentally being overruled by the theme. Additionally the lightbox now has keyboard support. The arrow keys (left and right) can be used to loop over the images. Pressing the 'escape' key (Esc) will close the lightbox. Finally I added swipe support through [a lightweight vanilla-js swipe script](https://www.cssscript.com/detect-swipe-events-vanilla-javascript-swipe/) I found online. The swipe detection also works on desktop (tested in Firefox). 9 | 10 | Want to test the improved lightbox? You can do that at the [lightbox page](/without-plugin/lightbox) by clicking on the links. 11 | 12 | -------------------------------------------------------------------------------- /_posts/2018-07-17-digital-downloads-in-the-webshop.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Digital downloads in the webshop 3 | date: 2018-07-17 00:00:00 Z 4 | --- 5 | 6 | Every now and then I get messages through Crisp (the chat button on the bottom of this website). Some people ask questions, some want to say thanks and some people provide great ideas. The latter was the case yesterday. Andrei (I will leave out his last name for privacy reasons) introduced himself to me and asked if it would be possible to use the webshop in Jekyll Codex to create digital downloads. 7 | 8 | At first I thought that his request would require a lot of changes and I was somewhat reluctant. But the more we talked, the clearer it became that these changes were actually quite subtle. We both agreed that if we wanted to use Mollie's Plink service we had to get rid of the cart, as multiple downloads would complicate things unnessecary. We ended up with an extra variable in the products, called 'payment_link'. Leaving this empty would make the webshop behave normally. Entering a product-specific payment link, would send the buyer to the checkout, bypassing the cart, by adding the variables to the URL instead of to the cart cookie. People would still be able to use the cart, only not for products with a product-specific payment link. One could argue that this might be a bit confusing (using the shopping cart only for some products). However, in a real-life scenario it would be more likely to have a webshop with only digital downloads or no digital downloads at all. 9 | 10 | I am very pleased with the end-result. Feel free to [check it out](/donate/digitaldownload/). I also like it that people actually feel free to request and discuss features on this website. That is what this website is for. Thank you for your input and your inspiration! Keep it coming! 11 | 12 | -------------------------------------------------------------------------------- /_posts/2018-08-22-lightbox-captions-added.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lightbox captions added 3 | date: 2018-08-22 00:00:00 Z 4 | --- 5 | 6 | I was on a holiday in France and got an email from a guy named Stu who was using Jekyll Codex. He wrote: 7 | 8 | > "I have been developing a Jekyll website (hosted on github pages) and have made huge progress thanks to your tutorials and 'without plugins' codex. Thank you for those!" 9 | 10 | I was very pleased to hear that. But what was even better, was that he told me he had managed to alter the code of the lightbox in a way that it displayed the filename as a caption. A very clever and minimalistic idea. I asked him if I could review his code and add the functionality to the 'without plugins' directory. He immediately agreed. I polished the solution a little, by using the filename to also add automatic `alt` and `title` attributes. I also made it possible to disable the captions by using a front matter variable on the page called `lightbox_captions`, which can be set to `false`. If you want to disable the captions on the 'image gallery' or the 'image gallery index', you can simply set their appearance to `display: none` through CSS (it is just a span). Finally I added a small black border around the white text of the caption, to make them legible under all circumstances, a solution that is also used in closed captions on television. I think Stu and I did a pretty good job. Take a look at the end result here: 11 | 12 | - [Lightbox (and gallery) with captions](/without-plugin/image-gallery) 13 | - [Lightbox without captions](/without-plugin/lightbox) 14 | 15 | If you find any bugs, please let me know. Please feel free to suggest any other additions or improvements. Once again I would like to conclude by saying that I am grateful for your feedback and that it is a great feeling to built something that people like and use. Happy coding! -------------------------------------------------------------------------------- /_posts/2018-11-02-gdpr-compliant-comment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GDPR compliant comments 3 | date: 2018-11-02 00:00:00 Z 4 | comment_issue_id: 4 5 | --- 6 | 7 | Being able to add comments to your posts is good for visitor engagement. Therefore I created a [GDPR compliant comment script for Jekyll](/without-plugin/comments/). You should not send your valuable visitor data to a random surveillance company. Especially not, when the only purpose of that company is to make money from this data and when this company has a bad security reputation. Yes, I am talking about Facebook and Disqus. A quote about Disqus I found on the internet: 8 | 9 | > Data is stored on Disqus servers, and the company has been criticized for its user tracking activities. The company suffered two major security breaches, one in 2013 and another in October 2017. A snapshot of a database containing 17.5 million user email addresses, login dates and sign-up dates was copied according to Disqus in the latest breach. 10 | 11 | I have chosen GitHub for hosting comments, as you probably host your website on GitHub anyway, GitHub has a decent reputation and it is possible to get a Data Processing Agreement (DPA) from GitHub. If you host your website on GitHub (Pages) you do not send any additional information to a third party (as all requests already go to GitHub), which makes you not any less GDPR compliant. If you host your website elsewhere, you should make sure that your visitor has approved third party scripts through the [cookie consent banner](/without-plugin/cookie-consent/){:.gray}. I have implemented a 'require_cookie_consent' variable to make the third party script approval optional. 12 | -------------------------------------------------------------------------------- /_posts/2018-11-13-add-your-website-to-the-home-screen-of-ios.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Add your website to the home screen of iOS 3 | date: 2018-11-13 00:00:00 Z 4 | --- 5 | 6 | I have been creating quite a few native apps for clients. Because I am a big fan of website technology (simple and safe), I have been building native apps that consist of only a web view. They are basically website wrappers or browsers without a URL bar. This works fine for Android, but Apple refuses to allow these kind of apps in the Apple store. They will not tell you what the minimum functionality is you have to add, although big American companies, like Basecamp, seem to get away with only an extra menu. Somehow I get the feeling that might not be the case in my situation. Because I see no future in developing for a closed platform with arbitrary rules, I have chosen to make these websites installable as mobile web apps on iOS devices. In laymans terms this is called: adding the website to the home screen. Web developers call this PWA's (Progressive Web Apps). 7 | 8 | If we want to add a website to the home screen, we are confronted with quite a few complications: 9 | 10 | - A home screen icon (PWA) can only be created in the native browser of the platform (so not in Chrome for iOS). 11 | - Clicking a link on the home screen can only be detected by the website (through javascript) if it opens in PWA mode (full screen, without an address bar). 12 | - Apple/iOS does not allow a page load (link with a href) in a PWA. It will open the link in Safari (in a new window). 13 | - A PWA does not share its cookies with the browser, nor does the browser share its cookies with the PWA. 14 | 15 | The desired functionality, however, is very simple. We want to [show a (daily) reminder](/uploads/addtohomescreen1.jpeg) that tells you that you can install the mobile app. If you have 'installed' the app, its icon should be [added to the home screen](/uploads/addtohomescreen2.jpg). When you click on this home screen icon, the reminder should (obviously) be hidden forever. 16 | 17 | To accomplish this we let javascript detect Safari on iOS. The reminder shows the instructions on how to add the website to the home screen. If you dismiss these instructions a cookie will be set that expires in a day. When the user actually installs the app and clicks on the home screen icon, we let javascript detect this PWA version of the website. We do this by testing the 'window.navigator' for the 'standalone' variable, which is true in case of a PWA. We then let javascript add a parameter to the URL of every link on the page of the PWA. Once a link is clicked, the browser opens and the extra parameter makes sure a cookie is set (in the browser) that hides the reminder forever. 18 | 19 | Do you want to know what that looks like? Check the image links in this article or open this page on iOS. If you like this implementation, you can use [this code](/without-plugin/add-to-home-screen-ios/) too, as I have added it to the without-plugins library of this website. -------------------------------------------------------------------------------- /_posts/2018-12-09-improvements-to-the-form-builder.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Improvements to the form builder 3 | date: 2018-12-09 20:03:37 Z 4 | --- 5 | 6 | Today I have made some improvements to the form builder. It is now possible to have multiple forms on one page. I also added Netlify as a form engine. Netlify is a hosting platform for static websites that can also handle form submissions. Note that Netlify's free plan limits you to 100 submissions per month. If your website sends more forms you will be bumped to the paid plan, which starts at a hefty 45 dollar a month. Therefore you need to enable a recaptcha on your form (otherwise you will end up paying for the spam submissions alone). To do so I added 'recaptcha' as a new 'input type'. 7 | 8 | If you use Netlify as your form engine, you only need to write this in your form builder: 9 | 10 | ``` 11 | - name: recaptcha 12 | input_type: recaptcha 13 | placeholder: 14 | required: true 15 | ``` 16 | 17 | If you do NOT use Netlify as your form engine, but one of the others (cloudcannon, formspree or formbucket), you need to write this: 18 | 19 | ``` 20 | - name: recaptcha 21 | input_type: recaptcha 22 | placeholder: [your recaptcha site-key] 23 | required: true 24 | ``` 25 | 26 | Additionally you need to add this to your head (non-Netlify only): 27 | 28 | {% raw %}{% if page.forms %}{% endif %}{% endraw %} 29 | 30 | Note that the above code assumes you use the latest version of the [form builder](/without-plugin/form-builder/). Happy coding! -------------------------------------------------------------------------------- /_posts/2018-12-10-about-availability-and-redundancy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About availability and redundancy 3 | date: 2018-12-10 00:00:00 Z 4 | --- 5 | 6 | The hardest problem to solve with static site generators, is availability and redundancy. In a monolithic system you would just replicate the server and you will have a complete fail-over. This is not so simple for Static Site Generators. However, you can quite easily deploy a website to multiple platforms. I have used this website as an example. 7 | 8 | ### What if the hosting is down? 9 | 10 | When this website goes down, I just need to point the DNS of the domain name to another service and it is back online. This process can be automated with [DNS failover](https://dnsmadeeasy.com/services/dnsfailover/){:.gray}. This is a DNS system that automatically updates your records based on the availability of the endpoints in the record. Magic, right? 11 | 12 | - This website is available at Netlify hosting at [https://boatman-bird-64062.netlify.com/](https://boatman-bird-64062.netlify.com/){:.gray}. 13 | - This website is available at CloudCannon hosting at [https://gifted-pooch.cloudvent.net/](https://gifted-pooch.cloudvent.net/){:.gray}. 14 | - This website is available at Github hosting at [http://jhvanderschee.github.io/jekyllcodex/](http://jhvanderschee.github.io/jekyllcodex/){:.gray}. 15 | 16 | ### What if the CMS does not work properly? 17 | 18 | I have set up different CMS services that work at the same time. Note that each CMS has his own levels of access. CloudCannon provides full/code access AND limited/editor access. Forestry.io and Netlify CMS only provide limited/editor access and Github only provides full/code access. 19 | 20 | - This website can be edited directly on [Github](https://github.com/jhvanderschee/jekyllcodex){:.gray}. 21 | - This website can be edited in [Forestry.io](https://forestry.io){:.gray}. 22 | - This website can be edited in [CloudCannon](https://cloudcannon.com){:.gray}. 23 | - This website can be edited in [Netlify CMS](https://www.netlifycms.org){:.gray}. 24 | 25 | ### Then why is it hard? 26 | 27 | In reality there is a lot more going on in a static site. It is not just the hosting and the CMS. This site, for example, uses dynamic image resizing. I use [images.weserv.nl](https://images.weserv.nl){:.gray} for that for which I currently have no failover. CloudCannon can solve the image resizing partially for us, making [images.weserv.nl](https://images.weserv.nl){:.gray} potentially obsolete, but it is not yet very efficient and I have not seen any other CMS do this so far. Then there is 'forms'. As you can see in the [form builder](/without-plugin/form-builder) I have implemented several form engines... and for a reason. You want to be able to easily switch your form engine. Forms can use the platform-specific solution, like [forms on Netlify](https://www.netlify.com/docs/form-handling/){:.gray} or [forms on CloudCannon](https://docs.cloudcannon.com/hosting/forms/introduction/){:.gray}. These are reliable solutions, but they only work on their own hosting platform. You can also choose platform-independent form handlers like [Formspree](https://formspree.io/){:.gray} or [FormBucket](https://www.formbucket.com/){:.gray}. If you use them, your forms will work on any hosting platform, but they have a bigger chance of being down. Finally, each website has some very specific solutions, like a [webshop](/without-plugin/webshop) or [comments](/without-plugin/comments), using [Github](https://github.com/){:.gray} or [Staticman](https://staticman.net/){:.gray}. These specific solutions are very hard to replace. 28 | 29 | ### How to best solve the redundancy problem 30 | 31 | For important forms I have set up an extra AJAX form submission, to have the form entry duplicated. When the AJAX form submission returns an error code it nevertheless submits the 'normal' form. Setting up a failover DNS is a good measure too, as well as configuring multiple CMS systems. In reality every service fails every now and then and the more services you use, the more failure you will encounter. The most important thing is to be aware of it, so you can limit the impact. This can be done by monitoring uptime. I use [Uptime Robot](https://uptimerobot.com){:.gray} for this. If a service goes down, [Uptime Robot](https://uptimerobot.com){:.gray} will send me an email. If that happens I assess what to do next. A short term solution is to switch from provider and a long term solution is to improve the redundancy. 32 | -------------------------------------------------------------------------------- /_posts/2019-09-22-speaking-at-jekyllconf2019.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Speaking at JekyllConf2019 3 | date: 2019-09-22 00:00:00 Z 4 | --- 5 | 6 | It has been an enormous honor to speak at JekyllConf2019. This was my first conference talk ever. Fortunately, I could speak live from my own home-based studio, so it involved no flying around the world. After my talk I got a nice reaction from the JekyllConf team (see the tweet), which made me happy. That was exactly what I wanted to show: You can build a professional website with a CMS in under 20 minutes by using nothing but a browser. Want to know more? You can find my talk by clicking on the image below. 7 | 8 |

9 | 10 | > [#JekyllConf](https://twitter.com/hashtag/JekyllConf?src=hashtag_click) @jekyllrb Thank you for your [@jhvanderschee](https://twitter.com/jhvanderschee), epic to see that you can build a Jekyll Site in under 20 minutes. If you missed it, catch up later on at [https://jekyllconf.com](https://jekyllconf.com) 11 | 12 | I was accompanied by some great speakers. The message of Chris Ferdinandy really resonated with me. His statement was that the web is a mess and that we should fix it by using less frameworks. You can find his talk here: 13 | 14 |

15 | 16 | > [#JekyllConf](https://twitter.com/hashtag/JekyllConf?src=hashtag_click) let's build a simpler, faster world wide web (be a dev dynosaur). Thanks [@ChrisFerdinandi](https://twitter.com/ChrisFerdinandi) for a super inspiring talk! 17 | 18 | Before Chris, Pieter Roozen talked about using Jekyll as a data-source for React, perfectly illustrating the point Chris was trying to make ;-). If you are looking for some good references about using Jekyll to build JSON files, [look here](https://learn.cloudcannon.com/jekyll/output-json/). After Pieter, Hui Jing talked a little more about data files, a nice and very informative talk to listen to. After Chris his talk, Cat Roebuck spoke about using Jekyll on a really large project. She taught us some great best practises, including the use of themes. After her talk, Matthew Loberg thaught us how to use AWS as your hosting provider. Finally George Phillips spoke. He talked about Enterprise Design Systems. 19 | 20 | You can find all talks on [https://jekyllconf.com](https://jekyllconf.com). 21 | -------------------------------------------------------------------------------- /_posts/2019-11-10-a-complete-rebuild-of-jekyll-codex.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: A complete rebuild of Jekyll Codex 3 | date: 2019-11-10 00:00:00 Z 4 | --- 5 | 6 | I wrote in July that Jekyll Codex displays in Google has risen from almost zero to an average of 200 a day. I am happy to announce that that amount has doubled in the last four months! The average amount of clicks has also risen from 20 to a little under 30 a day. This makes for an average of around 900 visits per month. Great news! I hope that this rebuild will improve my Google ranking even further. 7 | 8 | ### A big day for Jekyll Codex 9 | 10 | Today I have launched a complete rebuild of the Jekyll Codex website, which I [announced](/blog/ditching-jquery-and-twitter-bootstrap/) a while ago. You may not see it, but I have rewritten all CSS and scripts, so they will no longer use jQuery nor Twitter Bootstrap. This means the website has gone on quite a diet, because jQuery and Twitter Bootstrap accounted for a hefty 250kb (compressed) per page load. Page loads have gone down from 400kb to less than 150kb. This influenced the Speed Index, which is now 1.0s instead of 1.8s. Quite some progress, which improves accessibility and SEO. 11 | 12 | You may think that NOT using jQuery and Twitter Bootstrap will make your (or my) life harder. You may also think that 250kb on your first page load is 'not a big deal'. But plain Javascript has come a long way and writing plain Javascript is alsmost as easy as writing jQuery. Also, not having to fight 136kb of CSS from Twitter Bootstrap is absolutely worth having to re-style your inputs. But the most important reason is that this approach is essential when you want to build [websites that load instantly](https://www.usecue.com/blog/websites-that-load-instantly/). And, as [Google promotes fast loading websites](https://www.usecue.com/blog/google-will-shame-slow-websites/) in its search engine, we are talking about improved SEO too. So this change is not about short term results, but about better websites performance in the long run. It is [a strategy to get a 100% Google Lighthouse score](https://www.usecue.com/blog/how-to-get-a-100-google-lighthouse-score/). 13 | 14 | ### So what has changed? 15 | 16 | Responsiveness is now fully handled in plain CSS. My philosophy is that CSS and JS have evolved to a point where frameworks do more harm than good. Making a website responsive is very easy when you use flexbox and/or CSS columns. Therefore I changed the 'Mobile menu' script into a 'Toggle menu' script that is no longer dependent on Twitter Bootstrap and jQuery. I also rewritten all sizes and break-points (media queries) from 'px' to 'rem'. This makes the website truly scalable with a single setting: the font-size in 'px' on the HTML element. 17 | 18 | The most popular item that has changed is the lightbox. I did not re-add the 'swipe' feature, as it was causing some bugs. I might add this feature later, but for now this functionality is gone. I did not re-add the captions, as I found myself removing them on every website I was using the lightbox and I was having enough on my plate already. I might add this functionality later. 19 | 20 | Another thing I rebuilt is the slider, or carousel. I replaced the Twitter Bootstrap variant with a pure CSS carousel. When I have time left I will re-add things like HTML texts in the slides and the option to choose for a fade transition. 21 | 22 | The biggest change of all is the webshop. It depended on a Ajax call to Formspree. Formspree, however, removed these Ajax calls from their free tier. Although the Ajax call was still working, I replaced it by a simple redirect. This allows you to choose any form handler you want and makes the webshop a lot easier to set up. Additionally I simplified the product template and data structure and cour cart is now stored in a JSON object in local storage instead of in a string in a cookie. 23 | 24 | ### Not yet completely finished 25 | 26 | Although 99% of the work is ready, some things are still depending on jQuery. They will be replaced soon. These are the following items: 27 | 28 | - Add to homescreen 29 | - Better forms 30 | - Comments 31 | 32 | ### You liked the old code better? 33 | 34 | If you do not like all this new fancy stuff you can still visit the [jQuery and Twitter Bootstrap version](https://fresh-butterfly.cloudvent.net) of this website at a CloudCannon development domain. This is useful if your website is using jQuery anyway or if your website is based on the old code. I will not work on/update the old version anymore. If you want to move foward, the new way is the way to go ;-). 35 | -------------------------------------------------------------------------------- /_posts/2020-02-25-instafeed-js-alternative-for-instagram.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Instafeed.js alternative (for Instagram) 3 | date: 2020-02-25 00:00:00 Z 4 | --- 5 | 6 | WARNING: THIS NO LONGER WORKS! 7 | Still want [Instagram on your website without API](/blog/instagram-on-your-website-without-api/)? Check my [new post](/blog/instagram-on-your-website-without-api/). 8 | 9 | To show a users Instagram account pictures I have been using Instafeed.js. However, Instafeed.js was not only non-trivial to set up, but it also relied on the legacy API from Instagram that will be discontinued on March 2nd 2020 or [March 31 2020](https://developers.facebook.com/blog/post/2020/01/14/instagram-basic-display-api-long-lived-access-tokens-available/){:.gray}. Therefore, it was time for a change. The new Instagram Basic Display API [requires server-side scripts](https://github.com/stevenschobert/instafeed.js/issues/635#issuecomment-576473432){:.gray}. A pure Javascript solution, like Instafeed.js, that directly gets content from Instagram, is no longer possible. I looked at skipping the authentication by scraping a users public profile page, but came to the conclusion that cross-origin resource sharing (CORS) and potential IP-blocking from Instagram would make that a difficult and unreliable route. 10 | 11 | ### The solution 12 | 13 | The solution I came up with is actually quite simple: fully split the server-side and client-side part and use XML(RSS) as an intermediate. For the server-side part I used Zapier (for free). Zapier authenticates with Instagram and gets the required long lived access token. Using this token it listens to the users feed on a five minute interval. When it discovers a new post/image, it adds this to a Zapier RSS feed that has nothing to do with Instagram. Zapier takes care of the CORS policy on the RSS feed. Therefore, we only have to visualize the RSS feed. This requires just a few lines of Javascript and a touch of CSS. 14 | 15 | ### The code 16 | 17 | You can find the code below. Please read the [installation manual](https://jekyllcodex.org/without-plugin/instagram/) on how to set Zapier up. Note that using Jekyll is not a requirement. 18 | 19 | ``` 20 |

21 | 22 | 23 | 35 | 36 | 41 | ``` 42 | 43 | Keep it simple! 44 | 45 | WARNING: THIS NO LONGER WORKS! 46 | Still want [Instagram on your website without API](/blog/instagram-on-your-website-without-api/)? Check my [new post](/blog/instagram-on-your-website-without-api/). -------------------------------------------------------------------------------- /_posts/2020-10-07-instagram-on-your-website-without-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Instagram on your website without API 3 | date: 2020-10-07 00:00:00 Z 4 | --- 5 | 6 | I have created a [new version of the instagram include](/without-plugin/instagram) to show instagram images on your Jekyll website. 7 | 8 | ### Problem 9 | 10 | My previous version was an [instafeed.js alternative](/blog/instafeed-js-alternative-for-instagram/). Instafeed.js used to work without API calls. The new version of instafeed.js, however, required running your own server to keep your API tokens fresh. I thought that was a bit cumbersome and found a relatively easy way to circumvent this, by letting Zapier do the heavy lifting. However, there were some downsides to this approach. When, a few months ago, Instagram started to change the URL's of the static images, this solution no longer worked (as I was storing only the URL's). 11 | 12 | ### Solution 13 | 14 | Fortunately I found an alternative solution that is even easier. Just add the following line to your code and you will find your instagram images in a nice 5 by 2 grid. You can view an [example](/without-plugin/instagram). More information about this solution can be found on the [PPI Loader website](https://profilepageimages.usecue.com/). 15 | 16 | ``` 17 | {% raw %}{% include instagram.html username="jhvanderschee" %}{% endraw %} 18 | ``` 19 | 20 | Keep it simple! 21 | -------------------------------------------------------------------------------- /_posts/2021-01-19-instagram-without-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Instagram without API 3 | date: 2021-01-19 00:00:00 Z 4 | --- 5 | 6 | In October of last year [I already wrote](/blog/instagram-on-your-website-without-api) about loading instagram on your website without an API. I edited the post several times since. Let me explain what happened. 7 | 8 | Since [instafeed.js](https://github.com/stevenschobert/instafeed.js) stopped working (in March/June 2020) I have explored several approaches for showing Instagram images on client websites without using the very complicated Facebook API. First I explored [Zapier](https://zapier.com/). I added the Instagram image URL's to a standard RSS feed, but Instagram started changing the URL's of their images over time, which made this solution only suitable for people who post every day. Therefore I explored the concept of a scraper that could fetch the images, using a headless browser. It turned out that Instagram was pretty good at blocking our IP addresses, so this did not work either. I had no choice but to do it the 'right' way... 9 | 10 | Together with my very talented twin brother I created an actual Facebook/Instagram app, called 'profile page images', or [PPI Loader](https://profilepageimages.usecue.com). It authenticates with the Instagram API (so you don't have to) and gets a long lived access token for every user. Every 24 hours a cron job downloads your latest images (when you log in you can fire this job every hour). When your access token is getting old we automatically refresh it for you. Obviously you need to grant the application access to your Instagram account, which has to be done during the registration process. The cron job saves and hosts your images in a public directory on our server. Using these images is [a piece of cake](https://profilepageimages.usecue.com/getting-started). 11 | 12 | Currently we are in a beta phase. The app itself has been approved by Facebook/Instagram (yeah!) and we passed Facebooks Business Validation. Facebook has a way of making simple things pretty hard. Because of this app, you will never have to worry about coding a solution to put Instagram images on your clients website. 13 | 14 | Today I added automatic image scaling to the service. The scaled images have 50% jpg compression, are scaled to a 500px maximum for either width or height and weigh around 20kb each. A grid of ten Instagram images weighs only 200kb, which is approximately the size of one large image. The images are served in a separate folder within your account, called 'small'. Pretty sweet, huh? 15 | -------------------------------------------------------------------------------- /_products/beer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Buy me a beer 3 | image: "/uploads/beer/5.jpg" 4 | images: 5 | - image: "/uploads/beer/2.jpg" 6 | - image: "/uploads/beer/3.jpg" 7 | - image: "/uploads/beer/4.jpg" 8 | - image: "/uploads/beer/1.jpg" 9 | variant_type: size 10 | variants: 11 | - name: half-a-pint 12 | price: 2.75 13 | sku: beerhalfapint 14 | - name: pint 15 | price: 4.25 16 | sku: beerpint 17 | order_number: 2 18 | --- 19 | 20 | I like beer a lot! IPA, Guinness, Stout, craft beers... and I love to try new ones. Buy me half-a-pint to get going or a pint to get a good buzz. -------------------------------------------------------------------------------- /_products/chocolates.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Buy me chocolates 3 | image: "/uploads/chocolates/1.jpg" 4 | images: 5 | - image: "/uploads/chocolates/2.jpg" 6 | - image: "/uploads/chocolates/3.jpg" 7 | variant_type: size 8 | variants: 9 | - name: 10 | price: 9.95 11 | sku: chocolates 12 | order_number: 4 13 | --- 14 | 15 | Buy me a fancy box of chocolates... not for me, but for my wife. Giving her chocolates will most certainly buy me extra programming time in my Linux powered man cave. -------------------------------------------------------------------------------- /_products/coffee.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Buy me a coffee 3 | image: "/uploads/coffee/1.jpg" 4 | images: 5 | - image: "/uploads/coffee/2.jpg" 6 | - image: "/uploads/coffee/3.jpg" 7 | - image: "/uploads/coffee/4.jpg" 8 | - image: "/uploads/coffee/5.jpg" 9 | variant_type: size 10 | variants: 11 | - name: tall 12 | price: 2.5 13 | sku: coffeetall 14 | - name: grande 15 | price: 3.5 16 | sku: coffeegrande 17 | - name: venti 18 | price: 4.3 19 | sku: coffeeventi 20 | order_number: 1 21 | --- 22 | 23 | A perfect coffee in the morning absolutely makes my day. Buy me a small one for a good start or a big one to keep going all day! -------------------------------------------------------------------------------- /_products/feature.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sponsor a feature 3 | image: "/uploads/feature.jpg" 4 | images: 5 | - image: 6 | variant_type: size 7 | variants: 8 | - name: Normal 9 | price: 150 10 | sku: feature 11 | order_number: 6 12 | --- 13 | 14 | You can sponsor a feature from the 'without plugins' page/library. I will not only give you an honourable mention on the site, but I will also let you suggest some additional functionalities of this feature. -------------------------------------------------------------------------------- /_products/share.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Share the love 3 | image: "/uploads/share.jpg" 4 | images: 5 | - image: 6 | variant_name: size 7 | variants: 8 | - title: Normal 9 | price: 0 10 | sku: sharethelove 11 | order_number: 0 12 | --- 13 | 14 | If you like this website, but you do not have any money to spare, please share the love by posting something about this website on social media. You can use the buttons above. They will share the homepage. Thank you, you are the best! -------------------------------------------------------------------------------- /_products/t-shirt.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Buy me a t-shirt 3 | image: "/uploads/t-shirt/view3.jpeg" 4 | images: 5 | - image: "/uploads/t-shirt/view.jpeg" 6 | - image: "/uploads/t-shirt/view4.jpeg" 7 | variant_type: size 8 | variants: 9 | - name: Normal 10 | price: 25.7 11 | sku: tshirt 12 | order_number: 5 13 | --- 14 | 15 | This awesome t-shirt is for sale at [zazzle.com](https://www.zazzle.com/jekyll_t_shirt-235672519224817294). I would really like to have it, but I do not allow myself to spent this much on a single t-shirt. Will you buy me one? -------------------------------------------------------------------------------- /_themes/agency-theme.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Agency theme 3 | layout: page 4 | --- 5 | 6 | dfsfd -------------------------------------------------------------------------------- /_without-plugin/add-to-home-screen-ios.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Add to home screen 3 | --- 4 | 5 | ### Introduction 6 | 7 | This adds a bar with a add to homescreen button to your page. Got a question? Send me an email on jhvanderschee@gmail.com. 8 | 9 | ### Installation 10 | 11 | Step 1. Download the file [add-to-homescreen.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/add-to-homescreen.html) 12 |
Step 2. Save the file in the '_includes' directory of your project 13 |
Step 3. Make sure the bottom of your layout document looks like this: 14 | 15 | ``` 16 | {% raw %}... 17 | 18 | {% include add-to-homescreen.html %} 19 | 20 | {% endraw %} 21 | ``` -------------------------------------------------------------------------------- /_without-plugin/auto-resize-images.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Auto-resize images 3 | --- 4 | 5 | ### Introduction 6 | 7 | If you upload a huge image in CloudCannon (or any other Jekyll CMS), you would love it to be displayed small or cropped. This is super easy if you use an image resize proxy, like [images.weserv.nl](https://images.weserv.nl/). 8 | 9 | ### How it works 10 | 11 | Just create an image tag in your layout file that looks like this: 12 | 13 | ``` 14 | {% raw %}{% endraw %} 15 | ``` 16 | 17 | More info about this service can be found at [images.weserv.nl](https://images.weserv.nl/). -------------------------------------------------------------------------------- /_without-plugin/better-forms.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Better forms 3 | --- 4 | 5 | ### Introduction 6 | 7 | This script makes your forms a pleasure to fill out. It shows graphical validation errors by adding a green thick mark after succesful validation and a red border on error WHILE you fill out your form. The script also allows you to leave the page/form and come back later without loosing your input. Finally the page will scroll animated to the first error in your form after an unsuccesful submit. You can test these features at this [example](/contact){: .gray}. 8 | 9 | ### How it works 10 | 11 | It validates all fields with javascript on blur. It adds 'active', 'valid' and 'error' classes. This enables you to build all kind of nice features. The 'active' class, for example, can be used to create Material Design styled labels that look like placeholders and shrink to make place for the cursor. To make entered values persist, the script places a serialized cookie on your computer with all fields. The cookies name equals the id of the form. In the [form builder](/without-plugin/form-builder/){: .gray} the id of the form is generated and equal to the slugified page URL. 12 | 13 | ### Installation 14 | 15 | Step 1. Download the file [better-forms.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/better-forms.html) 16 |
Step 2. Save the file in the '_includes' directory of your project 17 |
Step 3. Make sure the bottom of your layout document looks like this: 18 | 19 | ``` 20 | {% raw %}... 21 | 22 | {% include better-forms.html %} 23 | 24 | {% endraw %} 25 | ``` -------------------------------------------------------------------------------- /_without-plugin/breadcrumbs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Breadcrumbs 3 | --- 4 | 5 | ### Introduction 6 | 7 | Breadcrumb paths are a single line of links (often placed above the title) that show a page's location in the site hierarchy. Every website should have breadcrumbs, as it benefits SEO as well as the users understanding of the sites structure. 8 | 9 | ### How it works 10 | 11 | This code looks at the path of the current page to destill the breadcrumb path. This approach has a small footprint, as only the current page has to be consulted during the build of the breadcrumbs. Additionally, this code does not require the breadcrumbs to be explicitly defined in the front matter / YML. This means the path can be defined by your file and folder structure or by your (native Jekyll) path variables. The following code looks at the permalink and translates it into a breadcrumb/path. 12 | 13 | [expand] 14 | 15 | ``` 16 | {% raw %}{% endraw %} 27 | ``` 28 | 29 | [/expand] 30 | 31 | ### Installation 32 | 33 | Step 1. Download the file [breadcrumbs.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/breadcrumbs.html) 34 |
Step 2. Save the file in the ‘_includes’ directory of your project 35 |
Step 3. Add the following line to your layout on the place where you want the breadcrumbs to appear: 36 | 37 | ``` 38 | {% raw %}{% include breadcrumbs.html %}{% endraw %} 39 | ``` -------------------------------------------------------------------------------- /_without-plugin/button-modal.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Button modal 3 | --- 4 | 5 | ### Introduction 6 | 7 | I got a [request](https://github.com/jhvanderschee/jekyllcodex/issues/18), asking for a modal window that interceps a click on a link. Click [this link](#){:.buttonmodal} for a demo. You can find the code below. 8 | 9 | ### How it works 10 | 11 | This code looks for any link that contains the class 'buttonmodal'. This link toggles a modal window that lives the footer of your page. Clicking outside the modal closes the modal throught some javascript. The modal has a title, some text and a few links. This data comes from the data folder where it is stored in a file with a yaml extension. 12 | 13 | ### Installation 14 | 15 | Step 1. Download the file [buttonmodal.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/buttonmodal.html) 16 |
Step 2. Save the file in the ‘_includes’ directory of your project 17 |
Step 3. Make sure the bottom of your layout document looks like this: 18 | 19 | ``` 20 | {% raw %}... 21 | {% include buttonmodal.html %} 22 | 23 | {% endraw %} 24 | ``` 25 | Step 4. Download the file [buttonmodal.yaml](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_data/buttonmodal.yaml) 26 |
Step 5. Save the file in the ‘_data’ directory of your project 27 |
Step 6. Add a link with a class 'buttonmodal' to your content using `{:.buttonmodal}`. -------------------------------------------------------------------------------- /_without-plugin/buttons.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Buttons 3 | --- 4 | 5 | ### Introduction 6 | 7 | Allowing people to add buttons to their content is a much requested feature. Although HTML is allowed in Markdown, most people do not know how to write HTML. Others cannot remember the way button classes should be added in Markdown or they use a WYSIWYG editor that does not allow them to do so. This script simplifies the process of adding buttons to Markdown content. 8 | 9 | ### How it works 10 | 11 | The script looks for a link where the link text is contained by square brackets, like this: `[link text]`. It will remove the brackets and add `.btn` and `.btn-primary` classes to the link. If you use Twitter Bootstrap, these buttons will be automagically styled. If not, you will have to add these classes to your CSS. 12 | 13 | [expand] 14 | 15 | ``` 16 | {% include buttons.html %} 17 | ``` 18 | 19 | Example: 20 | 21 | [[Button example]](https://www.google.com) 22 | 23 | Note that the page works perfectly fine when this script does not run. The link just has some brackets around it. 24 | 25 | [/expand] 26 | 27 | ### Installation 28 | 29 | Step 1. Download the file [buttons.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/buttons.html) 30 |
Step 2. Save the file in the '_includes' directory of your project 31 |
Step 3. Make sure the bottom of your layout document looks like this: 32 | 33 | ``` 34 | {% raw %}... 35 | {% include buttons.html %} 36 | 37 | {% endraw %} 38 | ``` -------------------------------------------------------------------------------- /_without-plugin/comments.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Comments 3 | --- 4 | 5 | ### Introduction 6 | 7 | Being able to add comments to your posts is good for visitor engagement. I have chosen GitHub for hosting comments, as you probably host your website on GitHub anyway. Adding a comment can only be done at the GitHub issue page and requires a GitHub account. These things can be considered as down-sides of using GitHub issues for comments. However, this solution does allow you to fully customize the comment tread with CSS and HTML and to moderate all comments. Additionally, GitHub issues allow commenters to write markdown, automatically escaped code, use custom links, an avatar and their own images. Another plus is that the comments are being stored next to your code, exactly where they belong. Finally, the chosen platform (GitHub) is not known for its data breaches nor for making money from selling visitor data. Make sure to check out the [demo](/blog/gdpr-compliant-comment/). 8 | 9 | ### How it works 10 | 11 | Every comment tread is an issue on GitHub. A call to the GitHub API, using the 'comment_issue_id', retreives a JSON object with all comments. This JSON object is converted into a nice HTML comment tread. The tread is added to the bottom of the (jQuery defined) element in the include. To stay below the rate limit of GitHub, the call is being stored in local storage. A refresh button enables the visitor to force a new GitHub call. Once the rate limit is reached, the visitor has to go to the GitHub issue page to read the comments. 12 | 13 | ### Installation 14 | 15 | Step 1. Create a new issue in your Github repository and look for the issue ID (a number). 16 |
Step 2. Add `comment_issue_id: 1` to the front matter of your page (replace '1' by your issue ID). 17 |
Step 3. Download the file [comments.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/comments.html) 18 |
Step 4. Save the file in the '_includes' directory of your project 19 |
Step 5. Make sure the bottom of your layout document looks like this: 20 | 21 | ``` 22 | {% raw %}... 23 | 24 | {% include comments.html element=".post-content" github_account="jhvanderschee/jekyllcodex" require_cookie_consent="true" %} 25 | 26 | {% endraw %} 27 | ``` -------------------------------------------------------------------------------- /_without-plugin/cookie-consent.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Cookie consent 3 | --- 4 | 5 | ### Introduction 6 | 7 | To be compliant with the GDPR, you have to have user consent for all non-functional and third pary cookies and scripts. This script allows you to delay the loading of certain Javascript includes, until the user clicks on 'Approve' in a cookie banner. 8 | 9 | ### How it works 10 | 11 | The code inserts a cookie banner at the bottom of the screen. When you click 'Approve' it creates a cookie that is valid for 31 days. Each page load the code checks for the existence of this cookie. If it exists (and the value is 'true'), the blocked scripts are loaded. The blocked scripts can be found in the includes in the code below. You can easily replace these includes with your own. 12 | 13 | ``` 14 | {% raw %}if(readCookie('cookie-notice-dismissed')=='true') { 15 | {% include ga.js %} 16 | {% include chatbutton.js %} 17 | }{% endraw %} 18 | ``` 19 | 20 | ### Installation 21 | 22 | Step 1. Download the file [cookie-consent.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/cookie-consent.html) 23 |
Step 2. Save the file in the '_includes' directory of your project 24 |
Step 3. Make sure the bottom of your layout document looks like this: 25 | 26 | ``` 27 | {% raw %}... 28 | {% include cookie-consent.html %} 29 | 30 | {% endraw %} 31 | ``` -------------------------------------------------------------------------------- /_without-plugin/follow-buttons.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Follow buttons 3 | --- 4 | 5 | ### Introduction 6 | 7 | You can see them in action on the right side of the screen. 8 | 9 | ### How it works 10 | 11 | This content is coming soon... 12 | 13 | ### Installation 14 | 15 | Step 1. Download the file [follow-buttons.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/follow-buttons.html) 16 |
Step 2. Save the file in the '_includes' directory of your project 17 |
Step 3. Make sure the bottom of your layout document looks like this: 18 | 19 | ``` 20 | {% raw %}... 21 | {% include follow-buttons.html %} 22 | 23 | {% endraw %} 24 | ``` 25 | Step 4. Add the following variables to your '_config.yml' file (with value's): 26 | ``` 27 | facebook_url: 28 | twitter_url: 29 | linkedin_url: 30 | pinterest_url: 31 | instagram_url: 32 | rss_url: 33 | ``` 34 | -------------------------------------------------------------------------------- /_without-plugin/form-builder.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Form builder 3 | inactive: false 4 | --- 5 | 6 | ### Introduction 7 | 8 | Forms are the most important parts of a websites. They range from simple [contact forms](/contact){: .gray} to forms that handle complete webshop orders or event sign-ups. WordPress has extremely popular form solutions, like 'Contact Form 7' and 'Gravity Forms', but Jekyll does not. To fill this void I created a basic form builder for Jekyll. 9 | 10 | ### How it works 11 | 12 | The form uses Twitter Bootstrap and HTML5. The form can be submitted by CloudCannon, Formspree and FormBucket. The first only works on CloudCannon hosting. You can choose between showing placeholders in the inputs or labels above it. Two special fields are available: a field named 'name' (type 'text') will show 'first name' and 'last name' input boxes on one line. A field named 'address' (type 'text') will show 'address', 'city' and 'postal code' input boxes. 13 | 14 | To create a form, add the following code to the front matter of your page: 15 | 16 | ``` 17 | {% raw %}--- 18 | forms: 19 | - to: jhvanderschee@gmail.com 20 | subject: New submission! 21 | redirect: / 22 | form_engine: formspree 23 | placeholders: false 24 | fields: 25 | - name: name 26 | input_type: text 27 | placeholder: Name 28 | required: true 29 | - name: email 30 | input_type: email 31 | placeholder: Email address 32 | required: true 33 | - name: sex 34 | input_type: radio 35 | placeholder: male 36 | required: true 37 | - name: sex 38 | input_type: radio 39 | placeholder: female 40 | required: true 41 | - name: message 42 | input_type: textarea 43 | placeholder: Message 44 | required: false 45 | - name: terms 46 | input_type: checkbox 47 | placeholder: I accept the terms and conditions 48 | required: true 49 | - name: submit 50 | input_type: submit 51 | placeholder: Submit form 52 | required: true 53 | ---{% endraw %} 54 | ``` 55 | 56 | And add this to your layout: 57 | 58 | ``` 59 | {% raw %}{% if page.forms[0] %}{% include form.html form="1" %}{% endif %}{% endraw %} 60 | ``` 61 | 62 | CloudCannon users should add the available options to their '_config.yml' file to make the experience for content editors even smoother. 63 | 64 | [expand] 65 | 66 | ``` 67 | {% raw %}input_types: 68 | - text 69 | - textarea 70 | - email 71 | - date 72 | - checkbox 73 | - radio 74 | - number 75 | - submit 76 | - recaptcha 77 | 78 | form_engines: 79 | - cloudcannon 80 | - formspree 81 | - formbucket 82 | - netlify{% endraw %} 83 | ``` 84 | 85 | Disclaimer: Note that there is no select (dropdown) support (yet). Also note that browser support is not perfect. The native HTML5 date picker is not available in every browser and that HMTL5 validation does not work in IE9 and Opera Mini. Use [better forms](/without-plugin/better-forms){: .gray}, if you want HTML5 validation support for all browsers. 86 | 87 | [/expand] 88 | 89 | ### Installation 90 | 91 | Step 1. Make sure your front matter of your page looks like the example above
92 | Step 2. Download the file [form.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/form.html)
93 | Step 3. Save the file in the '_includes' directory of your project
94 | Step 4. Add the following line to your layout on the place where you want the form to appear: 95 | 96 | ``` 97 | {% raw %}{% if page.forms[0] %}{% include form.html form="1" %}{% endif %}{% endraw %} 98 | ``` -------------------------------------------------------------------------------- /_without-plugin/future-dates.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Future dates 3 | --- 4 | 5 | ### Introduction 6 | 7 | In case of an event listing, you want to show only future dates. This is hard, because Jekyll only knows what day it is on rebuild, which can be days or months ago. Therefore we need a javascript solution to solve this problem. 8 | 9 | ### How it works 10 | 11 | The script gets the current date in the 'yyyy-mm-dd' format from Javascript. You only have to write the events date as a custom attribute called 'future-date' to the containing HTML element with Jekyll/Liquid and the script will remove elements that have a 'future-date' in the past. Note that these elements can be any type of element, a list item or a link will work too. 12 | 13 | [expand] 14 | 15 | An example of the Jekyll/Liquid code: 16 | 17 | ``` 18 | {% raw %}{% for item in site.events %} 19 |
...
20 | {% endfor %}{% endraw %} 21 | ``` 22 | 23 | And the javascript, doing its magic: 24 | 25 | ``` 26 | {% raw %}{% endraw %} 41 | ``` 42 | 43 | [/expand] 44 | 45 | ### Installation 46 | 47 | Step 1. Make sure your elements look like this: `
...
`
48 | Step 2. Download the file [future-dates.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/future-dates.html)
49 | Step 3. Save the file in the '_includes' directory of your project
50 | Step 4. Make sure the bottom of your layout document looks like this: 51 | 52 | ``` 53 | {% raw %}... 54 | {% include future-date.html %} 55 | 56 | {% endraw %} 57 | ``` -------------------------------------------------------------------------------- /_without-plugin/image-gallery-index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Image gallery index 3 | galleries: 4 | - title: Link to homepage 5 | image: "/uploads/album/Beautiful Mountains.jpg" 6 | url: "/" 7 | - title: Link to image gallery 8 | image: "/uploads/album/Museum of Pop Culture.jpg" 9 | url: "/without-plugin/image-gallery" 10 | --- 11 | 12 | ### Introduction 13 | 14 | This script creates an image gallery index. This can be used for all kind of image links (not just to pages with galleries). An example is shown below. 15 | 16 | {% include image-gallery-index.html %} 17 | 18 | ### How it works 19 | 20 | The image gallery index works like the [image gallery](/without-plugin/image-gallery){:.gray}. 21 | 22 | [expand] 23 | 24 | ``` 25 | {% raw %} 31 | 32 |

{% for item in page.galleries %}{{ item.title }}{% endfor %}

{% endraw %} 33 | ``` 34 | 35 | Note that the images are being resized and served by [images.weserv.nl](https://images.weserv.nl). 36 | 37 | [/expand] 38 | 39 | ### Installation 40 | 41 | Step 1. Download the file [image-gallery-index.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/image-gallery-index.html) 42 |
Step 2. Save the file in the ‘_includes’ directory of your project 43 |
Step 3. Add the following line to your layout on the place where you want the image gallery index to appear: 44 | 45 | ``` 46 | {% raw %}{% if page.galleries %}{% include image-gallery-index.html %}{% endif %}{% endraw %} 47 | ``` 48 | 49 | Step 4. Add the following front matter to the page where you want the image gallery index to appear: 50 | 51 | ``` 52 | --- 53 | galleries: 54 | - title: Link to homepage 55 | image: /uploads/album/1.jpg 56 | url: / 57 | - title: Link to image gallery 58 | image: /uploads/album/2.jpg 59 | url: /without-plugin/image-gallery 60 | --- 61 | ``` -------------------------------------------------------------------------------- /_without-plugin/image-gallery.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Image gallery 3 | lightbox_captions: true 4 | --- 5 | 6 | ### Introduction 7 | 8 | This script creates an image gallery. The script reads all images from a specific (user-defined) folder in Jekyll, automagically crops them to 300px squares, using an image resize proxy service and shows them in rows of five. 9 | 10 | {% include image-gallery.html folder="/uploads/album" %} 11 | 12 | ### How it works 13 | 14 | The script searches for any file with a path that contains the string given in 'folder' and checks whether it is a 'jpg' file. If so, it creates an image tag for the image. The source is a 300 pixel wide square cropped version of the image. Then the script wraps the image in a link, containing the full path to the image. This will trigger the lightbox if present. 15 | 16 | [expand] 17 | 18 | ``` 19 | {% raw %} 25 | 26 |
27 | {% for file in site.static_files %} 28 | {% if file.path contains include.folder %} 29 | {% if file.extname == '.jpg' or 30 | file.extname == '.jpeg' or 31 | file.extname == '.JPG' or 32 | file.extname == '.JPEG' %} 33 | 34 | {% assign filenameparts = file.path | split: "/" %} 35 | {% assign filename = filenameparts | last | replace: file.extname,"" %} 36 | 37 | 38 | {{ filename }} 39 | {{ filename }} 40 | 41 | {% endif %} 42 | {% endif %} 43 | {% endfor %} 44 |
{% endraw %} 45 | ``` 46 | 47 | Note that the images are being resized and served by [images.weserv.nl](https://images.weserv.nl). 48 | 49 | [/expand] 50 | 51 | ### Installation 52 | 53 | Step 1. Download the file [image-gallery.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/image-gallery.html) 54 |
Step 2. Save the file in the ‘_includes’ directory of your project 55 |
Step 3. Add the following line to your layout on the place where you want the image gallery to appear: 56 | 57 | ``` 58 | {% raw %}{% include image-gallery.html folder="/uploads/album" %}{% endraw %} 59 | ``` -------------------------------------------------------------------------------- /_without-plugin/instagram.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Instagram 3 | --- 4 | 5 | ### Introduction 6 | 7 | You have to register at [PPI Loader](https://profilepageimages.usecue.com) and grant us access to your Instagram account. After you have done this, this script displays your last Instagram profile images: 8 | 9 | {% include instagram.html username="jhvanderschee" %} 10 | 11 | ### How it works 12 | 13 | For information on how this works, visit [PPI Loader](https://profilepageimages.usecue.com). When your images are showing up (which might take a few seconds and a refresh) they are no longer fetched from Instagram. Do you like it? [Buy me something!](/donate/) 14 | 15 | ### Installation 16 | 17 | Step 1. Download the file [instagram.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/instagram.html) 18 |
Step 2. Save the file in the '_includes' directory of your project 19 |
Step 3. Add the following line to your layout on the place where you want your instagram pictures to appear: 20 | 21 | ``` 22 | {% raw %}{% include instagram.html username="jhvanderschee" %}{% endraw %} 23 | ``` 24 | -------------------------------------------------------------------------------- /_without-plugin/lazy-loading.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lazy loading 3 | --- 4 | 5 | ### Introduction 6 | 7 | Sometimes pages contain an awful lot of images. In that case you want these images to only load when the user scrolls down. This principle is called lazy loading and it is the opposite of pre-loading. 8 | 9 | ### How it works 10 | 11 | Use it like this: 12 | 13 | ``` 14 | 15 | ``` 16 | 17 | ... or for background images like this: 18 | 19 | ``` 20 |
21 | ``` 22 | 23 | Note that you can create a (popular and) fancy effect by replacing the 'blank.png' image by a very small version of the actual image. This will cause a blur that is being resolved on scroll. 24 | 25 | ### Installation 26 | 27 | Step 1. Download the file [lazyload.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/lazyload.html) 28 |
Step 2. Save the file in the '_includes' directory of your project 29 |
Step 3. Make sure the bottom of your layout document looks like this: 30 | 31 | ``` 32 | {% raw %}... 33 | {% include lazyload.html %} 34 | 35 | {% endraw %} 36 | ``` -------------------------------------------------------------------------------- /_without-plugin/lightbox.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lightbox 3 | --- 4 | 5 | ### Introduction 6 | 7 | Lightbox is a solution that loads your [image](/uploads/grumpycat2.jpg){:.gray} [links](/uploads/grumpycat.jpg){: .gray}, your [Youtube links](https://www.youtube.com/watch?v=dQw4w9WgXcQ&showinfo=0&rel=0){: .gray} and your [Vimeo links](https://vimeo.com/132888648){: .gray} automatically in a minimalistic and responsive pseudo window/overlay. No adjustment to your links is required, just follow the installation instructions below. 8 | 9 | ### How it works 10 | 11 | Links that point to images, Youtube and Vimeo video's are automagically recognized and provided with an additional class by jQuery. Video's get an additional data-id in case of a video. A listener adds the lightboxes to the body on a click on the link. The lightboxes is removed when you click on the background/overlay. You can prevent links from turning into lightboxes, by adding the 'no-lightbox' class. To achieve this in Markdown, simply use the code below. 12 | 13 | [expand] 14 | 15 | ``` 16 | {% raw %}[video link](https://youtu.be/iWowJBRMtpc?t=90s){:.no-lightbox}{% endraw %} 17 | ``` 18 | 19 | Note that I wrote this lightbox myself and tested it on a minimal amount of devices. It should work on mobile (tested on Android), IE9+ and all modern desktop browsers (tested on Firefox). 20 | 21 | [/expand] 22 | 23 | ### Installation 24 | 25 | Step 1. Download the file [lightbox.js](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/js/lightbox.js) and [lightbox.css](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/css/lightbox.css) 26 |
Step 2. Save the file in the '/js' and '/css' directory of your project 27 |
Step 3. Make sure the footer of your layout document looks like this: 28 | 29 | ``` 30 | {% raw %}... 31 | 32 | 33 | 34 | {% endraw %} 35 | ``` 36 | -------------------------------------------------------------------------------- /_without-plugin/live-chat.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Live chat 3 | --- 4 | 5 | ### Introduction 6 | 7 | Live Chat is one of the most important features a website can offer. This live chat solution should be free or freemium and it should be very simple for visitors to engage in real time. Also, it should be easy to operate, manage and customize and it should have an mobile app for the operator. I have found these things in [Crisp](https://crisp.chat/en/livechat/){:.gray}, thanks to some extensive research by [Appernetic](https://blog.appernetic.io/2016/07/14/use-live-chat-to-beat-the-competition/){:.gray}. 8 | 9 | ### How it works 10 | 11 | You create an account at Crisp and add a script in the head or footer of your website. The script inserts the chat module in the website. That's it. An example script is shown below. You should get your personal code from your Crisp account. 12 | 13 | [expand] 14 | 15 | ``` 16 | 17 | ``` 18 | 19 | [/expand] 20 | 21 | ### Installation 22 | 23 | Step 1. Create an account at [Crisp](http://crisp.chat) and configure it 24 |
Step 2. Insert the HTML code from Crisp in the head or footer of your website 25 |
Step 3. Download the free Android or iOS app for a seamless chat experience 26 | -------------------------------------------------------------------------------- /_without-plugin/metrics.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Metrics 3 | --- 4 | 5 | ### Introduction 6 | 7 | Google Analytics is a freemium web analytics service offered by Google that tracks and reports website traffic. Google launched the service in November 2005. Google Analytics is the most widely used web analytics service on the Internet. 8 | 9 | ### How it works 10 | 11 | A javascript is added to your footer to instruct Google to track the page load. Additionally SSL is forced during this tracking and the IP address is anonymized, making this the most decent use of Google Analytics possible. However, using server side metrics is faster, more responsible and maybe even more reliable. 12 | 13 | [expand] 14 | 15 | ``` 16 | {% raw %}{% endraw %} 29 | ``` 30 | 31 | [/expand] 32 | 33 | ### Installation 34 | 35 | Step 1. Download the file [analytics.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/analytics.html) 36 |
Step 2. Save the file in the '_includes' directory of your project 37 |
Step 3. Change the property code (UA-xxxxxxxx-1) to your code 38 |
Step 4. Make sure the bottom of your layout document looks like this: 39 | 40 | ``` 41 | {% raw %}... 42 | {% include analytics.html %} 43 | 44 | {% endraw %} 45 | ``` -------------------------------------------------------------------------------- /_without-plugin/new-window-fix.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: New window fix 3 | --- 4 | 5 | ### Introduction 6 | 7 | According to many site owners, PDF documents and external links should open in a new window. Markdown makes it relatively hard to specify this. This script automates this for you, so you do not have to worry about this. 8 | 9 | ### How it works 10 | 11 | This script detects external links and links to PDF files, using plain javascript. It automagically adds 'target="_blank"' to these links. This is done by the following code. 12 | 13 | [expand] 14 | 15 | ``` 16 | {% include new-window-fix.html %} 17 | ``` 18 | 19 | [/expand] 20 | 21 | ### Installation 22 | 23 | Step 1. Download the file [new-window-fix.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/new-window-fix.html) 24 |
Step 2. Save the file in the '_includes' directory of your project 25 |
Step 3. Make sure the bottom of your layout document looks like this: 26 | 27 | ``` 28 | {% raw %}... 29 | {% include new-window-fix.html %} 30 | 31 | {% endraw %} 32 | ``` -------------------------------------------------------------------------------- /_without-plugin/pretty-permalinks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Pretty URL's 3 | --- 4 | 5 | ### Introduction 6 | 7 | The page URL is an important factor in ranking your page in the search engine. Therefore it is important to have pretty URL's (also called 'permalinks'). 8 | 9 | ### How it works 10 | 11 | With Jekyll you can create pretty URL's using the ‘old-school’ approach. Create an ‘index.html’ in the root for the homepage and a folder called ‘about’ with another ‘index.html’ file inside for your ‘about’ page... and so on. The Jekyll way is to add the permalink to the top of your document. Note that both options will work equally good. However, these approaches still show the .html extension. To prevent this you have to change a default setting in the '_config.yml' file. 12 | 13 | ### Installation 14 | 15 | Add the following code to your '_config.yml' file: 16 | 17 | ``` 18 | {% raw %}permalink: /blog/:title/{% endraw %} 19 | ``` -------------------------------------------------------------------------------- /_without-plugin/randomize.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Randomize 3 | --- 4 | 5 | ### Introduction 6 | 7 | Sometimes you want to create a randomized list of items. In a static site this is quite hard, because random in Liquid means random at build time. This script, however, randomizes at each visit/page load using Javascript. 8 | 9 | ### How it works 10 | 11 | This scripts shuffles all items in the page that have the class randomize. Make sure you hide the items you do not want to show with CSS. To prevent the potentially massive amount of DOM elements to take up too much memory and bandwith, you can write all image sources as 'data-src'. This script will rewrite only the visible ones to 'src'. The same can be done for background images, by using 'data-style' on your elements. 12 | 13 | [expand] 14 | 15 | Here is some example HTML: 16 | 17 | ``` 18 | 23 | ``` 24 | 25 | And some example CSS: 26 | 27 | ``` 28 | .randomize > * {display: none;} 29 | .randomize > *:nth-child(1), .randomize > *:nth-child(2) {display: block;} 30 | ``` 31 | 32 | You can use this script as many times on a page as you like. 33 | 34 | [/expand] 35 | 36 | ### Installation 37 | 38 | Step 1. Download the file [randomize.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/randomize.html) 39 |
Step 2. Save the file in the '_includes' directory of your project 40 |
Step 3. Add the 'randomize' class to the parent of the elements you want to randomize 41 |
Step 4. Make sure the bottom of your layout document looks like this: 42 | 43 | ``` 44 | {% raw %}... 45 | {% include randomize.html %} 46 | 47 | {% endraw %} 48 | ``` -------------------------------------------------------------------------------- /_without-plugin/reading-time-indicator.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Reading time 3 | --- 4 | 5 | ### Introduction 6 | 7 | The reading time indicator is a simple script which helps to create a reading indicator displaying the estimated reading time for the content. The script calculates the reading time based on a configurable reading speed (180 words per minutes by default). 8 | 9 | ### How it works 10 | 11 | To display the reading time of an article, the code below is used. 12 | 13 | [expand] 14 | 15 | ``` 16 | {% raw %}{% capture words %} 17 | {{ content | number_of_words | minus: 180 }} 18 | {% endcapture %} 19 | {% unless words contains '-' %} 20 | {{ words | plus: 180 | divided_by: 180 | append: ' minutes to read' }} 21 | {% endunless %}{% endraw %} 22 | ``` 23 | 24 | [/expand] 25 | 26 | ### Installation 27 | 28 | Step 1. Download the file [reading-time.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/reading-time.html) 29 |
Step 2. Save the file in the '_includes' directory of your project 30 |
Step 3. Add the following line to your layout on the place where you want the reading time indicator to appear: 31 | 32 | ``` 33 | {% raw %}{% include reading-time.html %}{% endraw %} 34 | ``` -------------------------------------------------------------------------------- /_without-plugin/rss-feed.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Atom/RSS feed 3 | --- 4 | 5 | ### Introduction 6 | 7 | The Atom Syndication Format is an XML language used for web feeds. A web feed (also called 'news feed' or 'RSS feed') is a data format used for providing users with frequently updated content. Content distributors syndicate a web feed, thereby allowing users to subscribe a channel to it. A typical scenario of web-feed use might involve the following: a content provider publishes a feed link on its site which end users can register with an aggregator program (also called a feed reader or a news reader) running on their own machines. 8 | 9 | ### How it works 10 | 11 | The atom feed, in the 'feed.xml' file uses Liquid to build the XML. The file contains the following code. 12 | 13 | [expand] 14 | 15 | ``` 16 | {% raw %}--- 17 | layout: null 18 | --- 19 | 20 | 21 | 22 | {{ site.title | xml_escape }} 23 | {{ site.description | xml_escape }} 24 | {{ site.url }}{{ site.baseurl }}/ 25 | 26 | {{ site.time | date_to_rfc822 }} 27 | {{ site.time | date_to_rfc822 }} 28 | Jekyll v{{ jekyll.version }} 29 | {% for post in site.posts limit:10 %} 30 | 31 | {{ post.title | xml_escape }} 32 | {{ post.content | xml_escape }} 33 | {{ post.date | date_to_rfc822 }} 34 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 35 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 36 | {% for tag in post.tags %} 37 | {{ tag | xml_escape }} 38 | {% endfor %} 39 | {% for cat in post.categories %} 40 | {{ cat | xml_escape }} 41 | {% endfor %} 42 | 43 | {% endfor %} 44 | 45 | {% endraw %} 46 | ``` 47 | 48 | The code above will create a XML feed with the 10 latest posts in it. To tell the browsers you have a web feed, add a simple line to the head of your HTML: 49 | 50 | ``` 51 | {% raw %}{% endraw %} 52 | ``` 53 | 54 | [/expand] 55 | 56 | ### Installation 57 | 58 | Step 1. Download the file [feed.xml](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/feed.xml) 59 |
Step 2. Save the file in the root of your Jekyll project 60 |
Step 3. Add the following line to your head/the 'head.html' include: 61 | 62 | ``` 63 | {% raw %}{% endraw %} 64 | ``` -------------------------------------------------------------------------------- /_without-plugin/search-google.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Search with Google 3 | --- 4 | 5 | ### Introduction 6 | 7 | Modern websites have a search bar, searching within the site for specific content. These search boxes often search the database in real-time. That is not possible within a static website. Therefore another solution must be found. 8 | 9 | ### How it works 10 | 11 | This search relies on the index from Google. It queries the Google Search engine directly. Results will be shown within the Google interface (on a new page), but will be limited to the site you specified. Click the 'read more' link for a demo. 12 | 13 | [expand] 14 | 15 | ``` 16 | {% raw %}
{% endraw %} 17 | ``` 18 | 19 | {% include search-google.html %} 20 | 21 | [/expand] 22 | 23 | ### Installation 24 | 25 | Step 1. Download the file [search-google.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/search-google.html) and change the domain name 26 |
Step 2. Save the file in the '_includes' directory of your project 27 |
Step 3. Add the following statement to your layout where you want the search box to appear: 28 | 29 | ``` 30 | {% raw %}{% include search-google.html %}{% endraw %} 31 | ``` -------------------------------------------------------------------------------- /_without-plugin/seo.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SEO 3 | --- 4 | 5 | ### Introduction 6 | 7 | WordPress is famous for its SEO plugin. But what does it exactly do? Little that cannot be achieved by some HTML and liquid. This script takes care of the following things in the head: 8 | 9 | - title 10 | - meta description 11 | - shortcut icons 12 | - open graph tags 13 | - canonical link 14 | - [atom/rss feed](/without-plugin/rss-feed) 15 | - [sitemap](/without-plugin/sitemap) 16 | 17 | ### How it works 18 | 19 | The script adds the items below to your head. 20 | 21 | [expand] 22 | 23 | ``` 24 | {% raw %} 25 | 26 | 27 | 28 | {% if page.title %}{{ page.title }} | {% endif %}{{ site.title }} 29 | {% assign pagecontent_description = page.content | markdownify | replace: '.', '. ' | replace: '', ': ' | replace: '', ': ' | replace: '', ': ' | strip_html | strip_newlines | replace: ' ', ' ' | truncate: 160 %} 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | {% if page.image %}{% endif %} 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | {% if page.image %}{% endif %} 49 | 50 | 51 | 52 | 53 | 54 | {% endraw %} 55 | ``` 56 | 57 | Note: With just some minor tweaks you can add a manual page descriptions, using 'page.description' and a matching front matter / YML variable in your page. 58 | 59 | [/expand] 60 | 61 | ### Installation 62 | 63 | Step 1. Download the file [header.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/header.html) 64 |
Step 2. Save the file in the '_includes' directory of your project 65 |
Step 3. Make sure the structure of your layout document looks like this: 66 | 67 | ``` 68 | {% raw %} 69 | {% include header.html %} 70 | {{ content }} 71 | ... 72 | {% include footer.html %} 73 | {% endraw %} 74 | ``` 75 | 76 | -------------------------------------------------------------------------------- /_without-plugin/simple-menu.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Simple menu 3 | --- 4 | 5 | ### Introduction 6 | 7 | This static single-level menu highlights the right page. The code is independent of the permalink style used by Jekyll. 8 | 9 | ### How it works 10 | 11 | The navigation of your website should be an unordered list. To get the list items to lighten up when they are active, the script adds an active class to them. This class should be styled with CSS. To detect which link is active, the script uses 'contains', as you can see in the code below. 12 | 13 | [expand] 14 | 15 | ``` 16 | {% raw %}{% endraw %} 22 | ``` 23 | 24 | This code is compatible with all permalink styles in Jekyll. The 'contains' statement succesfully highlights the first menu item at the following URL's: 25 | 26 | - getting-started/ 27 | - getting-started.html 28 | - getting-started/index.html 29 | - getting-started/subpage/ 30 | - getting-started/subpage.html 31 | 32 | [/expand] 33 | 34 | ### Installation 35 | 36 | Step 1. Download the file [simple-menu.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/simple-menu.html) and adjust it 37 |
Step 2. Save the file in the '_includes' directory of your project 38 |
Step 3. Add the following statement to your layout where you want the menu to appear: 39 | 40 | ``` 41 | {% raw %}{% include simple-menu.html %}{% endraw %} 42 | ``` 43 | 44 | PS. Do not forget to style the 'active' class in your CSS. 45 | -------------------------------------------------------------------------------- /_without-plugin/sitemap.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sitemap 3 | --- 4 | 5 | ### Introduction 6 | 7 | A sitemap makes it easier for search engines to discover new content on a website. Sitemaps can be submitted to the search-engine (for Google, use Google Webmaster Tools). 8 | 9 | ### How it works 10 | 11 | The 'sitemap.xml' file should reside in the root of your website and contain roughly the following code. When you add collections, you should not forget to add them to this sitemap. 12 | 13 | [expand] 14 | 15 | ``` 16 | {% raw %}--- 17 | layout: null 18 | --- 19 | 20 | 21 | {% for page in site.pages %} 22 | {% if page.url contains '.xml' %}{% else %} 23 | 24 | {{ site.url }}{{ page.url }} 25 | monthly 26 | 1.0 27 | 28 | {% endif %} 29 | {% endfor %} 30 | {% for page in site.posts %} 31 | 32 | {{ site.url }}{{ page.url | replace: 'index.html', '' }} 33 | monthly 34 | 1.0 35 | 36 | {% endfor %} 37 | {% endraw %} 38 | ``` 39 | 40 | [/expand] 41 | 42 | ### Installation 43 | 44 | Step 1. Download the file [sitemap.xml](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/sitemap.xml) 45 |
Step 2. Save the file in the root of your Jekyll project 46 |
Step 3. Make sure the structure of your documents head looks like this: 47 | 48 | ``` 49 | {% raw %} 50 | ... 51 | 52 | {% endraw %} 53 | ``` -------------------------------------------------------------------------------- /_without-plugin/slider.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Slider/Carousel 3 | carousels: 4 | - images: 5 | - image: "/uploads/slider/ganapathy-kumar-93498_scaled.jpg" 6 | - image: "/uploads/slider/samuel-zeller-356272_scaled.jpg" 7 | - image: "/uploads/slider/samuel-zeller-356338_scaled.jpg" 8 | - image: "/uploads/slider/ricardo-gomez-angel-180819_scaled.jpg" 9 | - images: 10 | - image: "/uploads/slider/ricardo-gomez-angel-180819_scaled.jpg" 11 | - image: "/uploads/slider/ganapathy-kumar-93498_scaled.jpg" 12 | - image: "/uploads/slider/samuel-zeller-356272_scaled.jpg" 13 | - image: "/uploads/slider/samuel-zeller-356338_scaled.jpg" 14 | --- 15 | 16 | ### Introduction 17 | 18 | A lot of websites have a slider (or carousel). Most of them in the header. The big question is: [Should I use a carousel?](http://shouldiuseacarousel.com/) If you decide you should... this page shows you how to use a decent one. The carousel is based on this [pure CSS carousel](https://codeburst.io/how-to-pure-css-carousel-ce1a8cb231c8) with plenty of [options](https://codepen.io/jh3y/pen/WwVKLN). Content is stored in YML in the data directory. Design decisions are stored in the include variables. 19 | 20 | ### How it works 21 | 22 | The code allows you to set the height of the slider as an integer (number), and the unit in as '%' or 'px'. You can define how long each slide should stay on the screen (in seconds). An interesting feature, is the option to make the slider responsive. If you set the height to '50' and the unit to '%', the dimensions will always be 2:1, but the height will vary. If you set the height to '300' and the unit to 'px' the height will always be the same, but the dimensions will vary. Note that the CSS in this script replaces the default icons for big HTML arrows and uses background images to ensure that the slider maintains the same height. For the second carousel on the samen page you should use "2" for the number. Click the 'read more' link for a demo. 23 | 24 | [expand] 25 | 26 | {% include carousel.html height="50" unit="%" duration="7" number="1" %} 27 | 28 | {% include carousel.html height="50" unit="%" duration="7" number="2" %} 29 | 30 | [/expand] 31 | 32 | ### Installation 33 | 34 | Step 1. Download the file [carousel.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/carousel.html) 35 |
Step 2. Save the file in the '_includes' directory of your project 36 |
Step 3. Add this to your layout: 37 | 38 | ``` 39 | {% raw %} 40 | {% include carousel.html height="50" unit="%" duration="7" number="1" %} 41 | 42 | {% include carousel.html height="50" unit="%" duration="7" number="2" %} 43 | {% endraw %} 44 | ``` 45 | Step 4. Create a YML array called 'carousels' in your front matter with this content: 46 | 47 | ``` 48 | carousels: 49 | - images: 50 | - image: /uploads/slider/image1.jpg 51 | - image: /uploads/slider/image2.jpg 52 | - image: /uploads/slider/image3.jpg 53 | - image: /uploads/slider/image4.jpg 54 | - images: 55 | - image: /uploads/slider/image5.jpg 56 | - image: /uploads/slider/image6.jpg 57 | - image: /uploads/slider/image7.jpg 58 | - image: /uploads/slider/image8.jpg 59 | ``` 60 | -------------------------------------------------------------------------------- /_without-plugin/text-expand.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Text expand 3 | --- 4 | 5 | ### Introduction 6 | 7 | Sometimes when you want to create a 'read more' link, it is overkill to create a whole new page. In that case a text expand functionality, using javascript is very useful. On this website it is used for clarity and brevity. 8 | 9 | ### How it works 10 | 11 | The script looks for an `[expand]` tag on a single line and then looks for the `[/expand]` tag (again on a single line, thus being the only content of its paragraph). When it finds these it will add some classes and hide everything in between. It will show a 'read more →' link, indicating the text can be expanded. 12 | 13 | [expand] 14 | 15 | ``` 16 | {% include text-expand.html %} 17 | ``` 18 | 19 | [/expand] 20 | 21 | ### Installation 22 | 23 | Step 1. Download the file [text-expand.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/text-expand.html) 24 |
Step 2. Save the file in the '_includes' directory of your project 25 |
Step 3. Make sure the bottom of your layout document looks like this: 26 | 27 | ``` 28 | {% raw %}... 29 | {% include text-expand.html %} 30 | 31 | {% endraw %} 32 | ``` 33 | -------------------------------------------------------------------------------- /_without-plugin/toggle-menu.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Toggle menu 3 | --- 4 | 5 | ### Introduction 6 | 7 | This script puts a menu bottom Every website needs a menu button. You know... the much debated hamburger that toggles the menu on mobile. It is best practise to add the word 'Menu' to the hamburger and to add a little animation that transforms the hamburger into the close button. An example of this script can be seen on mobile in the header of this website. 8 | 9 | ### How it works 10 | 11 | This script toggles the class 'menuopen' on the body, which will make it easy to make your menu responsive. I deliberately left out any other header styling or assumptions about your layout. Flexbox is your friend when you are creating a menu bar. Suggested additional styling includes: 12 | 13 | ``` 14 | #togglemenu {display: none; cursor: pointer;} 15 | @media (max-width: 1000px) { 16 | #togglemenu {display: block;} 17 | #menu ul {display: none;} 18 | .menuopen #menu ul {display: block;} 19 | } 20 | ``` 21 | The code can be found here. 22 | 23 | [expand] 24 | 25 | ``` 26 | {% include toggle-menu.html %} 27 | ``` 28 | 29 | [/expand] 30 | 31 | ### Installation 32 | 33 | Step 1. Download the file [text-expand.html](https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/toggle-menu.html) 34 |
Step 2. Save the file in the '_includes' directory of your project 35 |
Step 3. Add the following code to the place where you want the menu button to appear 36 | 37 | ``` 38 | {% raw %}{% include text-expand.html %}{% endraw %} 39 | ``` -------------------------------------------------------------------------------- /_without-plugin/webshop.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Webshop 3 | --- 4 | 5 | ### Introduction 6 | 7 | This is a simple webshop with serveral payment methods that does not require a monthly fee. Great for a simple webshop. The webshop currently does not allow for variable (variable) tax calculations. It also does not provide an alternative shipping address, although that can be added easily. An email parser would allow you to automate the buying processes even further. 8 | 9 | ### How it works 10 | The webshop basically works like this: you create a link with an 'addtocart' class that links to the cart. This link will look for the 'image', 'price' and 'description' attribute and add the product to the cart cookie. When you click 'checkout' in the cart you go to a checkout form. When you click the next step in the payment process, you go to a payment link from Plink (Mollie). Before sending the user to the payment link the cart info will be submitted through email. At the same time an ordernumber will be generated, using a timestamp in milliseconds. This ordernumber is added to the email and the payment. After succesful payment the user gets redirected to your websites (by Plink). 11 | 12 | [expand] 13 | 14 | When you do not want to use the cart, simply use a link with a 'buy' class and directly link to the checkout page. This will make sure there is only one item in the cart. 15 | 16 | ``` 17 | {% raw %}Buy{% endraw %} 18 | ``` 19 | 20 | Once you got the webshop running, you can fine-tune everything by editing the Liquid/HTML code. Are you unable to figure out how to create nice product pages with product variants? Just look at the source code of this website on Github. Still need help? Ask a question on Stack Overflow, or pay me to help you. 21 | 22 | [/expand] 23 | 24 | ### Installation 25 | 26 | Before you can add the webshop you need to [create a Mollie account](https://www.mollie.com){: .gray}. Mollie will ask you to register your website. They will verify if you have a proper return policy, clearly mentioned company data and clear general terms and conditions. Once your website is approved by Mollie you can add payment methods. Go to [https://useplink.com](https://useplink.com){: .gray} and register. Within your Mollie dashboard you can click on your profile and select 'Payment links' to go to your Plink account. Create a re-usable link with a variable amount and description. Once you have done that, you are ready to add the webshop to your website. 27 | 28 | #### Step 1. Add the footer files with the payment link 29 | 30 | Download the files and add them to your folders. Make sure the bottom of your layout document looks like the code below. The paymentlink should be the personal re-usable link you just created. 31 | 32 | ``` 33 | {% raw %}... 34 | 35 | 36 | 37 | 38 | 44 | 45 | 46 | {% endraw %} 47 | ``` 48 | 49 | #### Step 2. Add the cart, checkout and paylink files 50 | 51 | You need to download the 'cart.html', 'checkout.html' and 'paylink.html' files along with their '.md' counterparts and put them in the html files in the layout directory and the md files in the 'donate' directory. Feel free to change that to 'webshop' or whatever you like. 52 | 53 | #### Step 3. Create some products 54 | 55 | Create some products. They should be part of the 'products' collection and each 'product.md' file should look like this: 56 | 57 | ``` 58 | --- 59 | title: Buy me a beer 60 | image: "/uploads/beer/5.jpg" 61 | images: 62 | - image: "/uploads/beer/2.jpg" 63 | - image: "/uploads/beer/3.jpg" 64 | - image: "/uploads/beer/4.jpg" 65 | - image: "/uploads/beer/1.jpg" 66 | variant_type: size 67 | variants: 68 | - name: half-a-pint 69 | price: 2.75 70 | sku: beerhalfapint 71 | - name: pint 72 | price: 4.25 73 | sku: beerpint 74 | order_number: 2 75 | --- 76 | 77 | I like beer a lot! IPA, Guinness, Stout, craft beers... and I love to try new ones. Buy me half-a-pint to get going or a pint to get a good buzz. 78 | ``` -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About Jekyll Codex 3 | --- 4 | 5 |
6 | 7 | > "Jekyll Codex wants to make it easier for you to choose Jekyll in your next project." 8 | 9 | ### For front-end developers 10 | 11 | Jekyll Codex is created by Joost van der Schee (@jhvanderschee or jhvanderschee@gmail.com) to make it easier for fellow front-end developers to choose static web technology in their next project. The [getting started guide](/getting-started){: .gray} even shows how to do that without touching the command-line. If you want to know more about Jekyll, please visit the official Jekyll documentation. The link can be found in the menu at the top. 12 | 13 | ### Why Jekyll? 14 | 15 | Jekyll is the most popular static site generator. Static sites are better for performance, they're cheaper to build and maintain, and they're much more secure than traditional database driven websites. Thus they offer a great added value to front-end developers and their clients. 16 | 17 | ### Copyright 18 | 19 | Feel free to use all code presented on this website. The code of the website itself may also be used, as this website is a demo of the code it presents. However, respect the copyright of the used trademarks and the licenses of the open-source software used, as their rights belong to their respective owners. All images are CC0 images from Unsplash. -------------------------------------------------------------------------------- /admin/config.yml: -------------------------------------------------------------------------------- 1 | backend: 2 | name: git-gateway 3 | branch: gh-pages # Branch to update (optional; defaults to master) 4 | media_folder: "uploads" 5 | collections: 6 | - name: "posts" # Used in routes, e.g., /admin/collections/blog 7 | label: "Posts" # Used in the UI 8 | folder: "_posts" # The path to the folder where the documents are stored 9 | create: true # Allow users to create new documents in this collection 10 | slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md 11 | fields: # The fields for each document, usually in front matter 12 | - {label: "Title", name: "title", widget: "string"} 13 | - {label: "Body", name: "body", widget: "markdown"} -------------------------------------------------------------------------------- /admin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Content Manager 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /blog.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Blog 3 | layout: page 4 | --- 5 | 6 |

About this blog

7 | 8 | In our blog we keep you updated on stuff that is going on at this website. Do you have a great topic or are you missing something? Drop me a line through twitter @jhvanderschee. 9 | 10 |


11 | 12 | {% for post in site.posts %}{{ post.date | date: "%Y/%m/%d" }} - {{ post.title }}
{% endfor %} -------------------------------------------------------------------------------- /contact.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Contact 3 | forms: 4 | - to: jhvanderschee@gmail.com 5 | subject: New submission! 6 | redirect: "/" 7 | form_engine: formspree 8 | placeholders: false 9 | fields: 10 | - name: name 11 | input_type: text 12 | placeholder: Name 13 | required: true 14 | - name: email 15 | input_type: email 16 | placeholder: Email address 17 | required: true 18 | - name: sex 19 | input_type: radio 20 | placeholder: male 21 | required: true 22 | - name: sex 23 | input_type: radio 24 | placeholder: female 25 | required: true 26 | - name: message 27 | input_type: textarea 28 | placeholder: Message 29 | required: false 30 | - name: terms 31 | input_type: checkbox 32 | placeholder: I would accept the terms and conditions (if there were any) 33 | required: true 34 | - name: submit 35 | input_type: submit 36 | placeholder: Submit form 37 | required: true 38 | --- 39 | 40 | ## About this page 41 | 42 | Although the primary function of this page/form is to illustrate how the [form builder](/without-plugin/form-builder){: .gray} and [better forms](/without-plugin/better-forms){: .gray} work, it will actually send an email to my inbox. It uses [Formspree](https://formspree.io){: .gray} to do so, as this website is hosted on GitHub. 43 | 44 | ## Contact form 45 | 46 | Feel free to leave me a (nice) message. Have a nice day! 47 | -------------------------------------------------------------------------------- /css/lightbox.css: -------------------------------------------------------------------------------- 1 | #lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;} 2 | #lightbox .img { 3 | position: relative; 4 | top: 50%; 5 | left: 50%; 6 | -ms-transform: translateX(-50%) translateY(-50%); 7 | -webkit-transform: translate(-50%,-50%); 8 | transform: translate(-50%,-50%); 9 | max-width: 100%; 10 | max-height: 100%; 11 | } 12 | #lightbox .img img {opacity: 0; pointer-events: none; width: auto;} 13 | @media screen and (min-width: 1200px) { 14 | #lightbox .img { 15 | max-width: 1200px; 16 | } 17 | } 18 | @media screen and (min-height: 1200px) { 19 | #lightbox .img { 20 | max-height: 1200px; 21 | } 22 | } 23 | #lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow: 24 | -1px -1px 0 #000, 25 | 1px -1px 0 #000, 26 | -1px 1px 0 #000, 27 | 1px 1px 0 #000; 28 | } 29 | 30 | #lightbox span {display: none;} 31 | 32 | #lightbox .videoWrapperContainer { 33 | position: relative; 34 | top: 50%; 35 | left: 50%; 36 | -ms-transform: translateX(-50%) translateY(-50%); 37 | -webkit-transform: translate(-50%,-50%); 38 | transform: translate(-50%,-50%); 39 | max-width: 900px; 40 | max-height: 100%; 41 | } 42 | #lightbox .videoWrapperContainer .videoWrapper { 43 | height: 0; 44 | line-height: 0; 45 | margin: 0; 46 | padding: 0; 47 | position: relative; 48 | padding-bottom: 56.333%; /* custom */ 49 | background: black; 50 | } 51 | #lightbox .videoWrapper iframe { 52 | position: absolute; 53 | top: 0; 54 | left: 0; 55 | width: 100%; 56 | height: 100%; 57 | border: 0; 58 | display: block; 59 | } 60 | #lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;} 61 | #lightbox.gallery #prev, #lightbox.gallery #next {display: block;} 62 | #lightbox #prev {left: 0;} 63 | #lightbox #next {right: 0;} 64 | #lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;} 65 | #lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: white; width: 23px; 66 | -webkit-transform-origin: 50% 50%; 67 | -moz-transform-origin: 50% 50%; 68 | -o-transform-origin: 50% 50%; 69 | transform-origin: 50% 50%; 70 | /* Safari */ 71 | -webkit-transform: rotate(-45deg); 72 | /* Firefox */ 73 | -moz-transform: rotate(-45deg); 74 | /* IE */ 75 | -ms-transform: rotate(-45deg); 76 | /* Opera */ 77 | -o-transform: rotate(-45deg); 78 | } 79 | #lightbox #close:after { 80 | /* Safari */ 81 | -webkit-transform: rotate(45deg); 82 | /* Firefox */ 83 | -moz-transform: rotate(45deg); 84 | /* IE */ 85 | -ms-transform: rotate(45deg); 86 | /* Opera */ 87 | -o-transform: rotate(45deg); 88 | } 89 | #lightbox, #lightbox * { 90 | -webkit-user-select: none; 91 | -moz-user-select: none; 92 | -ms-user-select: none; 93 | user-select: none; 94 | } -------------------------------------------------------------------------------- /disclaimer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Disclaimer 3 | --- 4 | 5 | ## About this website 6 | 7 | The information contained in this website is for general information purposes only. 8 | 9 | ### No warrenties 10 | 11 | The information is provided by Usecue BV and while we endeavour to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the website for any purpose. 12 | 13 | ### Use at your own risk 14 | 15 | Any reliance you place on such information is therefore strictly at your own risk. In no event will we be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website. -------------------------------------------------------------------------------- /donate/cart.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Shopping cart 3 | layout: cart 4 | --- 5 | 6 | Continue shopping or proceed to checkout. -------------------------------------------------------------------------------- /donate/checkout.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Checkout 3 | layout: checkout 4 | --- 5 | 6 | Fill the form below and press the 'Proceed to payment' button. -------------------------------------------------------------------------------- /donate/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Donate 3 | layout: products 4 | --- 5 | 6 | ## About this donation page 7 | 8 | Although the primary function of this donation page is to illustrate how the [webshop](/without-plugin/webshop){: .gray} works, you can actually buy me one of the products below. If you think I saved you a huge amount of time... return the favor. If you do not have any money to spare, please share the love by posting something about this website on social media. I would like that just as much. Thank you, you are the best! -------------------------------------------------------------------------------- /donate/paylink.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Proceed to payment 3 | layout: paylink 4 | --- 5 | 6 | You will be redirected to a secure checkout process on useplink.com, provided by Mollies Paylink service, called Plink... -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/favicon.ico -------------------------------------------------------------------------------- /feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: 3 | --- 4 | 5 | 6 | 7 | 8 | {{ site.title | xml_escape }} 9 | {{ site.description | xml_escape }} 10 | {{ site.url }}{{ site.baseurl }}/ 11 | 12 | {{ site.time | date_to_rfc822 }} 13 | {{ site.time | date_to_rfc822 }} 14 | Jekyll v{{ jekyll.version }} 15 | {% for post in site.posts limit:10 %} 16 | 17 | {{ post.title | xml_escape }} 18 | {{ post.content | xml_escape }} 19 | {{ post.date | date_to_rfc822 }} 20 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 21 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 22 | {% for tag in post.tags %} 23 | {{ tag | xml_escape }} 24 | {% endfor %} 25 | {% for cat in post.categories %} 26 | {{ cat | xml_escape }} 27 | {% endfor %} 28 | 29 | {% endfor %} 30 | 31 | 32 | -------------------------------------------------------------------------------- /fonts/open-sans-v15-latin-700.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/fonts/open-sans-v15-latin-700.eot -------------------------------------------------------------------------------- /fonts/open-sans-v15-latin-700.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/fonts/open-sans-v15-latin-700.ttf -------------------------------------------------------------------------------- /fonts/open-sans-v15-latin-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/fonts/open-sans-v15-latin-700.woff -------------------------------------------------------------------------------- /fonts/open-sans-v15-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/fonts/open-sans-v15-latin-700.woff2 -------------------------------------------------------------------------------- /fonts/open-sans-v15-latin-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/fonts/open-sans-v15-latin-regular.eot -------------------------------------------------------------------------------- /fonts/open-sans-v15-latin-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/fonts/open-sans-v15-latin-regular.ttf -------------------------------------------------------------------------------- /fonts/open-sans-v15-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/fonts/open-sans-v15-latin-regular.woff -------------------------------------------------------------------------------- /fonts/open-sans-v15-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/fonts/open-sans-v15-latin-regular.woff2 -------------------------------------------------------------------------------- /getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting started 3 | --- 4 | 5 | ## Step 1. Create a basic website 6 | 7 | A website typically consists of a few elements. The header with a menu, a sidebar, the content and the footer. Back in the days we used frames to put these components together. Nowadays we use includes. These includes require a programming language to work, like PHP. Using PHP however introduces a lot of vulnerabilities. What if we could prevent that by design? Well... you can with Jekyll. 8 | 9 | You used to create an 'index.php' file and do something like this: 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | content 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Now you create an 'index.md' file and you replace your PHP tags with Liquid tags, like so: 24 | 25 | ```html 26 | {% raw %}--- 27 | --- 28 | 29 | 30 | 31 | {% include header.html %} 32 | content 33 | {% include sidebar.html %} 34 | {% include footer.html %} 35 | 36 | {% endraw %} 37 | ``` 38 | 39 | You need to place html files you want to include in a root folder named: '_includes'. [Get the code →](https://github.com/jhvanderschee/jekyllinclude) 40 | 41 | ## Step 2. Preview your website 42 | 43 | Opening the 'index.md' file in your browser does not work, so you need to have an enivronment that runs Jekyll. You can install Jekyll through command-line on your own machine. If this is your cup of tea, please go to [jekyllrb.com](http://jekyllrb.com/). Otherwise, follow these simple instructions: 44 | 45 | * Create a free account at [cloudcannon.com](http://cloudcannon.com) 46 | * Create a website and name it 47 | * Create an empty '_config.yml' file in the root 48 | * Upload your 'default.html' file and the '_layouts' directory 49 | * Upload the needed includes to the '_includes' directory 50 | * Upload your 'index.md' file to the root directory 51 | * Visit your website on the URL CloudCannon created for you 52 | 53 | ## Step 3. Host your website 54 | 55 | Oh, how I hate shared hosting accounts... untill Jekyll. Shared hosting accounts are cheap but unreliable. However, a Git based static site provides us with a back-up (actually the source code), which makes me feel a whole lot safer. CloudCannon exports the static version of your site to an FTP account on every update, enabling you to use an hosting environment of your choice. Just connect your FTP account through the CloudCannon options. So if your cheap hosting account goes down, the source code will still live on in Git and in your CloudCannon environment, enabling you to push the site to another cheap hosting account. Isn't that reassuring? -------------------------------------------------------------------------------- /google50d887eee3ca04cf.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google50d887eee3ca04cf.html -------------------------------------------------------------------------------- /img/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/img/Thumbs.db -------------------------------------------------------------------------------- /img/addtohomescreen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | ]> 7 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /img/blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/img/blank.png -------------------------------------------------------------------------------- /img/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/chevron_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /img/cloud_cannon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/img/cloud_cannon.png -------------------------------------------------------------------------------- /img/emptyavatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/img/emptyavatar.png -------------------------------------------------------------------------------- /img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/img/favicon.png -------------------------------------------------------------------------------- /img/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/img/github.png -------------------------------------------------------------------------------- /img/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/img/icon-192x192.png -------------------------------------------------------------------------------- /img/it_square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/img/it_square.png -------------------------------------------------------------------------------- /img/logo-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/img/logo-2x.png -------------------------------------------------------------------------------- /img/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | ]> 7 | 9 | 10 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /img/shopping-cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Home 3 | layout: home 4 | image: "/img/logo-2x.png" 5 | --- 6 | 7 |

Jekyll, the website framework that is super fast and super simple.

8 |

Because simple is simply better

9 | -------------------------------------------------------------------------------- /privacy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Privacy Policy 3 | --- 4 | 5 | ## How we process your data 6 | 7 | This website is powered by Jekyll, Crisp, Formspree, Mollie and CloudCannon and is hosted on GitHub. CloudCannon is only used as external CMS. No traffic or visitor data ends up at CloudCannon or their partners. Github, however, (like any hosting company) can have full insight in visitor data, like connecting IP addresses, visited pages, etc. Note that Github is not known to actively profile visitors. By using a VPN you can (try to) prevent this. 8 | 9 | ### Google Analytics 10 | 11 | This website uses Google Analytics. This happens only if you approve third party cookies and scripts. However, we have taken all actions we can to limit the power of Google. We have configured Google Analytics to anonymize IP addresses, use SSL at all time and we have agreed a Data Processing Amendment with Google. These measures were taken from a derective of the CBP (Dutch Institute for Privacy Protection) from March 2013 on how to legally use Google Analytics while not showing a cookie warning. 12 | 13 | ### Crisp Chat 14 | 15 | The chat module in the bottom right corner uses Crisp Chat and upon loading that module, your visitor data is sent to Crisp Chat. This happens only if you approve third party cookies and scripts. 16 | 17 | ### Formspree 18 | 19 | All forms on this website are handled by Formspree. Formspree has a mail server that mails all form contents to us. If you are uncomfortable with using this third party service, please do not fill out forms on this website, which (obviously) also includes the checkout form in the donation page/webshop. 20 | 21 | ### Mollie 22 | 23 | Payments are handled by Mollie. Mollie can track your IP address upon connecting to Mollie (Mollies Paylink service, called Plink), but we do NOT actively share any form data with them (like your name, address, email, etc.). The only thing Mollie receives is an order number and the due amount. On succesful payment Mollie will confirm the payment of the due amount to us, by sending an email and referencing the order number. -------------------------------------------------------------------------------- /search.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Search 3 | --- 4 | 5 | ## Simple site search 6 | 7 | Below you can search this site, using [Lunr.js](/without-plugin/search-lunr). This uses a local index file. Alternatively you can use the very simple [Google search box](/without-plugin/search-google){:.gray}, that uses the Google index to find its pages (which requires an [XML sitemap](/without-plugin/sitemap){:.gray} to help Google find the latest additions to your website). -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: 3 | --- 4 | 5 | 6 | 7 | {% for page in site.pages %} 8 | {% if page.url contains '.xml' or page.url contains 'assets' %}{% else %} 9 | 10 | {{ site.url }}{{ page.url }} 11 | monthly 12 | 1.0 13 | 14 | {% endif %} 15 | {% endfor %} 16 | {% for page in site.posts %} 17 | 18 | {{ site.url }}{{ page.url | replace: 'index.html', '' }} 19 | monthly 20 | 1.0 21 | 22 | {% endfor %} 23 | {% for page in site.without-plugin %} 24 | 25 | {{ site.url }}{{ page.url | replace: 'index.html', '' }} 26 | monthly 27 | 1.0 28 | 29 | {% endfor %} 30 | -------------------------------------------------------------------------------- /terms.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Terms and conditions 3 | --- 4 | 5 | ## Making a donation 6 | 7 | The following terms and conditions apply. 8 | 9 | 1. The Donation Service
Once you confirm to us through the Website that you wish to proceed with your donation your transaction will be processed through our payment services provider, Mollie. By confirming that you wish to proceed with your donation you authorise Mollie to request funds from your credit or debit card provider. 10 | 11 | 2. Unauthorised Card Use
If you become aware of fraudulent use of your card, or if it is lost or stolen, you must notify your card provider. 12 | 13 | 3. Information From You
Before we can process a donation you must provide us with (i) your name, address and email address; and (ii) details of the credit or debit card that you wish to use to fund the donation. We will use this information to process your donation. It is your responsibility to ensure you have provided us with the correct information. When you submit your payment details, these details will be transferred to our payment provider, Mollie, and your payment data will be collected and processed securely by them. You should make sure that you are aware of Mollie's terms and conditions, which are different from our own, to ensure that you are comfortable with how they will process your personal data before you make a donation. We won’t share your personal details with any other third party other than is set out in our [Privacy Policy](/privacy){:.gray}. Our [Privacy Policy](/privacy){:.gray} forms part of these Terms and Conditions and by agreeing to these Terms and Conditions you are also agreeing to the way we use and protect your personal information in line with our [Privacy Policy](/privacy){:.gray}. 14 | 15 | 4. Refund Policy
If you make an error in your donation please contact us either by email at jhvanderschee@gmail.com, by phone at +31618518928 within 14 days and a full refund will be made to you. 16 | 17 | 5. General
We reserve the right to amend these Terms and Conditions at any time. -------------------------------------------------------------------------------- /uploads/Paper_Navy_-_08_-_Swan_Song.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/Paper_Navy_-_08_-_Swan_Song.mp3 -------------------------------------------------------------------------------- /uploads/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/Thumbs.db -------------------------------------------------------------------------------- /uploads/addtohomescreen1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/addtohomescreen1.jpeg -------------------------------------------------------------------------------- /uploads/addtohomescreen2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/addtohomescreen2.jpg -------------------------------------------------------------------------------- /uploads/album/Beautiful Mountains.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/album/Beautiful Mountains.jpg -------------------------------------------------------------------------------- /uploads/album/Museum of Pop Culture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/album/Museum of Pop Culture.jpg -------------------------------------------------------------------------------- /uploads/album/Seattle View.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/album/Seattle View.jpg -------------------------------------------------------------------------------- /uploads/album/Seattle by Night.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/album/Seattle by Night.jpg -------------------------------------------------------------------------------- /uploads/album/Space Needle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/album/Space Needle.jpg -------------------------------------------------------------------------------- /uploads/album/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/album/Thumbs.db -------------------------------------------------------------------------------- /uploads/beer/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/beer/1.jpg -------------------------------------------------------------------------------- /uploads/beer/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/beer/2.jpg -------------------------------------------------------------------------------- /uploads/beer/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/beer/3.jpg -------------------------------------------------------------------------------- /uploads/beer/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/beer/4.jpg -------------------------------------------------------------------------------- /uploads/beer/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/beer/5.jpg -------------------------------------------------------------------------------- /uploads/beer/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/beer/Thumbs.db -------------------------------------------------------------------------------- /uploads/chocolates/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/chocolates/1.jpg -------------------------------------------------------------------------------- /uploads/chocolates/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/chocolates/2.jpg -------------------------------------------------------------------------------- /uploads/chocolates/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/chocolates/3.jpg -------------------------------------------------------------------------------- /uploads/chrisferdinandi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/chrisferdinandi.jpg -------------------------------------------------------------------------------- /uploads/coffee/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/coffee/1.jpg -------------------------------------------------------------------------------- /uploads/coffee/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/coffee/2.jpg -------------------------------------------------------------------------------- /uploads/coffee/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/coffee/3.jpg -------------------------------------------------------------------------------- /uploads/coffee/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/coffee/4.jpg -------------------------------------------------------------------------------- /uploads/coffee/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/coffee/5.jpg -------------------------------------------------------------------------------- /uploads/coffee/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/coffee/Thumbs.db -------------------------------------------------------------------------------- /uploads/feature.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/feature.jpg -------------------------------------------------------------------------------- /uploads/grumpycat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/grumpycat.jpg -------------------------------------------------------------------------------- /uploads/grumpycat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/grumpycat2.jpg -------------------------------------------------------------------------------- /uploads/img_20181101_113818211.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/img_20181101_113818211.jpg -------------------------------------------------------------------------------- /uploads/joost/Joost van der Schee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/joost/Joost van der Schee.jpg -------------------------------------------------------------------------------- /uploads/joostvanderschee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/joostvanderschee.jpg -------------------------------------------------------------------------------- /uploads/macdonaldsrump.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/macdonaldsrump.jpg -------------------------------------------------------------------------------- /uploads/share.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/share.jpg -------------------------------------------------------------------------------- /uploads/slider/ganapathy-kumar-93498.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/slider/ganapathy-kumar-93498.jpg -------------------------------------------------------------------------------- /uploads/slider/ganapathy-kumar-93498_scaled.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/slider/ganapathy-kumar-93498_scaled.jpg -------------------------------------------------------------------------------- /uploads/slider/ricardo-gomez-angel-180819.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/slider/ricardo-gomez-angel-180819.jpg -------------------------------------------------------------------------------- /uploads/slider/ricardo-gomez-angel-180819_scaled.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/slider/ricardo-gomez-angel-180819_scaled.jpg -------------------------------------------------------------------------------- /uploads/slider/samuel-zeller-356272.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/slider/samuel-zeller-356272.jpg -------------------------------------------------------------------------------- /uploads/slider/samuel-zeller-356272_scaled.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/slider/samuel-zeller-356272_scaled.jpg -------------------------------------------------------------------------------- /uploads/slider/samuel-zeller-356338.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/slider/samuel-zeller-356338.jpg -------------------------------------------------------------------------------- /uploads/slider/samuel-zeller-356338_scaled.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/slider/samuel-zeller-356338_scaled.jpg -------------------------------------------------------------------------------- /uploads/t-shirt/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/t-shirt/Thumbs.db -------------------------------------------------------------------------------- /uploads/t-shirt/view.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/t-shirt/view.jpeg -------------------------------------------------------------------------------- /uploads/t-shirt/view3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/t-shirt/view3.jpeg -------------------------------------------------------------------------------- /uploads/t-shirt/view4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/cbbeb9839028d2c32da07722acf3c8b9371dc120/uploads/t-shirt/view4.jpeg -------------------------------------------------------------------------------- /without-plugin.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Jekyll without plugins 3 | --- 4 | 5 | -------------------------------------------------------------------------------- /without-plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Jekyll without plugins 3 | layout: without-plugin 4 | --- 5 | 6 | ## Plugin-free solutions 7 | 8 | Jekyll plugins can alter the way the HTML is generated, but most functionalities do not require that. Below you will find a list of add-on functionalities for Jekyll and their plugin-free solutions. They are all easy to install and, most important, very easy to adjust to your needs. Let's give WordPress users a run for their money! 9 | --------------------------------------------------------------------------------