I've moved my blog to wordpress and ported this theme to Wordpress - https://github.com/abhn/Elementary-Wordpress.
Due to a crunch of time, updates here may or may not happen. Please check the Wordpress theme for updates.
Relevant blog article: Life Goes Full Circle – Blog Back To WordPress
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
Note: Dark mode requires JavaScript
Note: Scroll progress requires JavaScript
https://elementary-jekyll.github.io/
- Lightweight, <10KB CSS, <3KB (optional) JavaScript + 15KB Open Sans font file + your content
- Highly accessible with semantic HTML
- Structured data (schema.org) pre-added for blog posts
- Dark mode (requires JavaScript for toggling class and saving user preference in cookies)
- Reading progress slider on top (requires JavaScript)
- JavaScript is optional (turn it off in
_config.yml) - No request made to any third party
- Any much more...
- 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 protected]: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).
theme: elementary
- Add the following to your
Gemfile
source 'https://rubygems.org'
gem 'elementary', path: 'elementary'
- Run
bundle installcommand in your project directory and make sure there are no errors - Add
./elementarytoexcludesection of_config.ymlso that the theme's files aren't compiled into the final site by adding the following to your_config.yml(ifexcludekey 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_sitedirectory.
- 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. - In
_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!