How we used Sanity to Update our Company Website

How we used Sanity to Update our Company Website

I recently had the opportunity of updating our company website, the very one you are reading this blog post on.

I was excited about it as we needed a more up-to-date website that better showcased what we do and what we have already done.

One of the most popular options when creating a website, especially if you want to have a blog is WordPress.

But times have changed and there are a lot more options available these days if you are a developer and want to create a website with a content management system (CMS).

So I had a discussion with our chief technology officer (CTO) and there were several options available but it was about choosing the right tools for our needs.

We recently used Hygraph along with Next.js for a project.

We were considering using the same combination but decided that Hygraph wasn't the right fit for creating the CMS for the website.

Instead of Hygraph it eventually came down to either using Sanity or Prismic.

Our CTO said the final decision was up to me as I would be the one developing everything.

After careful consideration, I decided to use Sanity as it seemed to have more of the features I was looking for and it was really quick and easy to get started with.

But what exactly is Sanity?

What is Sanity?

Sanity offers everything you need to create your own content platform.

Sanity comes with a Studio that is an open-source content management system (CMS) that is built with React.js that you can customize exactly the way you want.

It is by far one of the most flexible CMSes that I have come across and the possibilities are endless.

Studio allows you to define your own data types and structure your data the way you want to.

Then you have the Content Lake which is where your content is stored and managed by Sanity in the cloud.

Besides the Studio and Content Lake which is already a great package, there are a number of plugins, tutorials, and a very helpful, friendly developer community.

I'm sure you're wondering, how much does it cost? It gets even better, you can start using Sanity for free until you are ready to scale up.

Now that you know what Sanity is, how did we use it to redo our marketing website?

The process used for website update

Before I got to work, my colleagues had designed the website and prepared static HTML components for it. (We will publish separate blog posts about this too, so keep an eye out for those too.) My first task was converting the static HTML to Next.js.

When we had the Next.js template ready with all the components I could start mapping what the data structures should look like in Sanity Studio.

Overall I would say that this took the most time as we had a lot of unique components that needed their own data structures.

With our data and CMS ready, I could start querying for data to use in the Next.js template.

Sanity has its own query language called GROQ which can take a few minutes to get familiar with but once you understand it, it is quick and easy to use.

And if you are struggling with the queries the developer community is always there to help you.

Once we had "real" data in our Next.js template we started tweaking and adjusting as needed.

Some of these were related to the frontend design while others were enhancing the CMS experience such as adding iconography and adding preview support.

In summary, our process was the following:

1. Design the website
2. Create static HTML for it
3. Convert the HTML to Next.js
4. Map out our data structures for the Next.js template
5. Use "real" data in the Next.js template
6. Tweak and adjust as needed

As with every process or project you need to reflect and ask yourself did you make the right choices which was what we will look at next.

Were the right choices made?

I feel that we definitely made the right choice when it comes to what we chose to use to update the company website.

Having used Next.js before in other projects it definitely seems to be the right framework to use for a wide variety of use cases whether it is a content platform or a website.

Being the first time using Sanity I can say with complete honestly that I am impressed with what you can do with it and not to mention the developer support, it was a fun and enjoyable experience as a developer which is exactly what you want when trying something for the first time.

Of course, it doesn't matter if you have the best technology but your process doesn't work, which I can happily say that ours did.

But there is always room to improve, so if I have to think what could've been improved next time?

What could be improved on?

For me, there is only one thing that could've been improved on or what I could've planned for is migrating the JavaScript from the HTML to either React or React packages as it was included as an external source which later caused a few issues due to how a Next.js project is built and rendered.

Other than that, everything else went very smoothly which is impressive considering that we were using Sanity for the first time.

Conclusion

I hope you enjoyed this post and learned something from it.

If you are either looking for a new CMS that is more robust and flexible than WordPress or whether you are thinking it is time to move away from WordPress I can highly recommend Sanity, it is amazing.