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

A New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Read more
Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more