Magical combination to build a modern website

Yes, I did it again. I rebuilt my website!

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!

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
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!

CMS
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.

Searching and filtering

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.

Images
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.

Follow me here:

#jamstack #dxp #googleaudit

[jakubandrzejewski]

Very good video Tim. I really like your approach to build the website as DXP. Right now I have an interesting idea for the next article to write 😊

[Twister]

Hello Tim 👋 amazing talk! I always appreciate your content 😁 quick question: have you used or heard of something like prismic but for e-commerce?

[diegomelgar]

Hi Tim,
Like always, really nice videos.

I have one question about the fetching process of images between cloudinary and prismic. This is the first time I see an example of a whole architecture of modern website and as you said for each subject it would be necessary to have a dedicated video.

So in a nutshell and if I understood how cloudinary fetch feature works from just what you said, does the cloudinary fetch feature automatically uploads the images from prismic (using the concatenation between cloudinary and prismic urls) to your cloudinary dashboard once you ask cloudinary to optimize that image for you accordingly to how you want to be optimized through the fetch url?

[TommasoRossi]

Hi Tim, we are building am ecommerce platform with best of breed solution, we've added pimcore / shopify and imgix, now it's time to work on indexing and i think we'll go with algolia, are you planning to share more content about algolia?