Suzu 🎐

English | 中文 | 日本語

Suzu - "鈴" in Japanese, meaning "bell" - is a minimalist blog template built with Next.js and pure Markdown.

|

• ZL Asica's Blog 🌸
  A live demo of the Suzu Blog template showcasing its features and styles.

✨ Features

• Next.js: A modern web framework supporting both server-side rendering (SSR) and static site generation (SSG).
• Lightning Fast: Ultra-high performance with a sleek and minimal design.
• Markdown Support: Simplify your writing experience with features like:
  • Code Highlighting: Includes language tags and one-click copy functionality.
  • LaTeX: Beautiful formula rendering.
  • Optimized Images: Efficient image loading powered by Next.js.
  • Link Preloading: Improves navigation speed and user experience.
• SEO Optimized: Automatically generates sitemap.xml, robots.txt, manifest.json, Open Graph, Twitter Cards, and more.
• Multi-Language Support: Built-in support for English, Chinese, Japanese, etc., automatically configured via config.yml.
• Adaptive Light/Dark Themes: Provides a seamless dark mode experience based on system preferences.
• RSS Feed: Automatically generated RSS feed for your blog.
• Accessibility (A11Y) Enhanced:
  • Semantic HTML and ARIA-compliant components.
  • Alt attributes for all images and icons.
  • WCAG-compliant color contrast for optimal readability.

🚀 Get Started

1. Use the Template

Click the Use this template button to create your own blog repository.

2. Configure Site Information

Edit config.yml to set your site name, description, author details, and more.

3. Write Your Posts

• Place Markdown posts in the posts folder, where the filename becomes the post URL.
• Edit files in the posts/_pages directory to update your "About" or "Friends" pages.

4. Deploy

• Cloud Hosting (Recommended): Use Vercel. Import your project, and it will be automatically deployed.

• Local Deployment/Preview: Install Node.js, then run:

  pnpm install
  pnpm dev

5. Keep Your Blog Updated

By default, GitHub Actions sync the latest updates from the Suzu Blog template to your repository weekly.
Ignored directories during sync include .github, public, posts, and config.yml.

🏗️ Project Structure

.
├── config.yml                # Global configuration file
├── posts                     # Markdown posts directory
│   └── _pages                # Special pages (About/Friends)
├── public                    # Static assets directory
│   └── images                # Image resources
├── src                       # Project source code
│   ├── app                   # Next.js application directory
│   ├── components            # Reusable components
│   ├── services              # Logic for content parsing, configuration, etc.
│   └── types.d.ts            # Global type definitions
├── tailwind.config.ts        # Tailwind CSS configuration
├── package.json              # Project dependencies and scripts
└── pnpm-lock.yaml            # pnpm dependency lock file

❤️ About Suzu

After years of frustration with the maintenance, security risks, and performance issues of WordPress, I decided to create Suzu Blog using Next.js. It is simple, efficient, and highly customizable, designed for anyone looking to build a modern blog quickly.

🔗 Community Support

Contribute: Contributions are welcome! Please refer to the Contribution Guide.