Announcing the Launch of our New Website

We are very excited to launch our new website: www.nebulaworks.com. The process of creating our new website started in 2020 as we went to work at designing something that was faster, modern, easier to navigate, reflective of our brand and culture, and an authoritative source for all our insights and events.

Process

We started our new website traditionally — via a new git repository. Once created, we began to contribute code using a trunk-based development workflow whereby we laid the groundwork of the new static site, relevant pages and existing content. Simultaneously, we incorporated continuous integration and deployment scripts that allowed us to colloborate faster and deploy to staging and production quickly. As our site materialized, we collaborated and worked closely with Steve Mercier on refining our design, brand, and appearance of our website. We transformed raw design ideas, mockups, and wireframes into HTML/CSS and joined relevant content into the layout. Our initial design and wireframe mockups were based on desktop resolutions; however, we kept mobile as a forethought especially as designs were translated into HTML/CSS/JS. As the website came together, sections and layouts were updated to handle gradual viewport resizing to ensure a consistent experience across various devices.

Existing Stack

Our previous website was a combination of statically hosted pages with a dynamic Wordpress CMS for our insights hosted at Hostgator. While Wordpress traditionally has been a great content management system, it comes with some issues:

• Additional User Management – By default, user management is managed directly via Wordpress. Managing users and permissions becomes more difficult as companies grow and have multiple identity management platforms for various services. While reconfiguring Wordpress to integrate with an existing identity provider is possible via plugins, we wanted to move away from added complexity.
• Lack of Collaboration Visibility – Aside from “drafts” in Wordpress, there is not a great way to take advantage of a collaborative workflow for change management; something that is common to cloud based VCS providers.
• Scaling Complexity – Wordpress has a lot of moving parts and horizontal scaling is not trivial. In fact, Nebulaworks has extensive experience in this department as we’ve implemented highly available IaC Wordpress solutions for clients that utilize base EC2 instances managed via Auto Scaling, EFS for content data, S3 for asset storage, CloudFront for the CDN edge, and relevant application level plugin changes. Despite familiarity with this process, the complexity and large number of services add to the work-effort involved and risk factor.

Moving forward, we decided we could migrate away from traditional web hosting and Wordpress by leveraging new technology and services that were purpose designed for modern and mostly static websites.

Technology

As we built out our new website, we wanted to align closer with a git-centric workflow that leveraged a cloud-based continuous integration and delivery lifecycle. Throughout this process, we made strategic decisions along the way to use certain technology. Check them out:

GitLab

GitLab is one of our primary cloud vendor’s and served as the home for the website repository as well as providing the CI/CD for building, testing, and deploying the website.

Hugo

We explored various static site generators but ultimately landed on Hugo primarily because:

• Our team had experience with this tool
• It’s rising trend in popularity and stability
• Great performance on large sites with built-in live-reloading

Netlify

Being a huge AWS shop, we considered setting up a new account that would be responsible for running a static site via S3, fronted by CloudFront, Route53 entries, Lambdas for dynamic backend, and all managed via Terraform. While trivial, we felt that the best in-breed JAMStack solution provider, Netlify enabled us to iterate faster and focus on application development. Additionally, the following features swayed us towards Netlify:

• Ability to generate preview builds (out of the box).

  This was a game changer. Although we could have engineered this in AWS, it was not worth our engineering time. This allows us to preview all merge requests visually which is incredibly helpful for UI changes.

• A generous free tier.

• Automatic deployment for serverless functions.

  Developing serverless functions is still non-trivial and one of those questions that is always asked among AWS Re:Invent attendees “How are you developing/deploying your serverless stack?”. While we have expertise in Serverless and Terraform to bridge the CI gap, Netlify handles the deployment and rollback 100% automatically for all environments making this one less thing to worry about and a huge time saver.

• Brotli compression.

  Modern browsers (Chrome, Firefox, Edge) all support the superior Brotli compression algorithm, which typically reduces files 10%-25% which results in fewer bytes transferred and faster page loads. It was important that our edge CDN would properly compress and serve files using the best possible algorithm for clients.

  Note: CloudFront didn’t support Brotli at the edge until 09/15/2020 which is now on par with Netlify.

Docker

The underlying web stack consists of ever changing suite of NPM modules and external dependencies. In order to provide a consistent development experience for all team members, we utilize Docker Compose to docker-compose up a local environment that is identical to production. Using Docker, allows engineers to not have to worry about what operating system or what tool is installed locally (aside from Docker Desktop) and focus on making quick changes via a reproducible cross-platform development environment.

Algolia

Since our entire site is static, performing search for our insights posed a challenge. In general, there are two common solutions to this issue:

1. Pre-generate a JSON index at build time which consists of all the relevant metadata and then use local client-side JavaScript parsing (e.g. Fuse.js) to search and filter.
2. Use an external database or search service.

Since the size of our insight metadata is large (currently ~1.5MB compressed) and growing continuously, it made sense to use a third-party service. While Google Site Search used to be the dominant player in this space (past decade), Algolia has become the new gold standard in this space. With instantsearch, a generous free tier, custom ranking and filtering, sorting, and 100% API support, Algolia was an easy decision to integrate into our stack.

Fauna

In order to store basic metrics for insight metadata we needed a minimal data storage backend. While Algolia is great for search, it’s not meant for high volume API requests. The current JAMStack serverless database of choice and leader in this space is Fauna, which paired nicely with our technology stack. We were able to quickly setup a Fauna database, functions, and indexes to support our needs for storing and retrieving relevant insight statistics. Since Fauna had an extensive API data layer, we were able to easily define our database schema and graphql functions via code and properly create/update Fauna automatically via our CI process.

Features/Performance

We wanted to ensure that our new website was not only functional but had great performance, utilized best practices, optimized for search engines, and highly accessible. Using Google’s Lighthouse project allowed us to measure and improve these categories. A few notable features:

• Mobile/Responsive — Graceful layout changes for various viewport dimensions
• Image & Data Hashing — Images and data are cached on the edge using checksums to avoid issues with content refreshing
• Optimized Images — Images are compressed during CI/CD and served in various next-gen format (svg, webp, png/jpg)
• Optimized Assets — HTML, CSS, JS assets are compressed and minified during CI/CD
• General Performance — Defer offscreen images, removing render-blocking resources, preconnecting to required origins, minimizing DOM elements + scripts

What’s Next?

Just like many things in software engineering … A great website is never finished. There’s a lot we accomplished in laying the groundwork for our VCS-based JAMStack website, but we still have more on the roadmap including:

• AVIF image format is on the horizon
• Integrated event management
• Marketing automation and integration with 3rd party services
• Inline critical CSS during CI/CD
• Slack notifications

More importantly, transitioning all components of our website, insights, and events into a single VCS-based source of truth resulted in a huge win. Any one of our team members can now use our Git-based workflow, something that is core to our company, and quickly preview changes via a merge request. Once approved and merged, changes are automatically deployed to production in minutes. This continuous integration and deployment process is how we build services for our customers and it naturally makes sense that we do the same internally.