Zero to Hero on Creating a Modern Website.
This summer I went through a great experience of re-designing our company’s website. It wasn’t just any exercise of changing some fonts and colours but the whole process of redoing the website from scratch, very daunting I know but it was only possible because of resources provided by our friends at Centrality and of course a lot of guidance by my colleagues.
Anyway here is link to the the end result. Nice yeah ? So let’s see how to create something similar with least amount of friction.
Fonts and Colours
First thing first, when creating a website the first thing that you want to pinpoint is how it should look visually (choosing colour) and how well it reads to the users (choosing fonts). As these are going to stay consistent throughout you want to make sure it all compliments each other. Now this part itself could be very challenging and thats why I recommend using the links below to accelerate you through this part. This is what I personally used to add complimentary colour to our existing brand colour palette and play around with different fonts.
The most important thing about choosing brand colour is making sure that it conveys the right emotion (brain science stuff and blady bla) — can be found here and here.
JAMStack and SSGs
Now with the basics out of the way, let’s tech talk for a little bit. So you must be familiar with Wordpress, a platform used to build the majority of websites on the World Wide Web. Gone are the days where Wordpress was the only way of creating a website, as it required a running server, but now we can create serverless websites which as the name suggests, the server doesn’t need to be running and maintenance. One of latest trend is using JAMStack which stands for Javascript APIs Markup
JavaScript: the request/response is handled by JavaScript and therefore running entirely on the client.
APIs: all the server-side functions or database queries are abstracted into reusable APIs.
Markup: markup should be prebuilt at build time which is where SSG (static site generator) comes in.
Whats SSG for ? It takes your sites content applies that to templates and generates a fully structured site which can be delivered as static content. Famous ones are Gatsby, Hugo, Jekyll and 11ty.
So in a nutshell it’s an approach to building a website one that places emphasis only on shipping static assets.
That all sounds good but why should I still use any of these SSGs ?
- Reduced complexity of maintaining servers 🖥️ allow us to work with only CDN, which lets us skim all the servers, databases, load balancers, etc.
- Lower costs 💵 CDNs are cheap — or even free.On top of that, the lowered complexity requires less time and effort spent on Devops.
- Quicker shipping 🚀 Fewer moving parts makes it easier to ship quickly and with confidence.
- Devs are blissed 😃 simplified stack means a single developer is able to manage the project with much ease.
More advantages:
- Better security no worry about security issues and getting hacked since there are no servers involved.
- Better performance since all of its static assets that sits on CDN, literally takes a few milliseconds to reach.
- Better scalability can serve millions of users without thinking about scalability.
- Great SEO most of the SSGs come with great SEO out of the box and its a breeze.
Wowzers !! Thats amazing right. My SSG choice is Gatsby to achieve all of this and their detailed documentation makes it so much easier to get started.
Deploying your Site
Once you have your website designed and ready to go you might be wondering how to make it go live and also the bit about not needing servers but still hosting it somewhere ? Yes lets understand this too.
Netlify
There are chances you may have heard about them, if not then all you need to know is that folks working at Netlify has come up with great solutions to host the JAMStack based application without ever needing to turn any of the knobs involved in the process of setting up your deployment pipelines. It all works like magic once you have your site stored on Github and connected to your Netlify account.
Here’s an in-depth article on how to setup the deployment.
Although Netlify, works really great I’ve used another service Vercel to setup my automated build and deployment process. The simple reason being I want to separate my live(production) and testing(staging) processes. So if I’m working on a new test feature, I would usually push it on Vercel first to test it and share with my team and once it has gotten green flag it gets pushed on the Netlify.
Additional Resources
Thanks if you have made so far reading my article I hope you have learned something today about creating a better website, and I’m going to leave you with some more tips that may help.
Cookies /compliance for website — https://www.cookiehub.com/
built with Gatsby examples — https://www.gatsbyjs.com/showcase/
Web Design inspirations — https://dribbble.com/shots/popular/web-design
Deploy Gatsby on Netlify — https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify/
SEO Analyzer — https://neilpatel.com/seo-analyzer/
This has definitely been a great experience for me to go from beginning of the process to the end and also equipped me with a great confidence in building and shipping website in a more modern way. My favourite part of all has been the journey and not the outcome.
…there ain’t no journey what don’t change you some― David Mitchell
Author — Akshat Jain
