About

About

Welcome to my personal blog. I take this opportunity and space to thank all the open source projects that help me build this JAMStack website.

Ghost

Ghost: The #1 open source headless Node.js CMS
The world’s most popular modern open source publishing platform. A headless Node.js CMS used by Apple, Sky News, Tinder and thousands more. MIT licensed, with 30k+ stars on Github.

This blog is made with Ghost and is hosted at a secret location — some url where I do not want to receive traffic. The Ghost engine is running at Amazon Lightsail in the bare minimum plan.

Since I use a bare minimum plan, ghost and mysql cannot run well on that small machine. So, when configuring ghost, use a sqlite3 database.

Eleventy

Eleventy Home
Eleventy is a simpler static site generator.

Eleventy is a static site generator. This blog is a static site where the content of the blog is fetched from the above Ghost droplet running at a secret location.

Eleventy-ghost-starter

TryGhost/eleventy-starter-ghost
A starter template to build websites with Ghost & Eleventy - TryGhost/eleventy-starter-ghost

I used this starter kit to bootstrap all of the ghost related logic to fetch content and build different pages and posts.

London

TryGhost/London
A free, open source theme for Ghost. Contribute to TryGhost/London development by creating an account on GitHub.

The theme of this blog is a fork of this Ghost's theme - London. I forked some parts of the London theme, fit it to the eleventy-ghost-starter and tweaked a few other things.

Ghost-storage-cloudinary

eexit/ghost-storage-cloudinary
:rocket: A fully featured and deeply tested Cloudinary Ghost storage adapter - eexit/ghost-storage-cloudinary

Cloudinary is a CDN offers a free tier which is good enough for a personal blog to get better performance. This project was straight forward to add to my hosted Ghost droplet and configure it to use my free Cloudinary account.

Eleventy-plugin-lazyimages

liamfiddler/eleventy-plugin-lazyimages
An 11ty plugin that adds lazy loading to your images - liamfiddler/eleventy-plugin-lazyimages

It parses the HTML after eleventy build and transforms all <img> tags src to data-src so it can be lazy loaded for performance. It takes care of progressively enhancing by detecting native lazy loading and uses lazysizes for older browsers.

I forked this project because of some customizations of how srcset was handled. Cloudinary provides a neat way to get different sizes of the same image by a parameter in the URL. So, before I send the HTML to prepare lazyloading of images, I parse it and transform src to srcset by computing different image sizes by manipulating the Cloudinary URL.

Cheerio

cheeriojs/cheerio
Fast, flexible, and lean implementation of core jQuery designed specifically for the server. - cheeriojs/cheerio

Cheerio is the library I use to parse HTML and transform image tags to responsive images. It provides a jQuery like interface to navigate HTML parse tree.

html-minifier

kangax/html-minifier
Javascript-based HTML compressor/minifier (with Node.js support) - kangax/html-minifier

clean-css

jakubpawlowicz/clean-css
Fast and efficient CSS optimizer for node.js and the Web - jakubpawlowicz/clean-css

Many many thanks to all these projects and their dependencies.