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.

CODE / DEMO

Screenshot

Features

Despite Watery's minimalist nature, there are a few interesting features that have been added:

• A fully customizable and empty _BLANK_config.yml to make getting up-and-running easy.
• Having a _pages collection for easier organization.
• Auto-generated links to newly created pages in the navigation.
• An author bio at the end of each post. (Located in _inclues/author.html)
• Full Rouge support for syntax highlighting. (Currently using base16.solarized.light)
• Auto-generated RSS feed, sitemap, accessibility features, and search-engine optimization.

Getting Started

Once you have Jekyll up-and-running ( quick start guide ), there are only a few steps needed to make this theme your own:

1. Fill out the _BLANK_config.yml configuration file and replace the current _config.yml
2. Remove the example_posts folder in _posts and start writing your own!
3. Modify or remove the pages in _pages to however you see fit.
4. (Optional) Modify or remove this README.md with information about your own project or blog.
5. (Optional) Modify the CSS files in the assets folder to customize the site.

Roadmap

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

Resources

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

Other Resources

• 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/

Credit

Water.css was created by Kognise.

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. ;)