You may not be familiar with Sequoia Capital but you’ve probably felt their impact. Based in Silicon Valley, Sequoia Capital is a venture capital firm with a mission of helping daring founders build legendary companies. While they've had no trouble reaching that goal they needed a better way to display their work. We helped them build a site as grand as their vision and as powerful as the impact their partnerships have had on the world. This post focuses on the technical aspects of the site’s development.
Sequoia requested a simple solution that retained the ability to easily manage content and provide features such as localization and search.
Instead of building something complex using large databases, multiple servers, and other layers of infrastructure, we used hosted services that provide simpler solutions to these complications. Static site generation was used to provide a straightforward, fast, and secure site.
We use Contentful, a hosted CMS, to handle content management and storage. Contentful is able to handle the localization requirements of the site, can perform image manipulation via the API, and has a preview function to test changes before deploying them and optionally rollback changes. More on that in a bit.
To generate the site, we used the Middleman static site generator along with a Contentful extension to pull in content. Netlify provides on-demand static site generation and hosting. Configure it by pointing it at your Github repository and give it the command that generates the site, then it’s ready to build your site and deploy it to their global CDN. Builds can be triggered manually or via a webhook.
On Netlify, we’ve set up a staging site that is pointed at the “preview” data in Contentful. With this, Sequoia Capital is able to view content changes in a private environment. When ready, they can simply publish their changes in Contentful and build the production site in Netlify to make them public. If there’s ever a need to revert, Netlify can instantly rollback the site to a previous version with one click.
Using a static site, features that typically need to communicate with a backend must be pushed to the browser. For search, site content is compiled into a small (500k) JSON file during site generation and deployed with the site. When searching the site, Fuse.js is used in the browser to perform the search and dynamically render results as the user types. The filtering on the Companies page is done in the browser. With all dynamic features being performed by the browser, the user interface is consistently fast regardless of network speeds. This is especially important for mobile UX.
The result: A faster, more maintainable presence and a huge improvement for a company that looks to help others achieve their full potential.
What better way to start then by creating a site that sets a good example.
Written by Nick Tzaperas, Senior Developer