)
As this is my first article here on the newest product blog in the area, let me introduce myself a little. My name is Rafael Sales, and I have a degree in graphic design from Unicuritiba and a postgraduate degree in user-centric design from UP. I currently work together with Sandro at Storyblok as a UX designer, which is where we met.
Now that you know a little more about me, let's understand how this works.
How it all began
The project started when Sandro asked if I knew any designer and developer who could help him develop a blog for The ProductLand, but one of the requirements was that he develop it using Storyblok as a CMS to feed this blog, as it would be a way to test and analyze more of the use of the tool that he has currently helped to develop in recent years.
In addition to working as a designer, I know about front-end development from previous experiences, and I also developed my portfolio a few years ago using Storyblok, where you can check out the SalesCreations website here. I mentioned that I could be working together with him on building the blog.
Now that we are moving into a more technical environment, I will be starting with the tool we are using to feed the content of this blog.
Content Management
To be able to customize and edit the information here, we are using Headless CMS technology that was developed by Storyblok.
What is a Headless CMS?
Before I explain what the Headless CMS is, let's understand what a CMS would be in its essence. The CMS, which is the acronym for Content Management System, is the software responsible for managing content, allowing the creation, editing, and organization of various materials and articles provided on the web. In this context of CMS, the most widespread and used for a while on the market was WordPress, which has its initial structure in PHP, having a coupled structure fixed in a stack.
Headless CMS came to solve this problem, providing total freedom for the client to decide which technology they will use to develop their website or application, where it is possible to provide this content in different stacks. A headless CMS is used with a Jamstack architecture, which is an architectural approach that separates the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.
To learn more about headless CMS in one look, watch this video here:
Now that we've seen a little of what we're using to manage the content of our blog, let's now check the technologies used to visually present and receive the information made available by our Storyblok Headless CMS.
Behind the hood of the blog
For our front-end, we are using some new technologies used in the area, such as reactive frameworks, integrations for indexed search, and utility-first CSS. Check out the technologies used here.
Nuxt 3
Nuxt is an open-source framework that makes web development intuitive and powerful. Nuxt is a meta-structure built on another JavaScript framework called Vue. Its greatest functionality is the way of creating a web application by serving the famous SSR for Vue, which helps a lot in getting the site indexed by search engines like Google. And on the ProductLand blog, we are using its latest version, which is v3.
Tailwind CSS
Tailwind is the CSS framework that we are using for the blog. It works with Utility-First Fundamentals, which automates much of the CSS writing process and speeds up the bootstrapping process for web projects.
Utility-First Fundamental
Traditionally, you write CSS whenever you need to style something on the web. Using a traditional approach where custom designs require custom CSS, the developer needs to create specific classes with various customizations.
With Tailwind CSS, the developer styles by applying pre-existing classes directly to their HTML. Using utility classes to create custom designs without writing and creating new CSS classes.
Tailwind CSS offers more flexibility and control over design but can be a bit more verbose as it requires the application of multiple classes.
Algolia
For faster indexing and searches of content on the blog, we are using the Algolia service, which is a search platform that provides a search API. The platform combines natural language processing and keyword research with hyperscal indexing.
Netlify
And at the end, we will talk about where we are hosting. The ProductLand blog, Netilify, is a cloud computing development platform, and we are using its hosting service, which is in PaaS (Platform as a Service) format. It is a computing model cloud that allows companies to develop, run, and manage cloud applications without the need to maintain their infrastructure and servers.
Well, that's it, guys. This is a short post to say hi here on the blog. If you liked this article and want to know a little more, share it with us, and depending on the repercussions of this article, I will create a new article presenting a step-by-step guide to creating a blog using Storyblok. 😀
See you later guys! 👋
