├── .gitignore ├── 404.md ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── _config.yml ├── _data ├── authors.yml └── navigation.yml ├── _includes ├── analytics.html ├── contact-form.html ├── footer.html ├── head.html ├── header.html ├── navigation.html └── page-intro.html ├── _layouts ├── 404.html ├── blog.html ├── compress.html ├── contact.html ├── default.html ├── home.html ├── page.html └── post.html ├── _posts ├── 2018-02-23-welcome-to-jekyll.md ├── 2018-07-09-another-post.md ├── 2018-07-11-a-simple-post.md └── 2018-07-19-the-most-recent-post-so-far.md ├── _sass ├── main.scss └── partials │ ├── _app.scss │ ├── _fonts.scss │ ├── _mixins.scss │ ├── _normalize.scss │ ├── _typography.scss │ ├── _utilities.scss │ └── _variables.scss ├── admin ├── config.yml ├── index.html └── preview-templates │ ├── index.js │ ├── page.js │ └── post.js ├── assets ├── img │ └── uploads │ │ └── screenshot-editor.jpg └── main.scss ├── docker-compose.yml ├── netlify.toml └── pages ├── about.md ├── blog.md ├── contact.md └── index.md /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | .jekyll-metadata 4 | .users.yml 5 | -------------------------------------------------------------------------------- /404.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: 404 3 | title: Page not found 4 | permalink: /404.html 5 | section: 404 6 | --- 7 | 8 | ## 404 9 | 10 | Sorry, the requested page could not be found. 11 | 12 | Please visit the [Home Page](/) instead. 13 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | # Hello! This is where you manage which Jekyll version is used to run. 4 | # When you want to use a different version, change it below, save the 5 | # file and run `bundle install`. Run Jekyll with `bundle exec`, like so: 6 | # 7 | # bundle exec jekyll serve 8 | # 9 | # This will help ensure the proper Jekyll version is running. 10 | # Happy Jekylling! 11 | gem "jekyll", "~> 3.8" 12 | 13 | # If you want to use GitHub Pages, remove the "gem "jekyll"" above and 14 | # uncomment the line below. To upgrade, run `bundle update github-pages`. 15 | # gem "github-pages", group: :jekyll_plugins 16 | 17 | # If you have any plugins, put them here! 18 | group :jekyll_plugins do 19 | # 20 | end 21 | 22 | # Windows does not include zoneinfo files, so bundle the tzinfo-data gem 23 | gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby] 24 | 25 | # Performance-booster for watching directories on Windows 26 | gem "wdm", "~> 0.1.0" if Gem.win_platform? 27 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | addressable (2.5.2) 5 | public_suffix (>= 2.0.2, < 4.0) 6 | colorator (1.1.0) 7 | concurrent-ruby (1.1.4) 8 | em-websocket (0.5.1) 9 | eventmachine (>= 0.12.9) 10 | http_parser.rb (~> 0.6.0) 11 | eventmachine (1.2.7) 12 | ffi (1.9.25) 13 | forwardable-extended (2.6.0) 14 | http_parser.rb (0.6.0) 15 | i18n (0.9.5) 16 | concurrent-ruby (~> 1.0) 17 | jekyll (3.8.5) 18 | addressable (~> 2.4) 19 | colorator (~> 1.0) 20 | em-websocket (~> 0.5) 21 | i18n (~> 0.7) 22 | jekyll-sass-converter (~> 1.0) 23 | jekyll-watch (~> 2.0) 24 | kramdown (~> 1.14) 25 | liquid (~> 4.0) 26 | mercenary (~> 0.3.3) 27 | pathutil (~> 0.9) 28 | rouge (>= 1.7, < 4) 29 | safe_yaml (~> 1.0) 30 | jekyll-sass-converter (1.5.2) 31 | sass (~> 3.4) 32 | jekyll-watch (2.1.2) 33 | listen (~> 3.0) 34 | kramdown (1.17.0) 35 | liquid (4.0.1) 36 | listen (3.1.5) 37 | rb-fsevent (~> 0.9, >= 0.9.4) 38 | rb-inotify (~> 0.9, >= 0.9.7) 39 | ruby_dep (~> 1.2) 40 | mercenary (0.3.6) 41 | pathutil (0.16.2) 42 | forwardable-extended (~> 2.6) 43 | public_suffix (3.0.3) 44 | rb-fsevent (0.10.3) 45 | rb-inotify (0.10.0) 46 | ffi (~> 1.0) 47 | rouge (3.3.0) 48 | ruby_dep (1.5.0) 49 | safe_yaml (1.0.4) 50 | sass (3.7.2) 51 | sass-listen (~> 4.0.0) 52 | sass-listen (4.0.0) 53 | rb-fsevent (~> 0.9, >= 0.9.4) 54 | rb-inotify (~> 0.9, >= 0.9.7) 55 | 56 | PLATFORMS 57 | ruby 58 | 59 | DEPENDENCIES 60 | jekyll (~> 3.8) 61 | tzinfo-data 62 | 63 | BUNDLED WITH 64 | 1.16.1 65 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Dan Urbanowicz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Jekyll Netlify Boilerplate 2 | 3 | *Note: Check out my [Eleventy Netlify Boilerplate](https://github.com/danurbanowicz/eleventy-netlify-boilerplate). It does pretty much the same as this project but uses the [Eleventy](https://www.11ty.io/) static site generator. It's fast, flexible and doesn't require Ruby.* 4 | 5 | **A really simple Jekyll template for creating a fast, static website on Netlify with 6 | a continuous deployment workflow.** 7 | 8 | 🔥 **This project is featured on Netlify's official [template showcase](http://templates.netlify.com/template/jekyll-with-netlify-cms-boilerplate/) and blog: [The top 10 Static Site Generators to watch in 2018](http://templates.netlify.com/template/jekyll-with-netlify-cms-boilerplate/)** 🔥 9 | 10 | * Minimal styling, ready to make your own 11 | * Example blog posts, pages and contact form 12 | * Responsive CSS Grid layout with fallbacks for older browsers 13 | * Continuous Deployment workflow via Netlify and Github 14 | * Netlify CMS for managing content 15 | * Netlify Identity for authenticating users 16 | * Netlify Forms for processing your static HTML forms with reCAPTCHA 17 | * Optional Netlify `_redirects` and `_headers` files ready to use 18 | * Jekyll SASS pipeline 19 | * Minified HTML and CSS 20 | 21 | Based on Netlify's [Jekyll + Netlify CMS](https://github.com/netlify-templates/jekyll-netlify-cms) starter template, head over there for more details on deployment and build settings or to get help with setting up Netlify. 22 | 23 | For help with templates, local development and other Jekyll related stuff, check out the excellent [Jekyll Docs](https://jekyllrb.com/docs/home/). 24 | 25 | ## [View Demo](https://jekyll-netlify-boilerplate.netlify.com/) 26 | 27 | ## Performance 28 | 29 | You can test the demo site's TTFB (Time To First Byte) at [testmysite.io](https://testmysite.io/5b50abe51f12b74b81dd5442/jekyll-netlify-boilerplate.netlify.com) 30 | 31 | ## Getting started 32 | 33 | Simply click the deploy button to get your own copy of the repository deployed to Netlify: 34 | 35 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/danurbanowicz/jekyll-netlify-boilerplate&stack=cms) 36 | 37 | This will setup everything needed for running the CMS: 38 | 39 | * A new repository in your GitHub account with the code 40 | * Full Continuous Deployment to Netlify's global CDN network 41 | * Control users and access with Netlify Identity 42 | * Manage content with Netlify CMS 43 | 44 | ### Setup authentication 45 | 46 | After deploying this project, Netlify Identity will add you as a CMS user and 47 | will email you an invite. It is not necessary to accept this invite if you wish 48 | to use an 49 | [OAuth provider](https://www.netlify.com/docs/identity/#external-provider-login) 50 | (e.g. Github) to manage authentication for your CMS. 51 | It is recommended to use this method of authentication as it removes the need 52 | for an email & password to log in to the CMS and is generally more secure. You 53 | will need to add an OAuth provider in your Netlify app settings under 54 | "Settings" > "Identity" > "External providers". 55 | 56 | Next, navigate to `/admin` on your site, choose your OAuth provider from the 57 | login box and you should then be logged into your CMS. 58 | 59 | Now you're all set, and you can start editing content! 60 | 61 | **Note:** if you switch the repo that was created to private, you'll need to regenerate your token, 62 | as the token generated using the deploy to Netlify button can only access public repositories. To 63 | regenerate your token, head to "Settings" in your Netlify site dashboard, go to the "Identity" 64 | section, then scroll to "Services" where you'll see an "Edit settings" button. Click that and you'll 65 | see a text link to "Generate access token in GitHub". 66 | 67 | ## Local Development 68 | 69 | Clone this repository and run: 70 | 71 | ```bash 72 | bundle install 73 | bundle exec jekyll server --watch 74 | ``` 75 | 76 | In case you don't want to install ruby-bundler you can use docker: 77 | 78 | ```bash 79 | docker-compose up 80 | ``` 81 | 82 | Jekyll will watch your project folder for changes. 83 | 84 | Now navigate to [localhost:4000](http://localhost:4000/) to preview the site, and 85 | [localhost:4000/admin](http://localhost:4000/admin) to log into the CMS. 86 | 87 | ## Bug reports, feature requests, etc 88 | 89 | This is an ongoing project and I welcome contributions. Feel free to submit a PR. 90 | 91 | If you need any help with setting up Netlify CMS, you can reach out to the Netlify team in the [Netlify CMS Gitter](https://gitter.im/netlify/netlifycms). 92 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole blog, values 4 | # which you are expected to set up once and rarely edit after that. If you find 5 | # yourself editing this file very often, consider using Jekyll's data files 6 | # feature for the data you need to update frequently. 7 | # 8 | # For technical reasons, this file is *NOT* reloaded automatically when you use 9 | # 'bundle exec jekyll serve'. If you change this file, please restart the server process. 10 | 11 | # Site settings 12 | # These are used to personalize your new site. If you look in the HTML files, 13 | # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on. 14 | # You can create any custom variable you would like, and they will be accessible 15 | # in the templates via {{ site.myvariable }}. 16 | title: Jekyll Netlify Boilerplate 17 | email: your-email@example.com 18 | description: >- # this means to ignore newlines until "baseurl:" 19 | Write an awesome description for your new site here. You can edit this 20 | line in _config.yml. 21 | baseurl: "" # the subpath of your site if applicable, e.g. /blog 22 | url: "https://jekyll-netlify-boilerplate.netlify.com" # the base hostname & protocol for your site, e.g. https://example.com 23 | 24 | # Permalink format (/blog/ is ignored for pages) 25 | permalink: /blog/:title 26 | 27 | # Enable section IDs in frontmatter, useful for identifying current page 28 | # (used as a hook for styling etc) 29 | section: true 30 | 31 | # set to 'true' to enable Netlify CMS (/admin) in production builds 32 | netlifycms: true 33 | 34 | # set to 'true' to enable Google Analytics tracking code in production builds 35 | analytics: false 36 | 37 | # Compress CSS 38 | sass: 39 | style: compressed 40 | sass_dir: _sass 41 | 42 | # Compress HTML (in liquid via layouts/compress.html) 43 | compress_html: 44 | clippings: all 45 | 46 | # set some common post defaults 47 | defaults: 48 | - 49 | scope: 50 | path: "" # an empty string here means all files in the project 51 | type: "posts" # previously `post` in Jekyll 2.2. 52 | values: 53 | layout: "post" # set the correct default template for a post 54 | section: "post" # set the root section name 55 | 56 | # Build settings 57 | markdown: kramdown 58 | 59 | # Kramdown options 60 | kramdown: 61 | # Prevent IDs from being added to h1-h6 tags 62 | auto_ids: false 63 | 64 | # Include in processing (e.g. Netlify directives) 65 | # Uncomment before use 66 | 67 | #include: 68 | # - _redirects 69 | # - _headers 70 | 71 | # Exclude from processing. 72 | # The following items will not be processed. 73 | exclude: 74 | - README.md 75 | - LICENSE.txt 76 | - netlify.toml 77 | - feed.xml 78 | - Gemfile 79 | - Gemfile.lock 80 | - docker-compose.yml 81 | - node_modules 82 | - vendor/bundle/ 83 | - vendor/cache/ 84 | - vendor/gems/ 85 | - vendor/ruby/ 86 | -------------------------------------------------------------------------------- /_data/authors.yml: -------------------------------------------------------------------------------- 1 | # specify site authors in this file 2 | # you can add .yml files for any other global data in this folder 3 | 4 | dan_urbanowicz: 5 | name: Dan Urbanowicz 6 | email: dan.urbanowicz@gmail.com 7 | web: https://www.danurbanowicz.com 8 | john_doe: 9 | name: John Doe 10 | email: johndoe@email.com 11 | web: http://twitter.com/johndoe 12 | -------------------------------------------------------------------------------- /_data/navigation.yml: -------------------------------------------------------------------------------- 1 | # specify main menu items here 2 | 3 | - text: Home 4 | url: / 5 | - text: About 6 | url: /about 7 | - text: Contact 8 | url: /contact 9 | - text: Blog 10 | url: /blog 11 | -------------------------------------------------------------------------------- /_includes/analytics.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /_includes/contact-form.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% if page.section == "home" %} 5 | {{ site.title }} 6 | 7 | {% else %} 8 | {{ page.title }} 9 | {% if page.meta_description %} 10 | 11 | {% endif %} 12 | {% endif %} 13 | 14 | {% if jekyll.environment == 'production' and site.analytics %} 15 | {% include analytics.html %} 16 | {% endif %} 17 | 18 | 19 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

