An open API service indexing awesome lists of open source software.

https://github.com/blopa/zenkai-zone-blog


https://github.com/blopa/zenkai-zone-blog

Last synced: 9 months ago
JSON representation

Awesome Lists containing this project

README

          

# Zenkai Zone Blog

A modern, statically generated blog built with Next.js, focused on action figure news, reviews, and announcements.

## Features

- 🚀 **Static Site Generation (SSG)** - Fully static, JAMstack-ready
- 📱 **Responsive Design** - Works perfectly on all devices
- 🎨 **Modern UI** - Built with Tailwind CSS and shadcn/ui
- 🔍 **Search Functionality** - Find posts quickly
- 🏷️ **Tags & Categories** - Organized content structure
- 📖 **Markdown Support** - Easy content management
- 🌙 **Dark Mode** - Toggle between light and dark themes
- ⚡ **Fast Performance** - Optimized for speed

## Getting Started

### Prerequisites

- Node.js 18+
- npm or yarn

### Installation

1. Clone the repository:
\`\`\`bash
git clone
cd zenkai-zone-blog
\`\`\`

2. Install dependencies:
\`\`\`bash
npm install
\`\`\`

3. Run the development server:
\`\`\`bash
npm run dev
\`\`\`

4. Open [http://localhost:3000](http://localhost:3000) in your browser.

### Building for Production

To build the static site:

\`\`\`bash
npm run build
\`\`\`

This will generate a static site in the `out` directory that can be deployed to any static hosting service.

## Content Management

### Adding New Posts

1. Create a new markdown file in `data/blog/YYYY/` directory
2. Add frontmatter with required fields:

\`\`\`markdown
---
title: "Your Post Title"
date: "2024-01-01"
excerpt: "Brief description of your post"
coverImage: "/path/to/image.jpg"
author:
name: "Author Name"
avatar: "/path/to/avatar.jpg"
category: "Category Name"
tags: ["tag1", "tag2", "tag3"]
readingTime: "5 min read"
---

Your post content here...
\`\`\`

### Organizing Content

- **Categories**: Group related posts (e.g., "Dragon Ball", "One Piece", "Naruto")
- **Tags**: Add specific keywords for better discoverability
- **Images**: Place images in the `public` directory and reference them in posts

## Deployment

This blog is optimized for JAMstack deployment. You can deploy it to:

- **Vercel** (recommended)
- **Netlify**
- **GitHub Pages**
- **Any static hosting service**

### Deploy to Vercel

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Vercel will automatically detect Next.js and deploy your site

### Deploy to Netlify

1. Build the site: `npm run build`
2. Upload the `out` directory to Netlify
3. Configure redirects if needed

## Customization

### Styling

- Modify `tailwind.config.ts` for theme customization
- Update `app/globals.css` for global styles
- Components use shadcn/ui for consistent design

### Configuration

- Update `lib/constants.ts` for site-wide settings
- Modify `next.config.mjs` for build configuration

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

## License

This project is open source and available under the [MIT License](LICENSE).