Watery: A New Theme
Tags: beginners, webdev, jekyll, blogging
Published: 2020-11-01 22:43:03

---
title: "Watery: A New Theme"
published: true
description: Building my first theme for others to use.
tags: beginners, webdev, jekyll, blogging
cover_image: https://i.postimg.cc/852bZw8G/water-bg.png
---

After my [last post](https://dev.to/brennan/jumping-into-jekyll-4o9h) 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](https://github.com/kognise/water.css) (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**](https://developers.google.com/web/tools/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**](https://github.com/brennanbrown/watery) / [**DEMO**](https://watery.netlify.app)

## Screenshot

![Watery Screen Shot](https://i.postimg.cc/C1XhZB3d/Watery-Screenshot.png)

### 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*](https://jekyllrb.com/docs/) ), 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](https://jekyllrb.com/docs/themes/#publishing-your-theme)
- Add easy and automatic buttons to ["Deploy to Neflify"](https://docs.netlify.com/site-deploys/create-deploys/#deploy-to-netlify-button), 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**](https://watercss.kognise.dev/) was created by [Kognise](https://github.com/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. ;)