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:
- UI built on Bootstrap 4
- Responsive UI (device agnostic)
- Uses Jekyll to generate the pages
- fuse.js for search
- Sendinblue for email newsletter
- An Ad Blocker detector
- Hosted on Netlify
- 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.
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:
|Emails||300/day||10000/month||5000 for the first 3 months|
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:
|Instant Git Integration||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.
|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.)|
|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.