How I made my blog

I made this blog using JAMStack. J stands for Javascript, A for APIs, and M for Markups. So, in short, a website built using HTML, CSS, and Javascript only and maybe accessing some APIs over HTTP can be said to be built with JAMStack and are generally called Static Websites.

Now, the HTML of such a website can either be written by hand or be generated automatically by static site generators. This is where Jekyll comes in. It is one of the famous and widely used static site generators. There is no application server needed for such websites, only a web server, capable of serving static files, would suffice. So, CMS like WordPress, Drupal, Joomla are not built with JAMStack.

Static websites are gaining popularity nowadays, especially for blogs and documentation sites, because of their simplicity to develop and maintain as well as for pecuniary reasons.

Before diving into the nitty-gritty of how I made this website, I would like to highlight some of its important characteristics:

1. UI built on Bootstrap 4
2. Responsive UI (device agnostic)
3. Uses Jekyll to generate the pages
4. fuse.js for search
5. Sendinblue for email newsletter
6. An Ad Blocker detector
7. Hosted on Netlify
8. CMS by forestry.io

Having listed above some of the main features of this website, let’s now dive into each of them in more detail, also explaining my reasoning behind choosing it.

Famous UI frameworks in the market currently are Bootstrap, Semantic UI, Foundation, etc. Out of the above, the developer community of Bootstrap is the largest, backed by the guys at Twitter, has various elements and components ready to use, and last but not the least, has numerous customized themes (both free and paid). If you choose to use a UI framework, you need to customise it so that it can be used with Jekyll (or any static site generator). Alternatively, you can directly use the theme specifically made for the static site generator you choose. For example, Jekyll has an enormous collection of free themes that can help you get started right away.

There are numerous static page generators on the market currently, the famous one being Jekyll, Next.js, Hugo, Gatsby. Now, the reason why I chose Jekyll is because I was already familiar with it (no learning curve for me), you don’t need to be a front developer or know JavaScript, Liquid—the templating engine used in Jekyll—is simply easy to learn, and, of course, the largest developer community among all as it’s the oldest and backed by GitHub. I liked Next.js and Eleventy too, tbh, and if I had been a JavaScript expert or enthusiast I would have gone with that.

Let’s talk about search now. This is interesting because in static websites there are no backend servers to take your request and query the database and fetch the results for you. It is just plain HTML, CSS, and JavaScript. So, how do we implement a search on such websites? Well, there are a couple of options here. Some very easy to implement and some would require a little bit of coding. The easiest ways are Google Custom search or Algolia. These services provide you with a code snippet that you can paste on your HTML page and you’re done. Although Algolia looks better than Google Custom Search, it has some limitations for the free plan such as only 10k queries per month, etc. And if you want to write your own search feature then you can either do a simple text match or make it a bit more sophisticated by using some popular js libraries like fuse.js, lunr.js, fuzzysearch.js, etc. There is another expounded blog post explaining the nitty-gritty of how I used fuse.js to implement search on this website. The reason I went with custom code and not Algolia or Google Custom search is that I wanted a bespoke design for the search bar and search results. Also, I didn’t want any limitations nor branding at the bottom of the search results. I wanted to have full control over the feature. Last but not least, just for the fun of it. Now, as you read above, there are a lot of libraries to choose from. You can compare their popularity, downloads, issues, etc. on npmtrends. I vacillated between fuse.js and lunr.js libraries but finally chose fuse.js because its usage was straight forward, had to-the-point documentation, and most importantly, they have an edit-distance algorithm which means you don’t have to be pedantic about the spellings as the library will take care of it if there is a typo.

Now comes newsletters. The two most common ways of keeping your readers abreast of your new blog posts are e-newsletters and feed readers, subscribed to your RSS feed. The good news is that this site has both. For the former, some work is needed but the latter is easy. I compared quite a few email marketing products like Mailchimp, Mailgun, Sendinblue, etc. and based on the comparison I first chose Mailgun as they had a decent UI, good documentation, and most importantly a great freemium plan which was second to none. However, when I tried to use their REST API I faced a lot of issues because of CORS. They didn’t take care of the pre-flight request. I logged a support ticket but their response was very slow so I went with Sendinblue as their freemium plan was the second best. And, most importantly, their REST API worked fine as described in their documentation. You basically have to make a POST call to an API endpoint. They have email templates too, not present in Mailgun, which you can use to send emails to an email list.

Let’s see what we get for free from some of the famous email marketing products:

Ad Blocker detection is a nice feature to have, given that around 47% of the users now use ad blockers according to GlobalWebIndex. Ads are an easy way to earn something from your free content. Yes, there are some other ways but this may be one of the easiest and maybe more profitable than the rest. Readers should also understand that the content may be free but maintaining such a website isn’t. Therefore, they should support the content creator by disabling the adblocker. Having said that, the blogger shouldn’t bombard the readers with lots of ads that may hamper the user experience nor should they show poor quality ads. I have written a tiny blog post on how to effectively detect whether a user is blocking ads. You can also try blocking ads on this website and see how this site handles it.

I chose Netlify to host my website as I wanted to install as many Jekyll plugins as I like without any restrictions. Github Pages allows you to host static websites too but they only allow a specific set of plugins. Having said that, the issue with Netlify (free account) for me is the 300GB bandwidth limit per month. Gitlab would have been a good option as they don’t have any plugin nor bandwidth restrictions but their Jekyll is quite antiquated. So, I decided to go with Netlify for now. If Gitlab updates its Jekyll version then I can think of moving to Gitlab. There are also render.com and zeit.co but they have only 100GB/month and 20GB/month respectively in their free plan which is very less compared to Netlify. Having said that, I would love to know other alternatives that give a better bandwidth in their free plan in the comments section below.

Below is what each of them offer in their free plan:

In static websites, you write your posts in markdown files, which are similar to normal text files, and then push them to your repo. That’s it. You can add files and images via the Github UI or any other UI your VCS provides. You can also do it in an IDE and commit the files to your repository. However, using a CMS for your static website allows you to manage your website on the go. You just need a browser, and of course, an internet connection.

I have tried the two famous CMS for my Jekyll website, i.e., Forestry.io and Netlify’s CMS and below is a small comparison between them. I personally chose Forestry.io as their UI has better cross-device support and their auto-save feature has literally saved me from rewriting entire blog posts.

Forestry.io

Netlify’s CMS

So, this is my experience developing my blog and I hope sharing this would help you while you code your own JAMStack website. Please, do not hesitate to ask anything related to this post in the comment section below. I would be more than happy to answer them.