Gustav Ehrenborg fullstack developer

Email symbol LinkedIn logo GitHub logo Instagram logo

This site 2020 edition Static site with Nuxt, Prismic and Vercel

Wednesday, December 23, 2020

I was inspired by Tim Benniks and also decided to rebuild my personal website with Nuxt. It's hosted on Vercel and is using Prismic CMS.

Nuxt

Heard of Vue? Nuxt is a framework build on top of Vue that offers server side rendering, static site generation and some other neat features. Static sites are fast and don't need a traditional backend, which is great. Of course static sites do not fit everywhere, but for a site like this it is perfect.

Since version 2.14.0 of Nuxt, 'target: static' can be configured and the site can be statically generated. A built-in crawler finds all your pages and generates static version of them. It also adds preloading to the site. Everything is done more or less automagically which really surprised me. The Nuxt blog has a great walkthrough.

Prismic

I don't have that much CMS experience, but Prismic was really easy to get going with. You create models, or custom types, by dragging and dropping the elements you want. Hit save and you can now create documents of these types.

Prismic has multiple SDKs and packages that help you fetch and display the content. For JavaScript, prismic-javascript is the API client that queries and fetches data and prismic-dom helps you display and handle the content. It has functions for converting the output of Prismic, which is JSON, to formatted HTML, or ordinary text. It can also work with link resolvers and custom HTML serializers.

What I believe is a pretty new feature of Prismic, is slices. It is dynamic zones where the content editor can put different sections in whatever way he or she wants. I have seen this before in EPiServer and Keystone and it can be really powerful. I really hope I can try is out soon, but for this site it is not really needed.

Vercel

I'm astonished how easy it was to get the hosting up and running with Vercel. Give access to the GitHub repo, tell Vercel what the build command is, add environment variables and it's on! I thought Heroku was easy to setup...

Finally

Lighthouse chart

I still have some performance tweaks to do. Probably lazy-loading the images will do the trick.

Have a look at the code if you want.