4 | {{ site.title | escape }} 5 |

6 | 7 | 10 | 11 |
12 | -------------------------------------------------------------------------------- /_includes/navigation.html: -------------------------------------------------------------------------------- 1 | {% assign navurl = page.url | remove: 'index.html' %} 2 | 12 | -------------------------------------------------------------------------------- /_includes/page-intro.html: -------------------------------------------------------------------------------- 1 | {% if page.intro_paragraph and page.intro_paragraph != '' %} 2 |

3 | {{ page.intro_paragraph | markdownify | remove: '

' | remove: '

' }} 4 |

5 | {% endif %} 6 | -------------------------------------------------------------------------------- /_layouts/404.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | {{ content }} 6 | -------------------------------------------------------------------------------- /_layouts/blog.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |

{{ page.title }}

6 | 7 | {% include page-intro.html %} 8 | 9 | {{ content }} 10 | 11 |
12 | 13 |

Posts

14 | 15 | 32 | 33 |
34 | -------------------------------------------------------------------------------- /_layouts/compress.html: -------------------------------------------------------------------------------- 1 | --- 2 | # Jekyll layout that compresses HTML 3 | # v3.0.4 4 | # http://jch.penibelst.de/ 5 | # © 2014–2015 Anatol Broder 6 | # MIT License 7 | --- 8 | 9 | {% capture _LINE_FEED %} 10 | {% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "" %}{% endif %}{% unless _pre_before contains "" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " ;; ;" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %}
Step Bytes
raw {{ content | size }}{% if _profile_endings %}
endings {{ _profile_endings }}{% endif %}{% if _profile_startings %}
startings {{ _profile_startings }}{% endif %}{% if _profile_comments %}
comments {{ _profile_comments }}{% endif %}{% if _profile_collapse %}
collapse {{ _profile_collapse }}{% endif %}{% if _profile_clippings %}
clippings {{ _profile_clippings }}{% endif %}
{% endif %}{% endif %} 11 | -------------------------------------------------------------------------------- /_layouts/contact.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |

{{ page.title }}

6 | 7 | {% include page-intro.html %} 8 | 9 | {{ content }} 10 | 11 | {% include contact-form.html %} 12 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: compress 3 | --- 4 | 5 | 6 | 7 | 8 | {% include head.html %} 9 | 10 | 11 | 12 | {% include header.html %} 13 | 14 |
15 | 16 | {{ content }} 17 | 18 |
19 | 20 | {% include footer.html %} 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /_layouts/home.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |

{{ page.title }}

6 | 7 | {% include page-intro.html %} 8 | 9 | {{ content }} 10 | 11 |
12 | 13 |

Recent posts from the blog

14 | 15 |
    16 | {% for post in site.posts limit:3 %} 17 |
  • 18 | {{ post.title }} 19 |
    • 20 | {% endfor %} 21 |
22 | 23 |
24 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |

{{ page.title }}

6 | 7 | {% include page-intro.html %} 8 | 9 | {{ content }} 10 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | {% assign author = site.data.authors[page.author] %} 5 | 6 |

{{ page.title }}

7 | 8 | 16 | 17 | {% include page-intro.html %} 18 | 19 | {{ content }} 20 | 21 | 35 | -------------------------------------------------------------------------------- /_posts/2018-02-23-welcome-to-jekyll.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Welcome to Jekyll! 4 | meta_description: A description may also be set in a post. You can find more information about it in pages/about.md. 5 | author: dan_urbanowicz 6 | date: '2018-07-03 12:00:00' 7 | categories: misc 8 | --- 9 | You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. 10 | 11 | To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. 12 | 13 | Jekyll also offers powerful support for code snippets: 14 | 15 | {% highlight ruby %} 16 | def print_hi(name) 17 | puts "Hi, #{name}" 18 | end 19 | print_hi('Tom') 20 | #=> prints 'Hi, Tom' to STDOUT. 21 | {% endhighlight %} 22 | 23 | Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk]. 24 | 25 | [jekyll-docs]: https://jekyllrb.com/docs/home 26 | [jekyll-gh]: https://github.com/jekyll/jekyll 27 | [jekyll-talk]: https://talk.jekyllrb.com/ 28 | 29 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 30 | -------------------------------------------------------------------------------- /_posts/2018-07-09-another-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Another post 4 | author: john_doe 5 | date: '2018-07-06 12:00:00' 6 | categories: misc 7 | --- 8 | Another post in here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 9 | 10 | ![Netlify CMS Screenshot](/assets/img/uploads/screenshot-editor.jpg) 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 13 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 15 | 16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 17 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 18 | 19 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 20 | -------------------------------------------------------------------------------- /_posts/2018-07-11-a-simple-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: A simple blog post 4 | author: dan_urbanowicz 5 | date: 2018-07-11T00:12:57.000Z 6 | intro_paragraph: '' 7 | categories: misc 8 | --- 9 | 10 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 13 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 15 | 16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 17 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 18 | 19 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 20 | -------------------------------------------------------------------------------- /_posts/2018-07-19-the-most-recent-post-so-far.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: The most recent post so far 4 | author: john_doe 5 | date: '2018-07-19 10:07:32' 6 | intro_paragraph: '' 7 | categories: misc 8 | --- 9 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumo. 10 | -------------------------------------------------------------------------------- /_sass/main.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @import 4 | "partials/fonts", 5 | "partials/variables", 6 | "partials/mixins", 7 | "partials/normalize", 8 | "partials/utilities", 9 | "partials/typography", 10 | "partials/app" 11 | ; 12 | -------------------------------------------------------------------------------- /_sass/partials/_app.scss: -------------------------------------------------------------------------------- 1 | // Main Styles 2 | 3 | // See the other SASS partials for typography, variables etc. 4 | // CSS Grid is used for the layout with fallbacks for less capable browsers 5 | // declared beforehand, and a @supports feature query to reset fallbacks when 6 | // necessary. https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks 7 | 8 | // the body element is our primary layout grid 9 | body { 10 | height: 100vh; 11 | display: grid; 12 | grid-template-rows: auto 1fr auto; 13 | grid-template-columns: 14 | [full-start] minmax(1rem, 1fr) 15 | [main-start] minmax(0, 52rem) [main-end] 16 | minmax(1rem, 1fr) [full-end]; 17 | } 18 | 19 | // by default, make any new children of body to span the full track 20 | body > * { 21 | grid-column: full; 22 | padding: 2rem 1rem; 23 | } 24 | 25 | // header, the first grid row 26 | // it is also a grid for the logo and nav 27 | header { 28 | grid-column: full; 29 | display: grid; 30 | background-color: $brand-color; 31 | padding: 2rem; 32 | @media screen and (min-width: $screen-sm-min) { 33 | grid-template-columns: 1fr auto; 34 | grid-column-gap: 1rem; 35 | } 36 | } 37 | 38 | // logo, is a grid item 39 | header > h1 { 40 | display: inline-block; 41 | padding-bottom: 1rem; 42 | @media screen and (min-width: $screen-sm-min) { 43 | padding-bottom: 0; 44 | } 45 | a, 46 | a:visited { 47 | text-decoration: none; 48 | border: 0; 49 | color: white; 50 | @media screen and (min-width: $screen-sm-min) { 51 | padding: 1rem; 52 | } 53 | } 54 | a:hover { 55 | color: white; 56 | } 57 | } 58 | 59 | // main menu, is a grid item 60 | header > nav { 61 | @media screen and (min-width: $screen-sm-min) { 62 | float: right; 63 | } 64 | ul { 65 | // flexbox is better than grid for distributing an unknown qty of children 66 | display: flex; 67 | li { 68 | margin-right: 2rem; 69 | display: inline-block; 70 | @media screen and (min-width: $screen-sm-min) { 71 | margin-right: 0; 72 | } 73 | a, 74 | a:visited { 75 | color: white; 76 | text-decoration: none; 77 | border: 0; 78 | @media screen and (min-width: $screen-sm-min) { 79 | padding: 1rem; 80 | } 81 | &[data-current="current page"] { 82 | // you can add an active nav item style here 83 | } 84 | } 85 | a:hover { 86 | color: white; 87 | } 88 | } 89 | } 90 | } 91 | 92 | // our main content wrapper, the width scales with font size 93 | main { 94 | width: 100%; 95 | max-width: 52rem; 96 | margin-right: auto; 97 | margin-left: auto; 98 | grid-column: main; 99 | display: grid; 100 | padding-top: 8rem; 101 | padding-bottom: 8rem; 102 | @media screen and (min-width: $screen-md-min) { 103 | align-content: start; 104 | } 105 | } 106 | 107 | // reset breaking fallbacks (e.g. widths) if CSS Grid is supported 108 | // float, inline-block, table properties are already ignored by CSS Grid 109 | @supports (display: grid) { 110 | main { 111 | width: auto; 112 | max-width: none; 113 | } 114 | } 115 | 116 | // blog posts list 117 | html[data-current="blog"] main > section { 118 | ul li { 119 | padding: 2rem 0; 120 | border-bottom: 0.05em solid $hairline-color; 121 | p { 122 | padding-bottom: 0; 123 | } 124 | } 125 | } 126 | 127 | // adjacent blog posts links 128 | nav[aria-label="Adjacent Posts"] { 129 | padding: 4rem 0; 130 | ul { 131 | display: flex; 132 | li { 133 | flex: 0 0 50%; 134 | width: auto; 135 | &:nth-child(2) { 136 | text-align: right; 137 | } 138 | } 139 | } 140 | } 141 | 142 | // contact form 143 | html[data-current="contact"] main > form { 144 | display: grid; 145 | label { 146 | display: none; 147 | } 148 | input, 149 | textarea { 150 | width: 100%; 151 | padding: 1rem; 152 | margin-bottom: 2rem; 153 | } 154 | button { 155 | width: 100%; 156 | } 157 | } 158 | 159 | // reset CSS Grid fallbacks when they aren't required 160 | @supports (display: grid) { 161 | html[data-current="contact"] main > form { 162 | input, 163 | textarea, 164 | button { 165 | width: auto; 166 | max-width: none; 167 | } 168 | } 169 | } 170 | 171 | footer { 172 | grid-column: full; 173 | display: grid; 174 | grid-template-columns: 175 | [full-start] minmax(1rem, 1fr) 176 | [main-start] minmax(0, 50rem) [main-end] 177 | minmax(1rem, 1fr) [full-end]; 178 | background-color: $grey-bg-color; 179 | > small { 180 | grid-column: main; 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /_sass/partials/_fonts.scss: -------------------------------------------------------------------------------- 1 | // add font-face or font import declarations here 2 | -------------------------------------------------------------------------------- /_sass/partials/_mixins.scss: -------------------------------------------------------------------------------- 1 | // List your mixins in here to keep things tidy 2 | 3 | // A basic button 4 | @mixin button($btn-bg, $btn-text) { 5 | font-weight: $bold-font-weight; 6 | padding: 2rem; 7 | line-height: $base-line-height; 8 | color: $btn-text; 9 | background-color: $btn-bg; 10 | border: 3px solid $btn-bg; 11 | } 12 | 13 | // Disable text selection 14 | @mixin user-select($argument: none){ 15 | -webkit-user-select: $argument; 16 | -moz-user-select: $argument; 17 | -ms-user-select: $argument; 18 | user-select: $argument; 19 | } 20 | -------------------------------------------------------------------------------- /_sass/partials/_normalize.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 1. Set default font family to sans-serif. 3 | * 2. Prevent iOS and IE text size adjust after device orientation change, 4 | * without disabling user zoom. 5 | */ 6 | 7 | html { 8 | font-family: sans-serif; /* 1 */ 9 | -ms-text-size-adjust: 100%; /* 2 */ 10 | -webkit-text-size-adjust: 100%; /* 2 */ 11 | } 12 | 13 | /** 14 | * Remove default margin. 15 | */ 16 | 17 | body { 18 | margin: 0; 19 | } 20 | 21 | /* HTML5 display definitions 22 | ========================================================================== */ 23 | 24 | /** 25 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 26 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 27 | * and Firefox. 28 | * Correct `block` display not defined for `main` in IE 11. 29 | */ 30 | 31 | article, 32 | aside, 33 | details, 34 | figcaption, 35 | figure, 36 | footer, 37 | header, 38 | hgroup, 39 | main, 40 | menu, 41 | nav, 42 | picture, 43 | section, 44 | summary { 45 | display: block; 46 | } 47 | 48 | /** 49 | * 1. Correct `inline-block` display not defined in IE 8/9. 50 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 51 | */ 52 | 53 | audio, 54 | canvas, 55 | progress, 56 | video { 57 | display: inline-block; /* 1 */ 58 | vertical-align: baseline; /* 2 */ 59 | } 60 | 61 | /** 62 | * Prevent modern browsers from displaying `audio` without controls. 63 | * Remove excess height in iOS 5 devices. 64 | */ 65 | 66 | audio:not([controls]) { 67 | display: none; 68 | height: 0; 69 | } 70 | 71 | /** 72 | * Address `[hidden]` styling not present in IE 8/9/10. 73 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 74 | */ 75 | 76 | [hidden], 77 | template { 78 | display: none; 79 | } 80 | 81 | /* Links 82 | ========================================================================== */ 83 | 84 | /** 85 | * Remove the gray background color from active links in IE 10. 86 | */ 87 | 88 | a { 89 | background-color: transparent; 90 | } 91 | 92 | /** 93 | * Improve readability of focused elements when they are also in an 94 | * active/hover state. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -webkit-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | -webkit-box-sizing: border-box; 337 | box-sizing: border-box; /* 1 */ 338 | padding: 0; /* 2 */ 339 | } 340 | 341 | /** 342 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 343 | * `font-size` values of the `input`, it causes the cursor style of the 344 | * decrement button to change from `default` to `text`. 345 | */ 346 | 347 | input[type="number"]::-webkit-inner-adjust-hue-button, 348 | input[type="number"]::-webkit-outer-adjust-hue-button { 349 | height: auto; 350 | } 351 | 352 | /** 353 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 354 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -webkit-box-sizing: content-box; 360 | box-sizing: content-box; /* 2 */ 361 | } 362 | 363 | /** 364 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 365 | * Safari (but not Chrome) clips the cancel button when the search input has 366 | * padding (and `textfield` appearance). 367 | */ 368 | 369 | input[type="search"]::-webkit-search-cancel-button, 370 | input[type="search"]::-webkit-search-decoration { 371 | -webkit-appearance: none; 372 | } 373 | 374 | /** 375 | * Define consistent border, margin, and padding. 376 | */ 377 | 378 | fieldset { 379 | border: 1px solid #c0c0c0; 380 | margin: 0 2px; 381 | padding: 0.35em 0.625em 0.75em; 382 | } 383 | 384 | /** 385 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 386 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 387 | */ 388 | 389 | legend { 390 | border: 0; /* 1 */ 391 | padding: 0; /* 2 */ 392 | } 393 | 394 | /** 395 | * Remove default vertical scrollbar in IE 8/9/10/11. 396 | */ 397 | 398 | textarea { 399 | overflow: auto; 400 | } 401 | 402 | /** 403 | * Don't inherit the `font-weight` (applied by a rule above). 404 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 405 | */ 406 | 407 | optgroup { 408 | font-weight: bold; 409 | } 410 | 411 | /* Tables 412 | ========================================================================== */ 413 | 414 | /** 415 | * Remove most spacing between table cells. 416 | */ 417 | 418 | table { 419 | border-collapse: collapse; 420 | border-spacing: 0; 421 | } 422 | 423 | td, 424 | th { 425 | padding: 0; 426 | } 427 | -------------------------------------------------------------------------------- /_sass/partials/_typography.scss: -------------------------------------------------------------------------------- 1 | // Basic Typographic Defaults 2 | 3 | // set font sizes in percent on the root element 4 | 5 | html { 6 | font-size: $base-font-size; 7 | @media screen and (min-width: $screen-xs-min) { 8 | font-size: $base-font-size * 1.2; 9 | } 10 | @media screen and (min-width: $screen-md-min) { 11 | font-size: $base-font-size * 1.4; 12 | } 13 | } 14 | 15 | // now we can specify a single font size in rem for each of our elements 16 | // the root breakpoints above will then scale all elements together 17 | 18 | body { 19 | color: $text-color; 20 | font-family: $base-font; 21 | line-height: $base-line-height; 22 | font-weight: $base-font-weight; 23 | font-style: normal; 24 | font-variant: normal; 25 | font-size: 1.6rem; // this is equivalent to 16px 26 | } 27 | 28 | h1,h2,h3,h4,h5,h6,p,figure,time { 29 | padding-bottom: 2rem; 30 | } 31 | 32 | h1,h2,h3,h4,h5,h6,figure { 33 | p + &, 34 | figure + & { 35 | padding-top: 2rem; 36 | } 37 | } 38 | 39 | 40 | p.intro { 41 | font-size: 2.4rem; 42 | color: lighten($text-color, 40%); 43 | padding-bottom: 4rem; 44 | @media screen and (min-width: $screen-sm-min) { 45 | padding-bottom: 4rem; 46 | } 47 | } 48 | 49 | h1,h2,h3,h4,h5,h6 { 50 | font-weight: $bold-font-weight; 51 | line-height: $base-line-height / 1.3; 52 | } 53 | 54 | h2 { 55 | font-size: 3.2rem; 56 | padding-bottom: 4rem; 57 | } 58 | 59 | h3 { 60 | font-size: 2rem; 61 | } 62 | 63 | code { 64 | font-family: $code-font; 65 | font-size: 1.2rem; 66 | color: $text-color; 67 | } 68 | 69 | strong { 70 | font-weight: $bold-font-weight; 71 | } 72 | 73 | small { 74 | font-size: 1.2rem; 75 | } 76 | 77 | a, 78 | a:visited { 79 | border-bottom: 0.05em solid $link-color; 80 | text-decoration: none; 81 | color: $link-color; 82 | } 83 | 84 | a:hover, 85 | a:active { 86 | text-decoration: none; 87 | border: 0; 88 | color: $link-hover-color; 89 | } 90 | 91 | header > h1 { 92 | line-height: $base-line-height; 93 | font-weight: $base-font-weight; 94 | @media screen and (min-width: $screen-sm-min) { 95 | text-align: left; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /_sass/partials/_utilities.scss: -------------------------------------------------------------------------------- 1 | // utilities for modifying some default browser behaviour 2 | 3 | html, body, div, span, applet, object, iframe, 4 | h1, h2, h3, h4, h5, h6, p, blockquote, button, pre, 5 | a, abbr, acronym, address, big, cite, code, 6 | del, dfn, em, img, ins, kbd, q, s, samp, 7 | small, strike, strong, sub, sup, tt, var, 8 | b, u, i, center, 9 | dl, dt, dd, ol, ul, li, 10 | fieldset, form, label, legend, 11 | table, caption, tbody, tfoot, thead, tr, th, td, 12 | article, aside, canvas, details, embed, 13 | figure, figcaption, footer, header, hgroup, 14 | menu, nav, output, ruby, section, summary, 15 | time, mark, audio, video { 16 | margin: 0; 17 | padding: 0; 18 | border: 0; 19 | font-size: 100%; 20 | font: inherit; 21 | vertical-align: baseline; 22 | } 23 | 24 | * { 25 | -webkit-box-sizing: border-box; 26 | box-sizing: border-box 27 | } 28 | 29 | * :before, * :after { 30 | -webkit-box-sizing: border-box; 31 | box-sizing: border-box 32 | } 33 | 34 | input, 35 | textarea, 36 | button, 37 | select, 38 | label, 39 | a { 40 | -webkit-tap-highlight-color: rgba(0,0,0,0); 41 | outline: none; 42 | } 43 | 44 | ul, 45 | ol, 46 | dl { 47 | list-style: none; 48 | } 49 | 50 | em { 51 | font-style: italic; 52 | } 53 | 54 | body { 55 | -webkit-font-smoothing: antialiased; 56 | -moz-osx-font-smoothing: grayscale; 57 | } 58 | 59 | img { 60 | display: block; 61 | width: 100%; 62 | max-width: 100%; 63 | height: auto; 64 | } 65 | 66 | pre { 67 | background-color: $grey-bg-color; 68 | border-radius: 0.3rem; 69 | padding: 1rem; 70 | } 71 | 72 | code { 73 | background-color: $grey-bg-color; 74 | padding: 0.2rem 0.4rem; 75 | } 76 | 77 | ::selection { 78 | background-color: $selection-bg-color; 79 | } 80 | 81 | input, 82 | textarea { 83 | border: 0.05em solid $hairline-color; 84 | &:focus { 85 | border: 0.05em solid $text-color; 86 | } 87 | } 88 | 89 | textarea { 90 | vertical-align: top; 91 | resize: vertical; 92 | max-width: 100%; 93 | } 94 | 95 | button { 96 | @include button($link-color, $text-color-negative); 97 | } 98 | -------------------------------------------------------------------------------- /_sass/partials/_variables.scss: -------------------------------------------------------------------------------- 1 | // site colours 2 | $text-color: rgb(40,40,40); 3 | $text-color-negative: white; 4 | $brand-color: rgb(29,37,52); 5 | $link-color: rgb(0,114,154); 6 | $link-hover-color: rgb(0,57,78); 7 | $grey-bg-color: rgb(243,243,243); 8 | $hairline-color: rgb(230,230,230); 9 | $selection-bg-color: rgba(255,255,100,0.5); 10 | 11 | // typographic defaults 12 | $base-font: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue; 13 | $code-font: Courier, monospace; 14 | $base-font-size: 62.5%; 15 | $base-font-weight: 300; 16 | $bold-font-weight: 600; 17 | $base-line-height: 1.5; 18 | 19 | // viewport breakpoints 20 | $screen-xs-min: 480px; 21 | $screen-sm-min: 768px; 22 | $screen-md-min: 992px; 23 | $screen-lg-min: 1240px; 24 | $screen-xl-min: 1920px; 25 | -------------------------------------------------------------------------------- /admin/config.yml: -------------------------------------------------------------------------------- 1 | # Everything you need to know about configuring the CMS can be found here:- 2 | # https://www.netlifycms.org/docs/configuration-options/ 3 | 4 | backend: 5 | name: git-gateway # Netlify’s Git Gateway connects to Git provider’s API 6 | branch: master # Branch to update (master by default) 7 | 8 | media_folder: "assets/img/uploads" # Folder where user uploaded files should go 9 | 10 | publish_mode: editorial_workflow # Enable drafts 11 | 12 | collections: # A list of collections the CMS should be able to edit 13 | # POSTS 14 | - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit 15 | label: "Post" # Used in the UI, ie.: "New Post" 16 | folder: "_posts" # The path to the folder where the documents are stored 17 | sort: "date:desc" # Default is title:asc 18 | create: true # Allow users to create new documents in this collection 19 | slug: "{{year}}-{{month}}-{{day}}-{{slug}}" 20 | fields: # The fields each document in this collection have 21 | - {label: "Layout", name: "layout", widget: "hidden", default: "post"} 22 | - {label: "Title", name: "title", widget: "string", tagname: "h1"} 23 | - {label: "Meta Description", name: "meta_description", widget: "string", required: false} 24 | - label: "Author" 25 | name: "author" 26 | widget: "select" 27 | options: 28 | - { label: "Dan Urbanowicz", value: "dan_urbanowicz" } 29 | - { label: "John Doe", value: "john_doe" } 30 | - {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD HH:mm:ss"} 31 | - {label: "Intro Paragraph", name: "intro_paragraph", widget: "markdown", required: false} 32 | - {label: "Body", name: "body", widget: "markdown", required: false} 33 | - {label: "Categories", name: "categories", widget: "string", required: false} 34 | # PAGES 35 | - name: "page" 36 | label: "Page" 37 | folder: "pages" 38 | sort: "title:asc" 39 | create: false 40 | slug: "{{slug}}" 41 | fields: 42 | - {label: "Layout", name: "layout", widget: "hidden", default: "page"} 43 | - {label: "Title", name: "title", widget: "string", tagname: "h1"} 44 | - {label: "Meta Description", name: "meta_description", widget: "string", required: false} 45 | - {label: "Permalink", name: "permalink", widget: "hidden"} 46 | - {label: "Section", name: "section", widget: "hidden", default: "{{name}}"} 47 | - {label: "Intro Paragraph", name: "intro_paragraph", widget: "markdown", required: false} 48 | - {label: "Body", name: "body", widget: "markdown", required: false} 49 | -------------------------------------------------------------------------------- /admin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Content Manager 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /admin/preview-templates/index.js: -------------------------------------------------------------------------------- 1 | import Post from "/admin/preview-templates/post.js"; 2 | import Page from "/admin/preview-templates/page.js"; 3 | 4 | // Register the Post component as the preview for entries in the blog collection 5 | CMS.registerPreviewTemplate("blog", Post); 6 | CMS.registerPreviewTemplate("pages", Page); 7 | 8 | CMS.registerPreviewStyle("/assets/main.css"); 9 | // Register any CSS file on the home page as a preview style 10 | fetch("/") 11 | .then(response => response.text()) 12 | .then(html => { 13 | const f = document.createElement("html"); 14 | f.innerHTML = html; 15 | Array.from(f.getElementsByTagName("link")).forEach(tag => { 16 | if (tag.rel == "stylesheet" && !tag.media) { 17 | CMS.registerPreviewStyle(tag.href); 18 | } 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /admin/preview-templates/page.js: -------------------------------------------------------------------------------- 1 | import htm from "https://unpkg.com/htm?module"; 2 | 3 | const html = htm.bind(h); 4 | 5 | // Preview component for a Page 6 | const Page = createClass({ 7 | render() { 8 | const entry = this.props.entry; 9 | 10 | return html` 11 |
12 |

${entry.getIn(["data", "title"], null)}

13 | 14 | ${this.props.widgetFor("body")} 15 |
16 | `; 17 | } 18 | }); 19 | 20 | export default Page; 21 | -------------------------------------------------------------------------------- /admin/preview-templates/post.js: -------------------------------------------------------------------------------- 1 | import htm from "https://unpkg.com/htm?module"; 2 | import format from "https://unpkg.com/date-fns@2.7.0/esm/format/index.js?module"; 3 | 4 | const html = htm.bind(h); 5 | 6 | // Preview component for a Post 7 | const Post = createClass({ 8 | render() { 9 | const entry = this.props.entry; 10 | 11 | return html` 12 |
13 |
14 |

${entry.getIn(["data", "title"], null)}

15 |

16 | 17 | 25 | ${" by Author"} 26 | 27 |

28 | 29 |

${entry.getIn(["data", "summary"], "")}

30 | 31 | ${this.props.widgetFor("body")} 32 |

33 | ${ 34 | entry.getIn(["data", "tags"], []).map( 35 | tag => 36 | html` 37 | 38 | ` 39 | ) 40 | } 41 |

42 |
43 |
44 | `; 45 | } 46 | }); 47 | 48 | export default Post; 49 | -------------------------------------------------------------------------------- /assets/img/uploads/screenshot-editor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danurbanowicz/jekyll-netlify-boilerplate/5f16718ff14cf3e158897d6590a5b0c83f64f368/assets/img/uploads/screenshot-editor.jpg -------------------------------------------------------------------------------- /assets/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | 5 | @import "main"; 6 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.3' 2 | 3 | services: 4 | jekyll: 5 | image: jekyll/jekyll:latest 6 | command: jekyll serve --watch --force_polling --verbose 7 | ports: 8 | - 4000:4000 9 | volumes: 10 | - .:/srv/jekyll 11 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "jekyll build" 3 | publish = "_site" 4 | 5 | [build.environment] 6 | JEKYLL_ENV = "production" 7 | 8 | # REDIRECT and HEADERS examples. 9 | # Uncomment to use. Directives in this file will ALWAYS override any identical 10 | # directives present in either _redirects and _headers files, and also any 11 | # settings added in Netlify's admin interface. 12 | 13 | # Redirects and headers are GLOBAL for all builds – they do not get scoped to 14 | # contexts no matter where you define them in the file. 15 | # For context-specific rules, use _headers or _redirects files, which are 16 | # applied PER-DEPLOY. 17 | 18 | # For more information see:- https://www.netlify.com/docs/netlify-toml-reference/ 19 | 20 | # Redirect rule example 21 | 22 | #[[redirects]] 23 | # from = "/*" 24 | # to = "/blog/:splat" 25 | 26 | # The default HTTP status code is always 301, but you can define a different 27 | # one e.g. status = 302 28 | 29 | # Headers rule example 30 | # For more information see:- https://www.netlify.com/docs/netlify-toml-reference/ 31 | 32 | #[[headers]] 33 | # Define which paths this specific [[headers]] block will cover. 34 | # for = "/*" 35 | 36 | #[headers.values] 37 | # X-Frame-Options = "DENY" 38 | # X-XSS-Protection = "1; mode=block" 39 | # Content-Security-Policy = "frame-ancestors https://www.facebook.com" 40 | 41 | # For more information see:- https://www.netlify.com/docs/netlify-toml-reference/ 42 | -------------------------------------------------------------------------------- /pages/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | meta_description: | 5 | This sets the meta description in the head of the page. You can watch the 6 | output in the browser or in the generated file _site/about.html. 7 | permalink: /about 8 | section: about 9 | intro_paragraph: | 10 | This is an example of a standard Jekyll page. You can edit it with Netlify 11 | CMS, accessible at `/admin/index.html` or by editing `pages/about.md` in a text editor. 12 | --- 13 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 14 | 15 | ### A heading 16 | 17 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 18 | 19 | #### Another heading 20 | 21 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 22 | -------------------------------------------------------------------------------- /pages/blog.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: blog 3 | title: The Blog 4 | permalink: /blog 5 | section: blog 6 | intro_paragraph: > 7 | This is the Blog index page, listing each post with an 8 | automatically generated post excerpt. It's a normal Jekyll page but uses 9 | the `_layouts/blog.html` template to output the blog's posts after the page 10 | content. 11 | --- 12 | -------------------------------------------------------------------------------- /pages/contact.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: contact 3 | title: Contact 4 | permalink: /contact 5 | section: contact 6 | intro_paragraph: |- 7 | 8 | The contact form on this page uses 9 | [Netlify Forms](https://www.netlify.com/docs/form-handling/) to process 10 | submissions, and saves them in your Netlify account where you can optionally 11 | set up notifications. Each submission is passed through a spam filter and if 12 | flagged, will display a CAPTCHA challenge to the user. 13 | --- 14 | 15 | **Send us a message** 16 | -------------------------------------------------------------------------------- /pages/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Welcome 4 | permalink: / 5 | section: home 6 | intro_paragraph: > 7 | [Jekyll Netlify Boilerplate](https://github.com/danurbanowicz/jekyll-netlify-boilerplate) 8 | provides the basics to get a fast, static website deployed on Netlify. 9 | Features [Netlify CMS](https://www.netlifycms.org), responsive 10 | CSS Grid layout, sample 11 | pages and posts, and a continuous deployment workflow. 12 | --- 13 | --------------------------------------------------------------------------------