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

Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more
Readying Live Streams for Video on Demand

When planning a live broadcast or stream, companies often overlook the redistribution phase, but live-stream videos are useful well beyond their initial streaming. Why? Because not everyone watches the first run. For a wider audience, it makes sense to repost live content on your website under an “events” tab, on YouTube, and other social sites for video on demand (VOD). However, preparing footage for reposting can be a lot of work.

Read more
Optimize Visual Media for a Fast and Captivating Digital Experience

Did you know that humans process imagery 60,000 times faster than text? In fact, 90% of the information our brains process is visual, which makes it seem a no-brainer—pun intended—that brands are connecting with consumers through visual content online. However, adding media assets like images and videos to websites comes with a tradeoff: the more media, the heavier the site, which results in a noticeable slowdown in page loads and a reduction in content quality.

Read more