Setup Next.js blog under a minute
Tags: tailwindcss, javascript, webdev, nextjs
Published: 2023-01-07 15:41:08

The title pretty much gives it away. I have built an open-source tool that you can use to build a Next.js blog with Markdown in under a minute without looking at tutorials online.

When I was building my blog with Next.js last year, I had to read a lot of documentation to develop the basic infrastructure. So when I was thinking about 2023 and my goals in terms of open-source, I got this idea to build an unopinionated tool that anyone can use to set up a Next.js blog site quickly.

Hence, introducing you to [create-nextjs-blog](https://github.com/msaaddev/create-nextjs-blog).

## create-nextjs-blog

Let’s look at what [create-nextjs-blog](https://github.com/msaaddev/create-nextjs-blog) has to offer right now:

- **Blog:** Run a single command to set up TypeScript or JavaScript blog
- **Tailwind CSS:** Supports Tailwind CSS out of the box so you don’t have to set it up if you want to use it for your blog
- **Unopinionated:** Completely unopinionated meaning you can build whatever UI you want without thinking about breaking anything
- **Category**: Easily create different blog categories with each category having its individual page where all the blogs of that category are listed.
- **Post:** Create a new blog post by creating a new markdown file inside the `posts` directory
- **Route:** Automatically create routes for your blog posts based on the markdown file name. For instance, if the file name is `hello-world.md`, its route will be `/blog/hello-world`.
- **SEO:** Offers basic SEO using markdown file frontmatter
- **Markdown components:** Build React components and use them in your blog markdown file

[*Live demo of the blog*](https://create-nextjs-blog.vercel.app/blog)

## Installation

```sh
# use it with npx (recommended)
npx create-nextjs-blog@latest

# install the CLI globally
npm i -g create-nextjs-blog@latest
```

## Usage

```sh
# npx: create a new Next.js blog
npx create-nextjs-blog@latest

# npx create a next Next.js blog with TypeScript
npx create-nextjs-blog@latest --typescript

# npx create a next Next.js blog with Tailwind CSS & TypeScript
npx create-nextjs-blog@latest --withTailwind

# npx create a next Next.js blog with JavaScript
npx create-nextjs-blog@latest --javascript

# global: create a new Next.js blog
cnb

# global: create a next Next.js blog with TypeScript
cnb --typescript

# global: create a next Next.js blog with Tailwind CSS & TypeScript
cnb --withTailwind

# global: create a next Next.js blog with JavaScript
cnb --javascript
```

>Once the blog is set up, run the Next.js app and navigate to [`http://localhost:3000/blog`](http://localhost:3000/blog) to see your blog. I highly recommend using [Vercel](https://vercel.com) to deploy your blog.

## Demo

![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnsaz5nv2kzwsj8us9n6.gif)

You can read the complete documentation [here](https://github.com/msaaddev/create-nextjs-blog) to learn more about how to create a blog post, new category, and React components that you can call in your markdown file.

## Wrap Up

That’s all, folks! If you find this tool useful, don’t forget to give it a [star](https://github.com/msaaddev/create-nextjs-blog) on GitHub. Also, I am looking to expand this tool and I would highly appreciate your feature requests. You can use the GitHub [issues](https://github.com/msaaddev/create-nextjs-blog/issues) to submit them. 

Cheerios 🙌