I spent years with a single index.html, an app.js, and a big stylesheet. It worked.
But every time I wanted to add a project or write something, I was editing arrays buried
in JavaScript. So I rebuilt it as a template: content lives in one config file, posts
live in markdown, and the design is the reusable shell.
What changed
Three things now live apart from each other:
- Config — who I am, my projects, my experience. One file:
app/app.config.ts. - Content — these blog posts, as plain markdown in
content/blog/. - Design — the Vue components and the stylesheet that render it all.
If you can fork it and make it yours by editing data, it's a template. If you have to touch component code, it's just a website.
The blog
This very post is a markdown file. Nuxt Content turns the content/ folder into a
queryable collection, so the index page just asks for every post, sorted by date:
const { data: posts } = await useAsyncData('blog-list', () =>
queryCollection('blog').where('draft', '=', false).order('date', 'DESC').all()
)
Add a file, get a post. That's the whole workflow.