Editor-Friendly Jamstack Website: Armorblox Case Study

At Bejamas, web development prioritizes performance and security above all else. When we received an inquiry about a website from a company whose mission is to provide the best security services to businesses around the world, we thought it would be a project that could demonstrate 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. Utilizing the latest AI technologies, from natural language understanding and natural language processing to deep learning, it protects organizations from data loss and ID-based attacks across various communication platforms.

 

As a startup receiving substantial support from investors, they needed a website that not only supports their brand identity but also has fast page load times, attracts users, and showcases a high level of security (security is particularly important in business, right?). Although they were just getting started, most of their team already had experience building and managing WordPress websites, but they were dissatisfied with WordPress.

 

Fortunately, they were already familiar with Jamstack and were well aware that Jamstack significantly outperforms competitors in terms of web performance and website security.

 

In the past, we created websites using Wordpress, HTML, Flash, and various CMS systems. Since we did not have a website yet, it was good news that we could build a website from scratch using Jamstack, which offers advantages in terms of security and performance.

 

Melinda Marks
VP of Marketing at Armorblox

We immediately set the goal of easily expanding a high-speed, 100% secure website.

 

1-1 Stack Used

As a result of discussions with the staff at Armorblox, we have decided to use a technology stack similar to 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

In fact, this was my first project with Storyblok, so I had to create a suitable system for this headless CMS from scratch, and to be honest, everything was a series of surprises.

 

Personally, I was amazed by the entire concept of live preview and the idea of custom plugins written in Vue. What I liked is that you can create multiple customizable components, and they are clear and easy to use for the editor.

 

The second challenge was implementing the Marketo form on the Gatsby page. We struggled greatly with trying to optimize this third-party solution for Jamstack. One of the issues was handling the loading of scripts. Since we were using multiple forms on the website, we constantly faced the problem of the wrong form being displayed.

 

Lastly, what cannot be forgotten is the tight deadline. This project had a deadline (the product launch conference) that absolutely had to be met, so we had to act very quickly. Considering the time and the deadline, adopting a new stack was a bit risky, but it was the best fit for the client and we were able to deliver results.

 

2-1 The Core of the Project: Storyblok

Remember this easily. Storyblok is an API-based headless CMS that features a visual editor allowing you to select specific content and make changes with one click. It is very user-friendly, allows for the addition of custom plugins, and provides an image API for image optimization and editing. Furthermore, Storyblok is recommended for those who are considering expanding their website in the future. Not only can you change the content of existing pages, but you can also add new pages from pre-prepared components (such as landing pages).

 

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

 

Storyblok has a live preview feature, but if this is not very necessary and you want to focus on the content itself (for example, when adding a new article), you can easily disable this feature on specific pages to concentrate on other important matters.

 

From these points, you can see how versatile Storyblok is. It functions as a page builder when needed, as well as a standard input-only headless CMS. In either case, it provides the most comfortable user experience among the editors you have encountered so far.

 

2-2 Gatsby-source-storyblok Plugin

Headless CMS can be used with any front-end framework (VanillaJS if preferred). However, at the time we were developing the website, we could only find tutorials and articles on how to use Storyblok with Vue. However, since custom plugins are also written using Vue, there was already a source plugin for Gatsby.

 

Having one official tutorial on Gatsby-source-storyblok and how to use it was more than effective enough. Initially, this plugin provided some basic functionalities. What we lacked at that time when converting entries to GatsbygraphQL was functionality. Since Storyblok is always continuing development, source plugins are available. On the other hand, we had to manage on our own.

 

As a result, linking to another entry allows you to retrieve that data (not just the ID as before), eliminating the need to write additional queries or filters. An example use case is an article that has an author, where the author is kept as a separate entry and linked to a specific article.

 

2-3 Integration of Marketo Forms

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

 

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

 

The issue occurred when trying to use different forms on different pages. It was found that when users switched subpages, forms other than the correct one were displayed. Sometimes it was the form from a previously visited page, and when users moved from a page with the XX form to another page with the XX form, it could double up.

 

There was no plug-and-play type operation as before. While it is easy to send form data using the Marketo API, the software provider only suggests placing their script on the website. Therefore, inserting scripts to clear each individual goal has become a significant challenge.

 

For example, there was additional work to ensure that the form checked whether it had been loaded previously, whether it was the correct one that needed to be displayed, and in some cases, to ensure that only the correct form was shown to the end user.

 

On the Armorblox website, not only were multiple forms required, but depending on the content the forms were intended to handle, different actions were necessary, such as moving to another page after form submission or downloading files. By using Marketo's scripts and methods, we were able to work smoothly and enjoyably without any struggles here.

 

Finally, we established an additional connection between Storyblok and Marketo. When users need to edit a page with a form or add a new page, all form settings are configured in the Marketo panel, and by adding the correct ID to Storyblok, everything is done automatically.

3. Results

By combining Gatsby and Storyblok, Armorblox has created a visually appealing, well-structured, fast, and easy-to-manage website. Furthermore, Storyblok makes it very easy to customize, extend, and rebuild pages, which is what impressed the Armorblox team the most.

 

In terms of performance, they were satisfied. Their main concern was how much adding additional elements to the website would affect performance.

 

Thanks to the Jamstack tools used this time, there was hardly any concern about that.

 

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

 

Melinda Marks
VP of Marketing at Armorblox

Another happy client may be a worn-out phrase. However, in this project, it can truly be said that this has been realized. Moreover, thanks to this project, I believe we have made a small contribution to making the web a safer place.

 

Now, please visit the Armorblox site!