Converting this website and blog into a Nuxt app

At the end of 2017, I built this blog with Hexo and then migrated the rest of my site to to use the same Markdown format. Creating the website this way came with a lot of positives, one of the biggest ones being that I controlled the entire build locally on my computer. It’s been fairly easy to make small adjustments to the build process and the resulting files, but generating a static site has also impeded my ability to make this website more dynamic and interesting. But that’s all changing, as I’m converting my website and blog into a pre-rendered Nuxt app!

Due to the nature of the web, by the time you read this the entire blog could already be the Nuxt app, or it could be something else entirely! But as I write this, I’m still steadfastly building the SPA from scratch. One of the goals in this project is to move the entire blog from my hard drive into the cloud and leverage some APIs in a variant of JAMstack.

Firstly, I adopted Prismic as my headless CMS to contain all of the website content.

Prismic itself is a sweet API that lets you define a data structure and then build documents using those custom templates. You can use their API to query, organize, and display your documents however you want. For my purposes, I created a template for blog posts and a template for portfolio projects.

To accomplish that, I had to account for for all of the fields currently represented on my blog, and then migrate the contents of those Markdown files to the CMS. I did all of that (and migrated over my projects, too!) and now I’m finishing the underlying logic for the blog.

I decided to build the blog from scratch with my own Vue components so I could have granular control over the results. Since I’m converting a pre-existing website, I need to redirect old URLS so no content is lost. I’ll be using Netlify to deploy the result and I’m using webhooks to automatically rebuild the website when anything changes.

I’ll take a deeper dive into the components that make up the new website a provide a design postmortem in the next post!

Click here to read Part 2!