12/31/2020 – This is now deprecated as far as my approach to importing content is concerned. I'm still largely storing page data in yaml files. Can I also comment on 2020 as a whole? Because, no thanks, I don't want to do that again.
Introduction
I've spent far too many years working with WordPress as my personal writing platform – to the point of including years and years of old, stale code as I rebuilt or redesigned my old personal blog.
And so last year I decided to learn VueJS–and with it Nuxt–and based on what I learned I'm using Nuxt as a static site generator for this very website.
I started by building just a few simple pages that acted as a brochure style experience and have started to build out some additional features. The first is a simple blogging platform using markdown files.
Loading Content
I'm primarily loading content from a few different static sources: yaml, json, and markdown files. For example, index.vue
pulls in the following:
import {
intro,
statement,
skills,
softwares,
technical,
} from '@/data/home.yaml'
import articles from '@/static/articleList.json'
The articleList.json
file is the simplest way to link to the specific markdown file with a slug, give it a title, and give it a description. Eventually I could add quite a bit more detail, but today, it's functional. Unfortunately, I think that this approach is unlikely to remain sustainable.
[
{
"title": "Built With Nuxt",
"description": "My journey towards a more modern development experience.",
"topic": "Development",
"date": "May 6, 2019",
"path": "built-with-nuxt"
}
]
You could see how adding articles to this file might get tedious at some future date. A headless CMS might be the path I take, but as a development experience, this feels fairly solid.
Optionally, perhaps I'll build this in such a way as to dynamically generate the information I need by scanning the markdown files, checking front matter, and then listing it all out without much intervention on my part.
I will go into more detail at a later date, but for now I'm going to launch an MVP of this feature, and then ready myself for adding a portfolio feature as well.