← All tutorials
🟢
Kiro · Next.js + Markdown
Build a Blog Engine with Kiro
Prerequisites
- ✓ Kiro IDE installed
- ✓ Node.js installed
- ✓ Git installed
- ✓ Qmmit installed
- ✓ A Qmmit account with CLI token
1
Create the project
Scaffold a Next.js app.
npx create-next-app@latest blog-engine --typescript --tailwind --app cd blog-engine git add . && git commit -m "initial: next.js app"
2
Set up Qmmit
Initialize tracking.
qmmit init
⚡
What Qmmit does here
Detects Kiro via workspace-sessions directory. Installs hooks.
3
Open in Kiro and build the blog
Open the project in Kiro. Ask it to create the blog structure.
# Open Kiro, then in chat: # "Create a blog engine that reads markdown files from a /posts directory. # Each post has frontmatter with title, date, and description. # Create a posts listing page and individual post pages."
💡
Kiro saves sessions as JSON files in workspace-sessions/<base64-path>/. Qmmit reads these and filters by workspaceDirectory.
4
Ask Kiro to add styling
Ask Kiro to style the blog with Tailwind.
# In Kiro: # "Style the blog with Tailwind CSS. Dark theme, clean typography, # responsive layout, code block syntax highlighting."
5
Ask Kiro to add a sample post
Create some content.
# In Kiro: # "Create 3 sample markdown blog posts about web development. # Include code examples and frontmatter."
6
Test it
Run the dev server and check.
npm run dev # Open http://localhost:3000
7
Commit
Commit everything.
git add . git commit -m "feat: markdown blog engine" # [qmmit] 3 prompt(s) tracked (kiro) → jkl3456
⚡
What Qmmit does here
Reads Kiro workspace-sessions/*.json, extracts user messages, filters by workspaceDirectory matching this project.
8
Push and verify
Push and check dashboard.
git push -u origin main # Check: qmmit.dev/yourusername