Getting Started

Welcome to justbrain — a self-hosted technical blog built on Nuxt 4, @nuxt/content, and Coolify. This page doubles as a kitchen-sink demo of every MDC component available.

Callouts

Use callouts to surface important context without breaking the reading flow.

Default callout

This is a note callout — good for supplemental information that doesn't require immediate action.

Pro tip

Use ::callout{type="tip"} for best-practice suggestions or shortcuts the reader might not know.

Watch out

This is a warning. Use it when the reader could easily misconfigure something or get unexpected results.

Destructive action

This is a danger callout. Reserve it for irreversible operations — deleting data, dropping tables, etc.

Code blocks with copy button

Every fenced code block gets a header bar with the filename/language and a Copy button automatically.

composables/useBlogPosts.ts

export async function useBlogPosts() {
  const { data: posts } = await useAsyncData('blog-posts', () =>
    queryContent<BlogTicket>('/')
      .where({ draft: { $ne: true } })
      .only(['_path', 'title', 'description', 'date', 'tags', 'readingTime'])
      .sort({ date: -1 })
      .find(),
  )
  return { posts }
}

Terminal

# Install dependencies then start the dev server
npm install
npm run dev

Tabbed code groups

Wrap multiple blocks in ::code-group to let the reader pick their preferred tool.

npm

npm install
npm run dev

pnpm

pnpm install
pnpm dev

bun

bun install
bun dev

Steps

Great for installation guides and ordered procedures.

Clone the repository

bash

git clone https://github.com/you/blog-justbrain.org
cd blog-justbrain.org

Configure your environment

Copy the example env file and fill in your values:

bash

cp .env.example .env

Variable	Description
`NUXT_PUBLIC_SITE_URL`	Your public domain (e.g. `https://blog.example.com`)
`NUXT_SECRET_KEY`	Random secret for internal signing

Build and run

bash

npm run build
node .output/server/index.mjs

In production, Coolify handles the docker build and docker run steps for you via the configured Dockerfile.

Inline formatting

Standard Markdown still works everywhere:

Bold and italic and inline code render correctly.
Tables, blockquotes, and nested lists are all supported.
Links auto-style with a hover underline.

"The goal is to build a site that is fast to write for and fast to read from."

Syntax highlighting languages

Shiki supports all common languages out of the box:

Dockerfile

FROM node:20-slim AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.output ./
CMD ["node", "server/index.mjs"]

coolify.yml

services:
  blog:
    image: ghcr.io/you/blog:latest
    ports:
      - "3000:3000"
    environment:
      NUXT_PUBLIC_SITE_URL: https://blog.justbrain.org