mteke.com
Blog

Blog Culture

2 min read

This site is built on Next.js 16 + MDX + Tailwind v4 and is published to GitHub Pages. This post is a short tour of the new content format — copy, edit, ship.

Colored callouts

Tip

Spin up a new post with: npm run new-post "Your post title". It creates the folder and a frontmatter skeleton.

Info

Five types are available: info, success, warning, danger, tip. Each has its own color and icon.

Heads up

Relative ./image.png paths inside Markdown are automatically rewritten to /blog/<slug>/image.png. Just drop images next to the post.

Caution

Because we ship with output: 'export', runtime features like cookies(), server actions, and request rewrites do not work — everything stays fully static.

Code blocks — language-aware highlighting

Python:

automation.py
from netmiko import ConnectHandler
 
def add(a: int, b: int) -> int:
    return a + b
 
def connect(host: str) -> ConnectHandler:
    """Open an SSH session to a Cisco device."""
    return ConnectHandler(device_type="cisco_ios", host=host)

Bash:

# Create a new post
npm run new-post "My new post"
git add . && git commit -m "post: my-new-post" && git push

YAML:

.github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]

Inline syntax: variables like count and strings like "hello" get colored individually. Plain inline code works too.

YouTube embeds

Full width (default):

60% wide, centered:

Tables, lists, and more

FeatureStatusNotes
Static export✓GitHub Pages
Dark/light mode✓Defaults to dark
Pagefind search✓After npm run build
Giscus commentsConfig.In src/lib/site.ts

A blockquote — replaces the yellow-bordered boxes from Ghost.

What's next

  • Import existing Ghost posts: npm run migrate <ghost-export.json>
  • Tweak the palette in src/app/globals.css (CSS variables)
  • Update social links in src/lib/social.ts

Happy writing 🚀