A free and open-source starter by MakerKit.

Blog Starter Template with Next.js, MDX and Tailwind CSS

This is a Next.js project bootstrapped with create-next-app.

This blog starter is the perfect foundation for writing your next blog, portfolio or online publication using Next.js and Tailwind CSS.

Features

✅ Fully responsive Blog/Portfolio Site
📄 Write your articles with all the power of MDX
⚡ Core Web Vitals = 100
🚀 Search Engine Optimized (SEO) out-of-the-box
📂 Sitemap and RSS generated automatically
✨ Written with strict Typescript, validated with EsLint, formatted with Prettier

Getting Started

Clone the repository:

git clone https://github.com/makerkit/next-blog-kit

Rename your project and jump into the folder. Then, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Setting the upstream folder

If you want, reinitialize the git repository and set this repository as your upstream, so you can continue getting updates:

rm -rf .git
git init
git remote add upstream https://github.com/makerkit/next-blog-kit

To keep your repository up-to-date with this, use git pull:

git pull upstream main

Solve the eventual conflicts and merge 😃

Configuration

Open the configuration file at ./configuration.ts. It will have the following content:

const configuration = {
  site: {
    name: '',
    description: '',
    themeColor: '',
    siteUrl: '',
    siteName: '',
    twitterHandle: '',
    githubHandle: '',
    language: 'en',
  },
  blog: {
    maxReadMorePosts: 6,
  },
  production: process.env.NODE_ENV === 'production',
};

Update it with your own data, or leave as is to begin with.

Add Articles, Collections and Authors

Before creating a blog post, we define which collection it belongs to and the author of the post.

To define a collection, create a JSON file at _collctions/:

{
  "name": "Tutorials",
  "emoji": "🖥️"
}

Alternatively, you can choose to assign a picture to each collection (or neither):

{
  "name": "Tutorials",
  "picture": "/assets/images/tutorials.png"
}

Next, we need to add the author of the article. Add a JSON file at _authors:

{
  "name": "MakerKit",
  "picture": "/assets/images/makerkit.png",
  "url": "https://twitter.com/makerkit_dev"
}

We can now create a blog post. Add an MDX file at _posts:

---
title: 'Dextera Sibi Orbes'
collection: '_collections/lorem-ipsum.json'
author: '_authors/makerkit.json'
date: 2022-03-30
live: true
image: ''
description: "Lorem markdownum ictu; leti quae, paenituisse venere. Liquet praemia omne di
amarunt dicta."
---

As you can see, the properties collection and author are references to the path of each.s

Building this from scratch

For mor information about building this codebase from scratch, take a look at the article Create an MDX-powered Blog with Next.js.

Deploy on Vercel

The easiest way to deploy this app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.