https://github.com/phucbm/nextra-blog-starter

https://github.com/phucbm/nextra-blog-starter

giscus nextjs nextra nextra-blog pagefind tailwindcss

Last synced: about 7 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/phucbm/nextra-blog-starter
• Owner: phucbm
• Created: 2025-01-30T09:06:25.000Z (3 days ago)
• Default Branch: main
• Last Pushed: 2025-02-01T05:41:46.000Z (about 19 hours ago)
• Last Synced: 2025-02-01T06:24:54.349Z (about 18 hours ago)
• Topics: giscus, nextjs, nextra, nextra-blog, pagefind, tailwindcss
• Language: MDX
• Homepage: https://nextra-blog-starter-v4.vercel.app
• Size: 1.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Nextra Blog v4 Starter

A modern, feature-rich blog template built with [Nextra v4](https://nextra.site).

## 🚀 Demo

- [Official Nextra Documentation](https://nextra.site)

- [Live Demo of This Template](https://nextra-blog-v4.vercel.app/)

## Features

- [Nextra 4](https://nextra.site/docs) with Next.js 15 + React 19 + TypeScript

- [shadcn/ui](https://ui.shadcn.com/) and Tailwind CSS

- [Pagefind](https://the-guild.dev/blog/nextra-4#new-search-engine--pagefind) for search engine

- [Giscus](https://giscus.app/) for commenting system

- [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) in Next.js App Router with [next-view-transitions](https://github.com/shuding/next-view-transitions)

## 🛠 Getting Started

### Prerequisites

- Node.js 18.0 or later

- pnpm

### Installation

1. Clone this template:

```bash

git clone https://github.com/phucbm/nextra-blog-v4-starter.git

cd nextra-blog-v4

```

2. Install dependencies:

```bash

pnpm install

```

3. Run the development server:

```bash

pnpm dev

```

4. Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.

## 📝 Usage

### Adding New Posts

1. Create a new `.mdx` file in the `content` directory

2. Add your front matter at the top of the file:

```yaml

---

title: Your Post Title

date: 2025/1/30

description: A brief description of your post

tags: [ "web development", "react" ]

author: Your Name

---

```

3. Write your content in MDX format below the front matter

### Customization

- Edit `theme.config.tsx` to customize your blog's appearance and behavior

- Modify styles in `styles/global.css`

- Update site metadata in `pages/_app.tsx`

---

Created with ❤️ by [Your Name]

Don't forget to ⭐ this repository if you found it helpful!