Like any dream, our dream at Blue Sky started quite humbly– with a website. A plain, simple, functional website. At that point in time, we were content and happy with the first version of our website.
But like everything else, we grew and became more mature on the way. And with that came changes in our mindset, goals, and organisation, it was inevitable for the website to revise as well. With these newfound learnings, we created many versions of our websites over a short duration of our existence. Though each version seemed perfect for that certain point in time, during the course of our journey we also recognized certain shortcomings in them and accordingly we innovated building on top of each version.
Maybe, making a perfect website is like making a castle in the air. Maybe such a thing does not exist. Maybe it does. What we realised is that it was never about the final product but the process itself. Like a sleeping snake, the process slowly uncoils and reveals itself to us, bringing with it things that were missed before. Every new challenge we faced while building our website gifted us with some wisdom when we solved it.
And we thought it might be a good idea to share that wisdom with the world at large so that anyone reading this does not have to reinvent the wheel.
The Biggest Lesson
A perfect website gives a convenient no-code experience to the editors & writers while giving full flexibility to the developers.
What we learned during our journey was that a good website means only one thing: intuitive and easy to use, both for tech and non-tech users.
The same principle applies to the people building the website. As there are a lot of people and skills involved in the construction of a website, from coding to design, illustrations to blogs, the tools used to build it should be easily usable by both the tech and non-tech teams.
Therefore, in the course of building our website, our biggest lesson has been that it needs to be more non-tech friendly than tech-friendly.
For instance, in the first version of our website, we used markups to render. But it complicated things for content writers to edit the content inside a markup environment. So, we switched to Webflow to make the lives of content writers easy but that took away the flexibility.
Our saviour became a foe for our designers as it was too complicated for a designer to make a no-code website & made it harder to iterate over designs.
Webflow blessed us with the knowledge that “No code” is a lie.
Post this debacle; we started looking for better alternatives that could allow developers, designers and content writers to work independently and optimise their outputs. Then we came across something magical 🪄 called JAMStack, which essentially decouples the content & UI design of the website
Tools: The Blue Sky Web Stack
It is almost magical when you stumble across things that work perfectly for you. However, it is often written off as luck or quoted as something that happened “by chance”. The truth can not be farther away from this. Finding the correct tools, the perfect stack— takes time, trials, errors, failures and patience. After failing innumerable times, you succeed only once, and then the entire process makes complete sense. We wanted to share these amazing tools with the world to make everyone’s life easier.
JAMstack
Ten years ago, hosting and rendering a website online would have required substantial computational power, large servers, colossal costs and some delays to give a response back to the client.
In monolithic architecture, the client first requested the webserver for the website, and then it requested data from the app server, database and other CMS. Then the webserver rendered and created the page for the client. This vast level of the processes made the old approach time and cost consuming. This called for the search for an alternative that would save both time and cost. This brought us to JAMStack (JavaScript, APIs and Markup).
JAMStack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity. - by jamstack.org
JAMStack allowed us to drop the server and use the CDNs to serve statically generated websites. It works on a simple principle where we can use Git workflows and modern build tools/cms to pre-render content, serve them on CDN and make it dynamic through APIs and serverless functions.
💡 In the current world where Javascript is exploding, we can go old school by using the naive approach of a static website.
📢 If you are interested in starting to work on JAMStack, go and check out JAMStack's website - https://jamstack.org/. You will get many resources about how it works and what all stacks you can combine.
Powerhouse - GatsbyJS and GraphQL
JAMStack ecosystem is really vast, and our next challenging step was to decide on which framework we should build our website. The two options that came to our mind were Gatsby and NextJS.
Both Gatsby and NextJS are extremely powerful and flexible frameworks, but the process of developing a website is much faster and easier with Gatsby as compared to Next because of its vast Gatsby plugin marketplace.
Also, Next works on an architecture called SSR (Server Side Rendering), which limits its accessibility for SEO. On the other hand, Gatsby works on Google's PRPL (Push, Render, Pre-Cache and Lazy Load) architecture which pre-builds each HTML file and makes it fully SEO friendly. You can read more about Gatsby and Next comparisons here.
Combining the best of Prismic and Ghost
The next step was to figure out where to store the data of our website and blog, a.k.a. searching for the best content management system ("CMS”) that fits our needs.
CMS can be also classified into two different types -
-
monolithic/traditional
-
headless
In monolithic CMS, the frontend and backend are tightly coupled, and data can only be accessible for that particular frontend, making it difficult to access data for any external applications.
On the other hand, headless CMS doesn’t have a frontend, but only a backend, enabling anyone to easily access and edit the data, requiring zero coding knowledge. It allows us to use the data in any application because it is not bound to any single application.
Since the backend is not tied to any UI, using APIs, data can be pulled into any kind of frontend application. Therefore, we can use the same data over different applications of Blue Sky, from our website, SpaceTime or Dev Portal.
Keeping all of the above in mind, we decided to go with Prismic, which we use to store all our content. It has a great user interface that allows us to create the schema for our website with the help of drag-drop functionality. For our blogs, we chose Ghost, which helps the content team to focus on writing the blog rather than fixing the markups for our blog website.
And finally, with the help of GraphQL, we can fetch data from Prismic and Ghost, and use them on our Gatsby driven frontend.
Tailwind - Utility first framework
The next step was to figure out the CSS framework we should use for our design system. We needed a framework that allowed us to create our design system by writing minimal CSS and high customisation. We had previously used bootstrap and materialise, but their UI-kit-first approach was too old for modern designs. The designs looked similar because of their base theme. Alternatively, we needed to write a lot of CSS/SCSS to make it adaptable for our design system.
Then, we started experimenting with Tailwind CSS, and the rest, as we put it, is history. We are in love with it, mainly because we only need to customise the entire design system on a JSON and simply write inline classes for our react code (That's it— just inline classes 🤩 ).
The final piece of the puzzle, Netlify 🧩
Netlify is a CI/CD and cloud computing platform that allows you to deploy your frontend app with just a few clicks. It has been a boon for the tech team at Blue Sky because it just simplifies the native deployment process in a simple and easy way. We just need to connect our repo to the Netlify platform; the rest— from building and hosting your app— is all managed by this flexible platform.
The best part about Netlify is that it provides us with a deploy preview for the pull request we make, which allows us to review the preview before merging our code to
master.
Impact of our web stack
So, here it is. Our wisdom. Our entire learnings in this quest to build the perfect website.
JAMStack has been a boon for us and helped us solve a lot of critical issues. Gatsby is very powerful in terms of performance and SEO. If you look at our Lighthouse score, there has been a significant jump after we migrated to JAMStack.
Conclusion
📢 Quick Tip - If you are new to React based development, you will face a steep learning curve, but it is very easy and convenient for React developers. The majority of the time you will take in is understanding GraphQL and Gatsby node APIs.
You might have learned something from it, or maybe, you might have a thing or two to teach us. Learning is a never-ending process, so please reach out and let us know if you know of better tools, We'd love to explore!
Or better, if this is something that excites you and you would like to work with people trying to tackle the impossible problem of climate change, we are looking for DevOps Engineer, Full Stack Developer, Frontend Developer and Web Developer.
Also, speaking about websites, did we already mention ours? Check it out! Let us know what you love or hate about it! We'd love to hear your thoughts.
P.S. BSA ❤️ JAMStack
