After my last post on Jekyll, I decided I wanted to contribute something myself to the community! So, without further ado, here is my announcement of the Watery theme!
Watery is a minimalist, bare-bones theme for the popular JAMstack file-based CMS Jekyll that only uses the
<80kb Water.css framework (hence the name!), while still following the best practices possible for accessibility and search-engine optimization.
I created this because I wasn't able to find an up-to-date starter/skeleton theme for Jekyll. Even the default theme, Minima, uses the large Bootstrap framework.
What's the big deal, you might ask? As of November 1st, 2020, with >70 posts on Watery, the website scores a perfect 100/100 in Performance, Accessibility, Best Practices, and SEO on an audit with Google Lighthouse.
With so many tools available for web devs, it's easy to create something beautiful, but increasingly it becomes difficult to build something that's lean and efficient, losing sight of the computer science behind everything.
This project is aimed towards those curious about using Jekyll for the first time, and want to build from as close to scratch as possible. Alternatively, it still has all the features required for creating a hassle-free, informational website or blog in just a few clicks.
Despite Watery's minimalist nature, there are a few interesting features that have been added:
- A fully customizable and empty
_BLANK_config.ymlto make getting up-and-running easy.
- Having a
_pagescollection for easier organization.
- Auto-generated links to newly created pages in the navigation.
- An author bio at the end of each post. (Located in
- Full Rouge support for syntax highlighting. (Currently using
- Auto-generated RSS feed, sitemap, accessibility features, and search-engine optimization.
Once you have Jekyll up-and-running ( quick start guide ), there are only a few steps needed to make this theme your own:
- Fill out the
_BLANK_config.ymlconfiguration file and replace the current
- Remove the
_postsand start writing your own!
- Modify or remove the pages in
_pagesto however you see fit.
(Optional) Modify or remove this
README.mdwith information about your own project or blog.
(Optional) Modify the CSS files in the
assetsfolder to customize the site.
There are several features that I'm still planning to create and integrate, including:
- Create a Theme Gem
- Add easy and automatic buttons to "Deploy to Neflify", Heroku, etc.
- Add Travis continious integration checks
- Add additional documentation for creating custom collections and auto generated pages
While creating this theme, I came across a lot of helpful and hard-to-find resources. If you'd like to dive deeper into Jekyll, check them out:
- Jumping Into Jekyll: https://dev.to/brennan/jumping-into-jekyll-4o9h
- Jekyll Cheatsheet: https://devhints.io/jekyll
- Course on Jekyll: https://learn-the-web.algonquindesign.ca/topics/jekyll/
- Jekyll for Designers: http://simpleprimate.com/jekyll-for-designers/index.html
- Dynamic Copyright on Jekyll: https://michaelsoolee.com/jekyll-copyright/
- For breadcrumb trails: https://jekyllcodex.org/without-plugin/breadcrumbs/
- Display all items from ALL collections: https://stackoverflow.com/questions/31171041/listing-all-collections-in-jekyll
- For markdown previews: https://jaspervdj.be/lorem-markdownum/
- Case Study on webfont performance: https://www.keycdn.com/blog/web-font-performance
- An extensive .gitignore: https://miguelmota.com/bytes/extensive-gitignore/
- Most importantly, be mindful of: http://motherfuckingwebsite.com/
If you ever wanted to try Jekyll, but didn't know where to start, please feel free to fork my repository and start something new! Who knows where it will lead.
This is just a small start, I know. After this, I'm planning to create a more feature-rich, dynamic theme with a framework such as Pure.css or Milligram, and aim for a perfect Lighthouse score again. ;)