---
title: "Blog Starter Kit"
description: "A statically generated blog example using Next.js and Markdown."
url: "https://vercel.com/templates/next.js/blog-starter-kit"
links:
  repository: "https://github.com/vercel/next.js/tree/canary/examples/blog-starter"
  demo: "https://next-blog-starter.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Blog+Starter+Kit&demo-description=A+statically+generated+blog+example+using+Next.js+and+Markdown.&demo-url=https%3A%2F%2Fnext-blog-starter.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F9HIawEMUBUpmhHTcnFscc%2F4d16c261512ad87d6cc5fefb32510381%2FCleanShot_2022-03-09_at_19.30.51.png&project-name=Blog+Starter+Kit&repository-name=blog-starter-kit&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fblog-starter&from=templates"
---

# Blog Starter Kit

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

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

This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) 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`](https://github.com/remarkjs/remark) and [`remark-html`](https://github.com/remarkjs/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`](https://github.com/jonschlinkert/gray-matter) and also sent in props to the page.

## Preview

Preview the example live on [StackBlitz](http://stackblitz.com/):

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog-starter)

## Demo

[https://next-blog-starter.vercel.app/](https://next-blog-starter.vercel.app/)

## Deploy your own

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/blog-starter&project-name=blog-starter&repository-name=blog-starter)

## How to use

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

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

```

or

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

```

Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).

Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

# Notes

This blog-starter uses [Tailwind CSS](https://tailwindcss.com). To control the generated stylesheet's filesize, this example uses Tailwind CSS' v2.0 [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS.

## Related Templates

### [Nextra: Docs Starter Kit](https://vercel.com/templates/next.js/documentation-starter-kit)

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

### [Next.js Boilerplate](https://vercel.com/templates/next.js/nextjs-boilerplate)

Get started with Next.js and React in seconds.

### [Blog (with comments)](https://vercel.com/templates/next.js/blog-with-comments)

Next.js blog application with Auth0 and Upstash

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.