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.
Screenshot
Features
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
_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:
- Fill out the
_BLANK_config.ymlconfiguration file and replace the current_config.yml - Remove the
example_postsfolder in_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.
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. ;)
Top comments (3)
How can I use this with GitHub pages? I'd love for something a bit nicer than what I'm using now for this: sample-programs.therenegadecoder.com/
Hey Jeremy, that's a great question. This is a really large (and awesome!) project. My answer is a little complicated:
I downloaded it and played with it a little, and noticed that if you replace your SCSS file in the head with the water.css framework, this is what the site looks like: i.postimg.cc/131Qt91H/Screen-Shot-...
Obviously there'd be a lot of work that would need to be done, but it does essentially reset a lot. There's also a lot of other frameworks you could use: github.com/troxler/awesome-css-fra...
However, this is kind of hacky, since it's overriding everything that's already implemented with the Cayman theme you're using.
I'd usually just recommend changing
theme: jekyll-theme-caymanin your _config.yml file to another theme you like more, ornullif you wanted to build something from scratch. However, it seems that the site's architecture relies on the Cayman theme, and removing/changing it would cause a lot of manual work.True! There is an existing structure there already. That said, I designed it all, and I have very little experience with Jekyll and web dev in general. I wouldn't be opposed to starting from scratch. Looks like I might need to get things setup locally, so I can preview everything tho...