This is my personal blog's Jekyll template that I've been optimizing for performance, accessibility, usability, readability and simplicity in general.
I personally do not approve of personal blogs bloated with hundreds of kilobytes of trackers and analytics code, and hence, this is an attempt at creating something that I'd be comfortable with using on my website.
Images from my website (clockwise from top left)
- Perfect 100 Google Page Speed score on both mobile and desktop
- Kindle's experimental browser running the theme
- Median load time (From Cloudflare) is less than a second
- 100% cached by Cloudflare CDN
- Highly accessible with semantic HTML
- Structured data (schema.org) pre-added for blog posts
- No request made to any third party
- Any much more...
Installation (Prerequisite: A working Jekyll site)
- If you don't have a Jekyll site, read up how to create one here: https://jekyllrb.com/docs/
- Add Elementary repository as a submodule to your Jekyll blog by running the following command.
git submodule add email@example.com:abhn/Elementary.git elementary
- Tell Jekyll it has to use Elementary as theme by adding the following to your
_config.yml(in case you're wondering where, just add it to the bottom on a new line).
- Add the following to your
source 'https://rubygems.org' gem 'elementary', path: 'elementary'
bundle installcommand in your project directory and make sure there are no errors
_config.ymlso that the theme's files aren't compiled into the final site by adding the following to your
excludekey exists, just add a new item to it)
exclude: - ./elementary
- Run command
bundle exec jekyll serveto run local server (open browser to http://localhost:4000 to view the site).
- Run command
bundle exec jekyll buildto output a production build to the
- You're free to make any edits to the theme's files in the submodule. You can also
git pull origin masterfrom the submodule directory to update the theme in case I push updates, but you don't have to.
_config.yml, you can add new collections (groups of new content, so blog posts, news, pictures could all be their own collections with separate listing on index page)
- Eric S Raymond (http://www.catb.org/~esr/hacker-emblem/glider.png) for the favicon
GNU GENERAL PUBLIC LICENSE Version 3
When I started with the original project around 2 years ago, my goal was to get rid of all that unnecessary code and progressively add only the most essential bits.
I feel like the theme is in good enough shape right now that I can call it a v1.0
I recently read in a blog post that a personal blog has to be fast and lean. There's no reason for a personal blog to be bloated and take 2 seconds to load. That was when I reviewed my own blog code and started analyzing. I discovered that I was loading jQuery just for another jQuery plugin which just helped the images and videos to be mobile responsive. That was some 40KB of overhead, 2 additional requests which could have been prevented with just a
max-width: 100% attribute to the culprit elements. Similarly, there was Disqus which loaded tonnes of scripts along with its own Google Analytics script.
I went on stripping weight from the code, and was left with something what you see here. Few extra CSS tweaks and Tadaa!