Skip to main content

​
Create a blog page

Welcome! This guide will help you set up a simple blog that uses MDX files (they look like normal text files). We’ll use a ready-made blog starter so you can get going quickly. If you prefer, you can browse the starter here: https://github.com/magicuidesign/blog-template.

​
What you’ll get

  • A clean blog website
  • Posts written as plain files ending with .mdx
  • A place to add your posts and publish them

​
Step 1: Get the blog template

  1. Open the template page: https://github.com/magicuidesign/blog-template.
  2. Click “Use this template” or “Fork” to copy it to your account.
  3. Download it to your computer (or clone it if you use Git tools).

​
Step 2: Open the project

  1. Open the folder you downloaded in your code editor (for example VS Code).
  2. You’ll see folders like app, components, and more. Don’t worry about them.

​
Step 3: Install and run (one-time setup)

If you have a developer helping you, ask them to run the app once to make sure it starts. They’ll typically:
  • Install packages
  • Start the website locally
If you’re doing it yourself and comfortable with a terminal:
  1. Open a terminal in the project folder
  2. Run npm install
  3. Run npm run dev
  4. Open the link it prints (usually http://localhost:3000)
It’s okay to skip this step if you’re only adding posts and someone else handles publishing.

​
Step 4: Where your blog posts live

Your posts will be simple .mdx files stored in a folder. A common place is lib/blogs inside your project. If that folder doesn’t exist, create it. Example folder: 
lib/
  blogs/
    my-first-post.mdx

​
Step 5: Create your first post

  1. Inside lib/blogs, create a new file, for example: my-first-post.mdx.
  2. Paste this example and change it to your needs:
---
title: My first blog post
description: A short summary of what this post is about.
date: 2025-10-03
author: Your Name
tags: [getting-started]
---

# My first blog post

Welcome! This is my first post. You can write text, add images, and format content easily.

## A section

Write your content here. Keep paragraphs short and clear.

> Tip: You can add quotes like this.
  1. Save the file.

​
Step 6: See your post on the site

If the site is running locally, refresh the page. Your blog should list the new post. If you’re publishing to the internet, ask your developer to deploy the site (for example to Vercel). Once deployed, your post will appear automatically. Repeat Step 5 for each new post. One file per post. Use a short, simple filename ending in .mdx.

​
Tips for great posts

  • Keep titles short and clear
  • Start with a short summary in the description
  • Use headings to break up long content
  • Add images when they help explain
At the end: Sarah, your digital employee, can create .mdx blog posts for you in the correct format and place them in lib/blogs. Those files will be picked up and shown on your blog automatically.
⌘I