Featherweight was inspired by pages from the 1kb club, a list of web pages weighing less than 1kb. In order to provide a feature-complete static blog experience, cosmetic features were added, but the minimalist experience can still achieve < 1kb weight.
You can add or update content on the homepage by editing the index.md markdown file. Your contact details can be updated by editing the _includes_/contact.md file, and the site name, site author, homepage description metadata, website language, etc., can be updated using _config.yml.
There are also a number of compression options to enable/disable cosmetic details. Enabling css adds CSS styling (inspired by 58 bytes of CSS to look great nearly everywhere - customise the website CSS by editing _includes/main.css. Page footer and home-link adds social media links to post footer, and navigation from blog posts to the homepage. load-time prints the page load time to the homepage and blog posts, while page-size reports the total HTML page size; showing off the effectiveness of the theme!
---
layout: post
title: Developing featherweight
description: A dev blog post, detailing how we developed Featherweight to deliver an optimised static blog experience.
---
Lorem ipsum..
Blog posts are compiled from .md files in the /_posts directory. The naming convention for posts is YYYY-MM-DD-name-of-the-blog.md. The metadata inside the --- tags details that this is a blog post, with a certain title and description. Detailing the title here automatically adds it to the page, whilst the description is used as part of the page metadata.
Webpages are often split into numerous sub-files, such as HTML, CSS, JS and images, all of which need to be served and compiled into the complete page. Compressing this content (using lossless or lossy algorithms) reduces the bandwidth required to download the files.
Browser support for different compression techniques means we offer two compression options, as well as fallback uncompressed files for older browsers.
gzip compression (using zopfli) produces .gz compressed files. GitHub Pages automatically applies this compression, however by pre-processing we can apply our own, more aggressive, compressions, as well as ensure non-GH users have access to this compression.
brotli compression is a newer and more efficient algorithm developed by Google. It has good support in modern browser releases, but can’t be utilised by older browsers, requiring us to offer the more-supported .gz compression as an alternative.
Users can access an RSS feed of your blog from https://yourgithubusername.github.io/feed. This can be subscribed to using an RSS reader, or used to display a list of your most recent blog posts in your GitHub profile README.
If you’re hosting your site via GitHub, you can show your homepage within the README section of the repository. Your homepage is written using markdown, meaning you can copy/paste the content and have it render!
_includes_/contact.md content to replace the {% markdown _pages/contact.md %} liquid tag.gautamkrishnar/blog-post-workflow GitHub Action to read your own site’s RSS feed and generate a blog list within your README.You can use featherweight as a remote theme - recieving the latest updates automatically! Follow GitHub’s guide for using and customising remote themes. In short, override theme files by creating replacements in your own repository mirroring the original file location.
| Config | Update site URL and othe default options using _config.yml. |
| Homepage | Customise your homepage by editing the index.md file. |
| Social media | Update your contact links for your homepage and post footer (optional) by editing _includes_/contact.md
|
| RSS | The RSS feed can be found at https://yourgithubusername.github.io/feed. |
| Sitemap | The sitemap can be found at https://yourgithubusername.github.io/sitemap. |
| Quickstart | Test your website locally by following the Jekyll quickstart guide. |
| gzip compression | Files are compressed using Zopfli compression. GitHub GZip’s files automatically before serving, but we can use more aggressive pre-compression to achieve better compression, and avoid server overhead to compress on-the-fly. Support seems to vary between browsers, and some will fallback to .html. |
| Brotli compression | We also compress files using Google’s Brotli algorithm. We serve .gz and .html as fallback, although .br has good support. |
| Page reflow protection | To prevent page-reflow whilst lazy-loading images, we set image height and width using Cutwell/jekyll-anti-image-reflow gem plugin. Note it will not override existing styling to loading, width or height attributes. |