Editor-friendly Jamstack website: Armorblox Case Study

At Bejamas, performance and security are always top priorities in web development. When we received an inquiry about website services from a company whose mission is to provide the best security services to businesses around the world, we knew it would be a project where we could showcase our value.

 

So, I worked hard on the project.

1. Overview

Armorblox is a California-based company and a true innovator in the field of cybersecurity. Using the latest AI technology, from natural language understanding and processing to deep learning, we protect organizations from data loss and identity-based attacks on various communication platforms.

 

They are a newly established company that receives full support from investors, and they needed a website that not only supports their brand identity, but also has a short page loading time, attracts users, and appeals with a high level of security (security is especially important in business, right?). Although they had just started, most of their team already had experience building and operating websites on Wordpress, but they were dissatisfied with Wordpress.

 

Fortunately, they were already familiar with Jamstack and knew that it far outperforms its competitors in terms of web performance and website security.

 

Previously, we used Wordpress, HTML, Flash, and other tools to create websites, and we also used various CMS systems. However, since we did not have a website yet, it was good news that we could create a website from scratch using the secure and high-performance Jamstack.

 

Melinda Marks
Armorblox Marketing Consultant VP

We immediately set our goal to easily expand our website at high speed and 100% safety.

 

1-1 Used Stack

After discussions with Armorblox staff and within the company, we have decided to use the same technology stack as the one used in the Emerging Dynamics project.

 

• GatsbyJS as a Static Site Generator
• Storyblok as a Headless CMS
• Marketo for Forms
• Netlify for Hosting

2. The biggest challenge in this project

Actually, this was our first project with Storyblok, so we had to create a system from scratch that was suitable for this headless CMS. To be honest, everything was a series of surprises.

 

Personally, I was amazed by the overall concept of live preview and the idea of custom plugins written in Vue. What I liked was the ability to create multiple customizable components, and the fact that they are clear and easy to use for editors.

 

The second challenge was implementing Marketo forms on Gatsby pages. It was a struggle to optimize this third-party solution with Jamstack. One of the problems was dealing with script loading. Since we were using multiple forms on the website, we were constantly facing issues with the wrong form being displayed.

 

And finally, one thing that cannot be forgotten is the tight deadline. This project had a strict deadline (product launch conference) that had to be met, so we had to act quickly. Although there was some risk in adopting a new stack considering the time and delivery date, it was the best fit for the client and we were able to achieve results with certainty.

 

2-1 The central Storyblok of the project

Please take a moment to remember. Storyblok is an API-based headless CMS that comes with a visual editor that allows you to select specific content and make changes with just one click. It is very user-friendly and allows you to add custom plugins, as well as providing an image API for optimizing and editing images. Additionally, Storyblok is recommended for those who are looking to expand their website in the future. Not only can you make changes to existing page content, but you can also add new pages from pre-made components (such as landing pages).

 

For example, let's say you need to create a new page every day. This could be a landing page, a page for new products/tools/events, etc. If the components are set up correctly, there is no need to contact the developer. The editor can do it instantly.

 

Storyblok has a live preview feature, but if you don't need it and want to focus on the content itself (for example, when adding a new article), you can easily disable this feature on a specific page and concentrate on other important things.

 

From these, you can see how versatile Storyblok is. It functions as both a page builder and a standard headless CMS for input. In either case, it provides the most comfortable user experience of any editor I have encountered so far.

 

2-2 Gatsby-source-storyblok Plugin

Headless CMS can use any frontend framework (preferably VanillaJS). However, at the time we were developing our website, we could only find tutorials and articles about using Storyblok with Vue. But since custom plugins are also written with Vue, there was already a Gatsby source plugin available.

 

Having one official tutorial for Gatsby-source-storyblok and how to use it was more than enough to have a significant impact. Initially, this plugin provided some basic functions. What we lacked at the time was functionality when converting entries to GatsbygraphQL. Since Storyblok is constantly developing, the source plugin is available. On the other hand, we had to figure things out on our own.

 

As a result, when linking to another entry, it is now possible to retrieve the data (not just the ID as before) without needing to write additional queries or filters. An example of usage would be in an article with an author, where the author is held as a separate entry and linked to a specific article.

 

Integration of 2-3 Marketo Forms

Marketo is a marketing automation tool that provides various solutions and is used for lead acquisition, sales management, and measuring website performance for companies. One of the tools offered by the company, "Forms," helps create simple and flexible web forms that customers can embed on any page of their website.

 

I found out that implementing Marketo's multiple forms on a Jamstack website is not as easy as it seems.

 

The problem occurred when trying to use different forms on different pages. It was discovered that when the user switches to a subpage, a form other than the correct one is displayed. This can happen if the form from a previously visited page is used, or if the user moves from a page with form ×× to another page with form ××, it can double.

 

Previously, there was no plug-and-play type operation like this. Using the Marketo API to send form data is easy, but software providers only suggest installing their own scripts on the website. Therefore, inserting scripts to achieve each individual goal has become a major challenge.

 

For example, there was additional work to be done to make it work, such as checking whether the form had been loaded before, checking whether the form needed to display the exact one, and in some cases, ensuring that only the correct form was displayed to the end user.

 

At Armorblox's website, not only were multiple forms required, but also different actions were needed depending on the content the form was trying to perform, such as moving to another page or downloading a file after submitting the form. By using Marketo's script and approach, we were able to work smoothly and enjoyably without any difficulties here.

 

Finally, we have added an additional connection between Storyblok and Marketo. When users need to edit pages with forms or add new pages, they can simply use the Marketo panel to configure all form settings and add the correct ID to Storyblok, making everything automatic.

3. Results

By combining Gatsby and Storyblok, Armorblox was able to create a visually appealing, well-structured, fast, and easy-to-manage website. Additionally, Storyblok makes customizing, extending, and rebuilding pages incredibly simple, which was the most impressive aspect for the Armorblox team.

 

They were also satisfied with the performance. Their biggest concern was how adding additional elements to the website would affect its performance.

 

Thanks to the Jamstack tools we used this time, we didn't have to worry about such things.

 

Our performance and page loading statistics are far superior to those of Wordpress and other sites. We also wanted to add design elements such as animations. With Jamstack, we can add design elements without worrying about performance.

 

Melinda Marks
Armorblox Marketing Consultant VP

Another happy client may be a cliché, but in this project, it was truly achieved. Moreover, thanks to this project, I feel like I was able to make a small contribution to making the web a safer place.

 

Come and visit Armorblox's website!