2021 update: in the time since this blog post was first published in 2019, I've rewritten my blog with Gatsby! That said, I'm keeping this post available for historical purposes.
At the end of 2017, I built this blog with Hexo and migrated the rest of my site to use the same Markdown format. Creating the website this way comes with a lot of positives. One of those positives is that I'm able to control the entire build locally on my computer in a very formulaic way. It’s been fairly easy to make small adjustments to the build process and the resulting files, but generating a static site by an admittedly simple method has also impeded my ability to make this website more dynamic and interesting. But that’s all changing now, 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're reading this the entire site could already be this planned Nuxt app, or it could be something else entirely! 2021 update: how true indeed, as the website is now in Gatsby! But as I write this, I’m still building the app locally and learning as I go. One of my objectives is to move the blog's build process off my hard drive and into a form of cloud hosting. To that end, I'm going to leverage the JAMstack.
To house all of my content, I've adopted Prismic as my headless CMS. Prismic itself is a crafty 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 one template for blog posts and another for portfolio projects.
In building those templates, I had to account for all of the fields currently represented on my blog before migrating the contents of each Markdown files into Prismic by hand. I recently completed that migration and now I’m bringing all of the content together in Nuxt.
I've decided to build the blog from scratch with my own Vue components so I can have granular control over the results. I don't want to use a template or a starter because I see it as an opportunity to make something myself and learn how all of the parts work. Once I have an idea of how to approach it, I can look at a more polished project and compare their execution to mine. Since I’m converting a pre-existing website and the resulting structure is changing slightly, I'm also faced with challenge of redirecting URLs so no SEO is lost. Thankfully, since I’ll be using Netlify to deploy the site now moving forward, I can easily set up those redirects with a file in the project repository.
When I get the site's framework finalized soon, the next task will be designing the pages. As a result, I’ll be taking a deep dive into styling Vue components in my next post!