Blog

How to write articles and boost your SEO.

Writing blog posts is the main activity to start working on the SEO of your product, and write valuable content for your users or people potentially interested in your product.

Shipped provides support for MDX-based blogging.

MDX is the Markdown for JSX syntax, you can learn more about it here https://mdxjs.com/

To create a new blog post follow these steps:

1. Create a new .mdx file in the folder blogposts

2. Include the following metadata at the top of the file

---
title: "Blogpost title"
description: "Blogpost description"
date: "15 Jan, 2024"
slug: "blogpost-slug"
ogImage:
  url: "https://....jpg"
---

After the metadata, you can add the blog post content in Markdown format.

In this example, the blogpost will be available at http://localhost:3000/blog/blogpost-slug

Images

You can use both absolute and relative paths for images.

Examples:

Absolute path: https://yourhosting/image.jpg

Relative path: ../blogpostsimages/image.jpg

To use relative paths, you need to add the image to your codebase.

For instance, to use this relative path ../blogpostsimages/image.jpg you need to place the file image.jpg into the folder /blogpostsimages of your project.

Important

The markdown file and the slug metadata, need to have the same value to properly work.

Embeds

Shipped currently supports the following embeds: Loom, YouTube, and Tweet.

<Loom id="loomVideoId"/>
<YouTube id="youtubeVideoId" width="100%" height="100%" />
<TweetEmbed tweetId="tweetId" />

Image hosting

To start, I recommend placing the images inside your project.

If you are using Vercel to host your website (the easiest solution to get started), those images will consume some bandwidth, but if you don't have high traffic, you will certainly remain within the limits (100GB for free, 1TB on the $20/month plan).

If you prefer to use a CDN instead, you can use your favorite CDN solution (I use AWS S3 with Cloudfront for instance), but other alternatives are Cloudinary, and CloudFlare.

Advanced

Shipped uses the library next-mdx-remote under the hood to parse the MDX files. For advanced customizations, please refer to the documentation of the library.