Apr 30, 2021

An Exhaustive Guide for your Website's Tech Stack

Great! So the planets have finally aligned, and you have decided to build your website. Not bad! But now you are in a dilemma as to how you should make one? No worries! Been there, solved that!

Before you Begin!

It would help if you had a rough idea of the expectations and features that your website will deliver upon. Without the key requirements in place, you might likely need to change the technologies in between development, and that sucks?.

So first, get your head straight on at least the following aspects:

Purpose: Perhaps the most important criteria. A tech stack of a blogging website differs greatly from - Oh! Here's me! Site. Although you could materialize any idea in the form of a website, here, I'll mostly discuss the two most common - a Portfolio and a blogging site. Having said that, most of the concepts discussed here do overlap across various types of websites.
Budget: Yeah! Sometimes it does lighten your pockets?. The considerable sum goes to hosting. But there are some workarounds. You can use the free credits offered by cloud services such as GCP, AWS, etc. And you know! Create more accounts! But of course, I don't do that. Or do I??
Time: So, how much time⌚ can you invest in this project? The more, the merrier?. Do note, however, that your initial goal should always be to put your work out as soon as possible in workable form(Please don't just print Hello World!).
Audience: You have to know your audience. A Code related blog is expected to be snappier than a travel blog, coz you know! We like things fast. In comparison, a blog for product reviews is better off having animations and other shenanigans.

Below, I have tried to encompass the various scenarios that I encountered, and you might too when deciding your website's technology stack. For ease of understanding, I have divided everything into pretty headings and categories. ?

The Holy Duo

I am sure most of you are aware of this, but to reiterate. The technology stack for any web project involves two main components:

Frontend or Client Side: For building the part that your Audience and customers see and interact with. First, there is HTML without which no website can exist. Then, CSS makes everything look prettier and cooler—javaScript servers as a scripting language for creating interactiveness.
Backend or Server Side: This involves all the apps that the frontend connects to serve the users. For a blogging website, it would be an app serving the blog content to frontend. The backend domain has numerous options, a lot more than the frontend. But of course, it all depends on your requirements.

Your Technical Background

...in the context of Frontend and Backend Development.

Go for the first method if you don't have much experience or are unwilling to gain any. Welcome the second method if you already have considerable apprehension or are willing to learn. Pardon my bias!?

The first method - Go Easy way!

If you don't have a technical background, you could go for the numerous "clicky-dropy" services, aka website Builders. To name a few :

Visit this link for a more comprehensive review about these >>

This will allow you to quickly set up your website/blog without getting your hands dirty. These services also have their guides to utilize their products which you can easily refer to. These services also provide an option to deploy your website to the internet - of course, after emptying your pockets a bit.

Second method - Wanna be Maverick.

If you have programming knowledge in some web technologies and have more time to spare, you can build your website from the ground up. This allows for more customization and flexibility. This article will mostly focus on this approach.

Building the Frontend

As discussed above, we have HTML, CSS, and JS at the lowest level of the pyramid. Each of them is critical for the proper functioning of our website.

Styling

All the styles are ultimately translated to CSS (Cascading Styling Sheets). Although CSS is itself popular with small projects, it quickly becomes cumbersome to maintain for large projects. There are a couple of good alternatives such as:

These alternatives allow cool features such as nesting, mixins, variables, etc., which improves maintainability and allows faster prototyping.

JavaScript Framework

Not Required if creating a static website. You are better off with Just HTML and any CSS framework.

If you need interactiveness in your website, you need to add JavaScript to your code. You can use plain JavaScript. However, it's better to use a framework as it provides several benefits:

The lesser upfront effort required to setup your project
Scalability in terms of your project size
Better inbuilt security, for example, against XSS attacks
Support for numerous opensource libraries

Now which one to use? That's perhaps the toughest choice to make. There are many frameworks! Even frameworks are built upon frameworks. But the major ones are:

JQuery is pretty much a thing of the past. So you can ignore that. I went ahead with VueJS. It has a lower learning curve and comparable performance, if not greater, in various aspects. It's pretty much like writing HTML, CSS, and JavaScript on the same page.

ℹ️

Although I initially started with VueJS, I later switched on to NuxtJS which is another framework, built upon VueJS! NuxtJS allows for server side rendering which helps in Search Engine Optimization(SEO) which is critical for a blog! It also has host of other features. Visit this link to know about NuxtJS.

ReactJS and Angular are also really famous frameworks. You can expect a higher chance of finding solutions compared to lesser-known frameworks. Also, they have better support for open-source libraries.

Building the Backend

Due to loose coupling and the advent of microservice architecture, you can make your backend using any technology as long as it's communicating with your frontend using Cross-platform communication protocols such as REST or GraphQL.

You don't need a backend for a static website. So if your goal is just have a portfolio website, that could be done with statically served html and css files.

If you are trying to create a blog, you'll need to store your posts and media items such as images, videos, etc., somewhere. You have a couple of options there:

You could save the blog content in the form of Markdown files along with the blog codebase. Albeit you will have to manually store your media items in public storage like Amazon S3, google buckets, drives, etc.
Have a dedicated CMS(Content Management System). CMS allows you to create posts as well as storage media. I won't suggest building one on your own from scratch. It would be just reinventing the wheel. You can use the publicly available ones. All you would need to do is fetch content from them using REST or GraphQL.

I use Ghost. It has a great UI and is open source. Having said that, I don't directly use the service provided them. Instead, I have hosted my headless ghost instance on a subdomain. There are other options as well:

💡

Do note that I am talking about the headless versions of the platforms and not using the native frontend/website builders provided by them.

Auxillary Dependencies

These are the supporting roles in your "movie". They are not directly required but are good to have, and they will make your life easier.

Version Control

I use GitHub. There are others as well, like Bitbucket, Gitlab, etc. I suggest using GitHub for no particular reasons? Except that it's free and allows you to have a free CI/CD setup from your repository itself. Version control allows you to track your changes and, if required, allow you to revert to an older state if there are bugs in your current version.

A Cloud Service

It's no longer a good option to host your website on that old spare home computer of yours. You are better off hosting in a public cloud offering. There are several options available - GCP, AWS, Azure, Alicloud, etc.

For our small project, it doesn't matter which one you choose. I use Google Cloud Platform, mostly because I have more experience with it (nice work, GCP advertising, and promotions team!??). It costs me around $50-55 at present for the month-long hosting. You can reduce the cost substantially with some changes and sacrificing redundancy. D0 read my other article where I will deploy a barebones Nuxt App on Google Kubernetes Platform.

CI/CD

Continuous Integration and Continuous Deployment allow you to focus only on your application and not the productionising steps.

Believe me! It's a pain to have your application work flawlessly on your local machine, only for it to break when it has been deployed to the real world. I am sure most of you have already gone through this.

Hence I decided to setup a CI/CD workflow for this website as well. Here's what I used:

Docker for .containerization
Google Kubernetes Engine - container orchestration and management
GitHub actions - integrating my source code with GKE.

Domain and SSL Certificate

You surely don't want your visitors to access your website using your server's IP Address like http://132.23.32.34. It would help if you had a catchy domain name like limosyn.com in the case of this website. You can have any name you want, provided it hasn't been already taken (My dream is to get google.com ?). There are several domain registrars available. Some of the most popular ones are:

For making your site trustworthy, you need an SSL certificate. There are several options available out there - both free and paid.

Google Managed Certificates - Paid
Let's Encrypt - Free
All the above Domain services - Paid

Summing Up

The text on this page should be enough to get you started. But of course, you might need to do a bit more research to decide your final tech stack. Adopt loose coupling across your stack by incorporating OOP concepts and microservice architecture in your codebase and using cross-platform communication protocols to connect your various services.

In the next article, let's create a starter project for your website.

Until then! Adios!!