This blog starter is for developers or anyone with editing Markdown files and git to manage the files. This example extends Next.js's Static Generation feature using Markdown files as the data source.
The blog posts are stored in /_posts as Markdown files with front matter support. Adding a new Markdown file in there will create a new blog post.
To create the blog posts we use remark and remark-html to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by gray-matter and also sent in props to the page.
Option 1: Use Template And Deploy:
- makes a copy of this repo in your own Github account
- deploys to Vercel--the hosting platform built for Next.js
Option 2: Clone this repository if you have your own plan for deploying
or simply click the Use This Template button above.
- Create an
.mdxfile in the./src/_postsdirectory - Set
draft: truein the post metadata if you're not ready to publish - Place locally referenced images in the
./publicfolder - Add html overrides and custom React components used to
./src/components/mdx/index.tsx
Your blog should be up and running on http://localhost:3000
Deploy it to the cloud with Vercel (Documentation).
This blog-starter-typescript uses Tailwind CSS. To control the generated stylesheet's filesize, this example uses Tailwind CSS' v1.4 purge option to remove unused CSS.
Inspired by: