• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
  • Global Configuration
    • Environment Variables
    • Feature Flags
    • Blog
    • Documentation
This documentation is for a legacy version of Remix and Supabase. For the latest version, please visit the Remix and Supabase V2 documentation

Add Blog posts to your Remix Supabase application

Learn how to add blog posts in your MakerKit Remix Supabase application

We can add your website's blog posts within the src/content/posts folder.

Add a new blog post

To add a new blog post, create a new markdown file within the src/content/posts folder. The file name should be the slug of the blog post. For example, if you want to create a blog post with the slug hello-world, create a file called hello-world.mdx.

For example, the following file is a blog post with the slug lorem-ipsum:

mdx
---
title: Lorem Ipsum
date: 2023-09-23
live: true
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
image: "/assets/images/posts/lorem-ipsum.webp"
---

Blog post metadata

Each blog post should have the following metadata:

  • title: The title of the blog post
  • date: The date of the blog post
  • live: Whether the blog post should be visible on the website
  • description: The description of the blog post
  • image: The image of the blog post

Blog post content

The content of the blog post should be written in markdown. You can use the MDX syntax to add React components within the markdown content.

Additionally, we included multiple components that you can use to add content to your blog post:

  • Image: Add an image to your blog post (a wrapper around the next/image component)
  • Video: Add a video to your blog post. This is lazy-loaded and includes a loading spinner while the video is loading
  • Alert: Add an alert to your blog post
  • LazyRender: Lazy-load a React component within your blog post
  • TweetEmbed: Embed a tweet within your blog post
On this page
  1. Add a new blog post
    1. Blog post metadata
      1. Blog post content