https://github.com/frontendweb3/open-blog

Open blog is an open-source blog template to build with nextjs, and tailwind CSS.
https://github.com/frontendweb3/open-blog

nextjs nextjs-blog nextjs-blog-template nextjs-template react tailwind-css tailwind-css-template tailwindcss

Last synced: 29 days ago
JSON representation

Open blog is an open-source blog template to build with nextjs, and tailwind CSS.

• Host: GitHub
• URL: https://github.com/frontendweb3/open-blog
• Owner: frontendweb3
• Created: 2023-03-08T11:02:07.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-04T15:27:34.000Z (5 months ago)
• Last Synced: 2025-03-20T20:14:10.936Z (about 1 month ago)
• Topics: nextjs, nextjs-blog, nextjs-blog-template, nextjs-template, react, tailwind-css, tailwind-css-template, tailwindcss
• Language: TypeScript
• Homepage: https://open-blog-beta.vercel.app
• Size: 9.35 MB
• Stars: 41
• Watchers: 0
• Forks: 16
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-nextjs - Open Blog - Open blog is a bloging template built with nextjs, tailwind CSS and markdown. (Next.js blog template)

README

        
The Open Blog is a open source template is design and built with Next.js 15, Shadcn UI and tailwind CSS. 

Take a look at the demo of the Minimalist template!

## Demo

[![Demo](/.github/open-blog-demo.gif)](https://open-blog-beta.vercel.app/)

## Our Template Stack

![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white)

![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)

![Markdown](https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white)

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

![Shadcn UI](https://img.shields.io/badge/Shadcn/ui-white.svg?&logo=data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+c2hhZGNuL3VpPC90aXRsZT48cGF0aCBkPSJNMjIuMjE5IDExLjc4NCAxMS43ODQgMjIuMjE5Yy0uNDA3LjQwNy0uNDA3IDEuMDY4IDAgMS40NzYuNDA3LjQwNyAxLjA2OC40MDcgMS40NzYgMEwyMy42OTUgMTMuMjZjLjQwNy0uNDA4LjQwNy0xLjA2OSAwLTEuNDc2LS40MDgtLjQwNy0xLjA2OS0uNDA3LTEuNDc2IDBaTTIwLjEzMi4zMDUuMzA1IDIwLjEzMmMtLjQwNy40MDctLjQwNyAxLjA2OCAwIDEuNDc2LjQwOC40MDcgMS4wNjkuNDA3IDEuNDc2IDBMMjEuNjA4IDEuNzgxYy40MDctLjQwNy40MDctMS4wNjggMC0xLjQ3Ni0uNDA4LS40MDctMS4wNjktLjQwNy0xLjQ3NiAwWiIvPjwvc3ZnPg==)

## Pictures

![Home](./.github/open-blog.png)

![Reading Page](./.github/open-blog-read.png)

![Tag Page](./.github/open-blog-tag.png)

![Search Page](./.github/open-blog-search.png)

![Card List](./.github/open-blog-card-list.png)

## Clone Repository

First, download the Next.js open blog template code from the GitHub repository using the following command:

```bash

git clone git clone https://github.com/frontendweb3/open-blog.git

```

Then follow the below **steps**:

```markdown

# step 1

cd open-blog

# step 2

pnpm install

#  or 

yarn install

# step 3

yarn dev

#    or

pnpm dev

```

### Our primary stack for the Open Blog template includes:

1. Next.js

2. TypeScript

3. PNPM

4. Shadcn UI

5. Tailwind CSS

## Additional packages:

1. Lucide icons

2. @tailwindcss/typography

3. fuse.js

After downloading, open your browser and navigate to [http://localhost:3000](http://localhost:3000) to see the result.