Our website utilizes a powerful and modern tech stack, including Hugo, CloudCannon, Bookshop, Brevo, Lunr Search, Tailwind and Flowbite.

Our Tech Stack

When Halden began the project, the tech stack was predefined. This included a Hugo site fully integrated with CloudCannon for content management and Tailwind for styling. This combination is powerful, as Hugo is lightning fast and has many of the essential features we needed, like a built in blog system. CloudCannon is an in depth content management and deployment system, which when configured properly, allows non-technical users to go in and work on the website– customize pages, create blog posts– all without coding.

Bookshop and Flowbite

Bookshop is a component-based system within CloudCannon. It allows us to build reusable and customizable elements for each of our pages by means of our visual editor. Bookshop components were utilized for most of the pages on the site, except for some highly technical pages that required complex logic. Early into the building of our “component library,” we started utilizing Flowbite, which is a huge library of pre-built components that are responsive and styled with Flowbite. Halden brought in the components as a starting point and heavily modified to make them configurable as Bookshop components.

Transitioning to Brevo for Marketing

For email and customer relationship management, we transitioned from Mautic to Brevo. Brevo (formerly Sendinblue) is an all in one service that allows us to manage customer relationships with email, SMS, and chat. We chose this platform for multiple reasons — a simple and intuitive UI for both the admin and the email builder, good email delivery, great automation, easy to view analytics, and better yet, its price. Brevo gives you unlimited contacts, and you pay based on the number of emails you send per month. This greatly reduces maintenance costs and ensures future scalability, as we won’t be restricted by plan limitations that could hinder potential connections. Because of this, Brevo was chosen to be Razoyo’s new internal marketing platform, responsible for email campaigns, applications, contact requests and more.

Another key technology used on the site is related to search functionality. When he was given the parameters of the project, a fully functioning search was desired. A traditional search library like Angola will not work on a Hugo site, as it is static, and a search usually requires a server. This is where Lunr search comes in. Lunr is cool because rather than requiring a server to create the search object, the DOM is indexed with Hugo to create a window object that the search can be performed against. Basically, Hugo can be used to parse the DOM and create a window object containing all searchable fields. Once this is created, we capture the search query and perform the search with Lunr against the object to output the results. This enables search functionality to our site without the need for a server.

Development Process

The project began in April 2024 with Jason, Paul, and Camaryn meeting at The Heidt of Media (A.K.A. HOM) to define goals, mockups, and user personas. Together, we evaluated the old site, identified areas for improvement, and laid the foundation for the redesign, prioritizing user-friendliness and accessibility. These early discussions were crucial in shaping the vision for the site. By June, Halden joined the project and development was underway. Our team, consisting of Camaryn (Project Manager), Halden (Developer), and Paul (CEO) adopted a sprint-based workflow—a project management approach where work is divided into short, focused intervals (or “sprints”) to prioritize specific tasks and deliverables. This allowed us to consistently review progress, make adjustments, and ensure we stayed aligned with the project’s goals.

Halden started the development process with a demo website to get familiar with the tools. It was very simple but had a functioning Hugo blog feature connected with Tailwind and Bookshop. This site was super barebones but laid the foundation of the actual project. When he started on the new site, his first goal was the functionality. For the first month or two, the look of the site was lacking, but he was plugging away at the “back end”. He set up the blog, components, search, case studies system, and more. Once he had a good start in the more complex matters, he could move on to styling. Since this was his first time using Tailwind on a bigger project, it took him some time to understand how their inline class system of styling works, especially making it consistent and mobile responsive. Once he figured it out, it became a breeze. Tailwind is so much faster than the traditional means of css styling, and it works great, too.

Halden put a lot of work into the content management system with CloudCannon. This involved ensuring the components were fully fleshed out and editable, and the systems for creating blog posts, case studies, services, etc… were straightforward and responsive.

Once the site was at a good point, the QA process began. Halden, Paul, and Camaryn sat down and thoroughly went through the site, tracking down any inconsistencies in styling across all screen sizes. Halden addressed all of these issues and began work on some of the cool features and issues he had previously put on the back burner.

Challenges

Overall, development went smoothly on the site, however there were still some challenges that had to be overcome. One being the hard limitations set by Hugo and CloudCannon that had to be worked around. Bookshop components are meant to be more or less static, without more complex logic involved in them. This had to be worked around, as we needed to house forms, and render site data within them. We were able to work around these limitations, and achieve the desired functionality in the end.

Another challenge was importing blog posts. Importing the blog posts is not too difficult on its own, but the sheer amount of posts made it a vast undertaking. Halden was able to add in the markdown smoothly, but setting up the tags, categories, title, date and author to comply with the new system, needed to be manually configured for each one. On the legacy site, there are blog posts going back over 8 years across 200+ posts, so importing each one was a very long task, and by far the most laborious part of development.

A unique challenge posed by this site was discovering a service for the search feature. Search isn’t something that is usually included on a Hugo site, as they are static, and do not use a server. He had to find the right search library, one that would allow search on a serverless site, and could accommodate a small to medium sized amount of data. Halden ended up landing on Lunr. This library was perfect for our needs, as it supported search against a Hugo-compiled window object, and it could accommodate the size of the website without slowing anything down.

Future Content Management vs. Custom Development

We’re excited about the launch of our new website! We believe it will provide users with a better, more seamless experience, thanks to improved accessibility and user-friendliness.

This redesign isn’t just about enhancing the user experience; it’s also about making life easier for our team. In the past, our marketing team relied heavily on developers to update the site—whether it was adding blog posts, case studies, or handling minor changes. These tasks often had to wait while developers focused on higher-priority projects.

With the new site, managing content will be effortless. Anyone on the team, regardless of technical expertise, will be able to add and update content—no coding required!