A free and open-source starter by MakerKit.
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.
- ✅ 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
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.
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 😃
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.
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
For mor information about building this codebase from scratch, take a look at the article Create an MDX-powered Blog with Next.js.
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.