Cloudinary Blog

Tim Benniks: How I Built My Website

How I Built My Website Part 1

I work as director of web development at Valtech in Paris, France. Also, I’m a Cloudinary media developer expert (MDE), a content creator, and a developer. Follow me at @timbenniks and at youtube.com/timbenniks.

My Website

My website, timbenniks.dev, serves as my blog and a repository of my videos and speaking schedule. Though rich in content, the site is fast, accessible, and, most important, has a low carbon footprint. Under optimal conditions, the site scores 100 percent in Lighthouse.

I recently rebuilt the site with several tools, the combination of which is ideal for modern web development. I’m excited about the result of the revamp. Let’s see how long that thrill lasts!

Overview of the Architecture

The site architecture comprises these components:

  • Backbone: I picked Nuxt version 2.14, which offers the excellent target: static option, outputting a static website on build. You probably guessed it already: my website adopts the Jamstack model. Jamstack websites are light and easy to distribute, with no reliance on dynamic content at all.

    Ever tried hacking a static site? That’s hard to do. Also, if you need to scale it to meet demand, simply put it in more places on the content delivery network (CDN). After all, it's only a bunch of static files.

  • Hosting service. For a smooth sail with Jamstack, I needed a hosting provider for the static assets on the CDN edge with simple capabilities for building and deploying my codebase. Netlify hosted my website before, but I wanted to try another provider for an insight into Netlify’s competition. Vercel, the provider I chose, was effortless to use. A nice surprise!

  • Content management system. I picked Prismic, a great headless CMS whose features outshine those offered by huge enterprise systems. In particular, Prismic has resolved the rich-text issue many CMSs struggle with. I was also impressed by Prismic’s component-based design system, called slices, with which I can create pages in a component-driven way. I highly recommend checking out Prismic.

  • Indexing. To facilitate filtering of video content, I chose Algolia for indexing through its SaaS platform. The initial setup leveraged Algolia’s Vue.js components, which, despite a rather big footprint, do a lot of heavy lifting. Do have a look at Algolia in action on the site’s video page.

  • Connection service for CMS and index. Orchestrating the communication between best-of breed products like Algolia and Prismic is no trivial task. The challenge I faced was to ensure that Angolia updates the index when I add new videos to the Prismic. To make that happen, I created a Vercel lambda function, which is called with a webhook whenever I add a video. The function then queries the CMS for the new video data, after which the lambda updates the video index with the Algolia API. Voila, sheer magic!

    Webhooks are useful in decoupled architectures. I set up webhooks to also call Vercel when I publish content. On receiving a ping from a Prismic webhook, Vercel rebuilds the site and updates the CDN edge. Similarly, when I push updated code to GitHub, Vercel redeploys the site.

    Webhooks are the glue that helps automate the system. Thanks to Vercel’s high speed, I could deploy a hundred times a day without any part of the system breaking a sweat.

  • Media-management platform. Cloudinary, another best-of-breed system I’ve been using for years, was an obvious choice. Even though Prismic offers an excellent feature set for managing images, Cloudinary struck me as being a better fit.

    The process was straightforward. First, I sent the Prismic images to Cloudinary with the Nuxt Cloudinary module through the fetch system. From there, I transformed the images with the Cloudinary API slated for image URLs, e.g., by changing the file-type-based browser context and by resizing, scaling, and cropping the images accordingly.

Source Code

The above is only a brief summary of a pretty big and complex project, the success of which clearly demonstrates that Nuxt, Prismic, Algolia, Cloudinary, and Vercel are a magical combination.

A stickler for details, I’ve done a lot of optimizations to ensure that all the services play well together. Want to see the code? It's open source.

Learn more in the full video below. Don't forget to smash that like button and subscribe.

Recent Blog Posts

Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more