Technology stack of this blog
As a Note
I haven't done anything special because the Nuxt ecosystem is amazing.
If I consolidate the focused time, I can probably implement it in less than a day.
It really was that great. (Thank you very much)
So, I don't have much to say, but I'll write down what I used.
1. Nuxt Content
Used in Document Driven Mode.
According to the documentation, quickly create a project, enable Document Driven in nuxt.config.ts
, implement pages/[...all].vue
, and create content in markdown files in content/
.
It's quite easy.
In pages/[...all].vue
, all content is trapped.
import { useContent } from "#imports";
const { page, layout } = useContent();
With this, you can access structured page information.
Then, casually write layouts
and render content with ContentRenderer
provided by Nuxt Content.
Style it to your liking.
<template>
<NuxtLayout :name="layout as string || 'default'">
<ContentRenderer
v-if="page"
:key="(page as any)._id"
:value="page"
/>
</NuxtLayout>
</template>
Embedding links didn't seem to be supported by default, so I tried adding a few remark plugins.
remark plugins
You can configure plugins in Nuxt Content settings, so make use of that.
2. Nuxt OG Image
I use Nuxt OG Image for dynamically generating OG images.
This was also a very good experience.
Create a component representing OG, and simply set it up on the necessary pages using defineOgImage
.
<!-- MyOgImage.vue -->
<script setup lang="ts">
defineProps<{ title: string; description?: string }>();
</script>
<template>
<div class="og-container">
<h1>{{ title }}</h1>
<p
v-if="description"
class="description"
>
{{ description }}
</p>
</div>
</template>
<style scoped>
/* TODO: styling */
</style>
import { defineOgImage, useContent } from "#imports";
const { page } = useContent();
defineOgImage({
component: "MyOgImage",
title: page.value.title,
description: page.value.description,
...page.value.ogImage || {},
});
3. @unocss/nuxt
I tried using the unocss Nuxt Module for styling.
Although I say that, I often write directly in the SFC style.
I'm not familiar with unocss, which is a major factor, but for a blog like this, it was faster to write CSS quickly.
I'll try to write only with unocss somewhere.
4. @nuxt/eslint
I don't think I need to explain this.
As a personal preference,
{
quotes: "double",
semi: true,
}
is essential, but everything else is used by default.
It's really nice and easy because with one command, it's mostly set up. (npx nuxi module add eslint
does almost all the setup).
5. Others
I write markdown styling and other things normally with CSS.
I think it turned out pretty much to my liking. Simple.
I'm also setting up textlint.
It was really convenient to preview OG images with Nuxt DevTools.
Hosting is done on Vercel.
I'll probably move somewhere to Nuxt Hub.
I'll... probably release the source code for this blog when I feel like it.