Nebulaworks Insight Content Card Background - Atul vinayak architecture dark

Nebulaworks Insight Content Card Background - Atul vinayak architecture dark

Announcing the Launch of our New Website

January 21, 2021by Mark Johnson

Learn about the processes and tools used to create the next iteration of the Nebulaworks website.

Recent Updates

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.

New Nebulaworks.com Website
New Nebulaworks.com Website

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:

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:

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:

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:

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:

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.

Insight Authors

Nebulaworks - Wide/concrete light half gray

Looking for a partner with engineering prowess? We got you.

Learn how we've helped companies like yours.

Don't miss a beat. Stay up-to-date with our monthly DevOps Wire newsletter.

A curation of informative industry insights delivered to your inbox monthly.

Error: {message}
Thanks for subscribing!