Blog Starter Kit

A statically generated blog example using Next.js and Markdown.

Deploy

View Demo

Repository

Framework

Use Case

CSS

A statically generated blog example using Next.js, Markdown, and TypeScript

This is the existing blog-starter plus TypeScript.

This example showcases 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.

Demo

https://next-blog-starter.vercel.app/

Deploy your own

Related examples

How to use

Execute

create-next-app

with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example blog-starter blog-starter-app

yarn create next-app --example blog-starter blog-starter-app

pnpm create next-app --example blog-starter blog-starter-app

Your blog should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.

Deploy it to the cloud with Vercel (Documentation).

Notes

blog-starter

uses Tailwind CSS (v3.0).

← Back to Templates

Blog Starter Kit

A statically generated blog example using Next.js and Markdown.

Repository

Framework

Use Case

CSS

A statically generated blog example using Next.js, Markdown, and TypeScript

This is the existing blog-starter plus TypeScript.

This example showcases 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.

Demo

https://next-blog-starter.vercel.app/

Deploy your own

Related examples

How to use

Execute

create-next-app

with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example blog-starter blog-starter-app

yarn create next-app --example blog-starter blog-starter-app

pnpm create next-app --example blog-starter blog-starter-app

Your blog should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.

Deploy it to the cloud with Vercel (Documentation).

Notes

blog-starter

uses Tailwind CSS (v3.0).

Related Templates

Blog (with comments)

Next.js blog application with Auth0 and Upstash

by Auth0

Nextra: Docs Starter Kit

Simple, powerful and flexible markdown-powered docs site. Built with Next.js.

by ▲ Vercel

Next.js Boilerplate

Get started with Next.js and React in seconds.

by ▲ Vercel

Platforms Starter Kit

Next.js template for building multi-tenant applications with the App Router and Redis.

by ▲ Vercel

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential