Loading...

How I made my blog

how-to blog project
Ram Patra Published on November 28, 2019
Image placeholder

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:

Feature Sendinblue Mailchimp Mailgun
Emails 300/day 10000/month 5000 for the first 3 months
Contacts Unlimited 2000 Not mentioned
Email templates Yes Yes No

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:

Feature Netlify Github Gitlab Render Zeit
Bandwidth 100GB/month Unlimited Unlimited 100GB/month 20GB/month
Custom Plugins Yes No Yes Yes Yes
Custom domains Yes Yes Yes Yes Yes
HTTPS Yes Yes Yes Yes Yes
Instant Git Integration Yes Yes Yes Yes Yes
Continuous Deployment Yes Yes Yes Yes Yes
Members 1 Depends on repository Unlimited Unlimited 3

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

Pros Cons
Very easy to setup. No coding required. The UI creates the config files for you and even commits/pushes them to your repo. Not open-source. You do not have full control.
Very easy to setup. No coding required. No support for tables in WYSIWYG editor.
Decent UI (better mobile support than Netlify’s CMS). Not completely mobile friendly.
Saves the post on its server if not able to push the changes to the source (github, gitlab, etc.). This way you don’t lose your changes accidentally.  
A nice image gallery. (But bear in mind that there is no pagination here so if there are too many images in a specific folder, it might lag.)  

Netlify’s CMS

Pros Cons
Open source. Not mobile-friendly. Editing on mobile sucks big time.
Easy to setup. Just a tiny HTML file and a config file and you’re done. No support for tables in the WYSIWYG editor.
Nice and simplistic UI. We need to define configs for each folder where we have our .md files. It does not scan all the .md files recursively.
  Doesn’t save your changes in any cache or server. It just pushes the changes to your source (github, gitlab, etc.) once you click the save button. So, there is a risk of losing your changes accidentally.
Decent image management system but needs pagination. Grammarly doesn’t work on the WYSIWYG editor for some reason.

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.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on November 28, 2019
Image placeholder

Keep reading

If you liked this article, you may like these as well

November 29, 2019 How to add search to your Jekyll website

Jekyll is a static website generator that takes your plain text files and converts them to a beautiful website/blog.

referral discount wise January 5, 2021 Referral link for Transferwise (now Wise)

If you want to try out Wise (formerly Transferwise), you can use my referral link to register: https://wise.com/invite/u/ramp11 and get one international transfer (up to £500 or equivalent) totally free with no transfer fees.

November 28, 2018 Hello World!

Hey there! This is the first post of my tiny little blog––my space in the perpetually growing internet––where I can ramble on about whatever I feel like. Well, there’s Twitter and Medium but I cannot ramble on there because of its 140 character limit or other terms and conditions :)