中文 | 日本語

Suzic's Blog System

Disclaimer: All code in this system was generated by AI.

Live Demo

A modern, static blog system built with React, Vite, and TypeScript.

Features

• Tech Stack: React 19, Vite, TypeScript
• Content: Markdown-based posts (Hexo-compatible frontmatter)
• Features:
  • Instant Search
  • Archives (Year/Month)
  • Tags & Categories
  • i18n Support
• Styling: Clean, responsive design
• Performance: Static site generation for posts data

Quick Start

The fastest way to create a new blog:

npm create s-blog@latest

The CLI will guide you through project setup. After initialization:

cd my-blog
npm run dev

Update Framework

Get the latest features and bug fixes:

npm update @s-blog/core

You only maintain your content files (src/posts/, src/config.ts, src/album.config.ts, public/albums/). Framework updates are delivered through the @s-blog/core package.

Manual Installation (Alternative)

If you prefer to set up manually:

git clone https://github.com/Suzichen/s-blog.git
cd s-blog
npm install
npm run dev

Build

Build for production:

npm run build

Configuration

Site configuration can be modified in src/config.ts:

• title: Website title
• description: Website description
• logo: Logo image path
• favicon: Favicon path
• siteUrl (optional): Production URL (e.g., https://s-blog.suzichen.me)
  • Required for SEO features like sitemap.xml, RSS feed, Open Graph tags
  • If not set, URL-dependent SEO features will be skipped
• author (optional): Author name for SEO metadata
• language (optional): Default language code (e.g., en, zh-CN, ja)

SEO Features

When siteUrl is configured, the build process automatically generates:

• SEO HTML files (dist/post/*.html) - Search engine friendly pages with meta tags, Open Graph tags, Twitter Cards, and JSON-LD structured data
• sitemap.xml - XML sitemap for search engines
• rss.xml - RSS 2.0 feed for subscribers
• robots.txt - Web crawler instructions

Writing Posts

Add your Markdown files to the src/posts directory. Top of the file should include frontmatter:

---
title: My Post Title
date: 2024-01-01 12:00:00
tags: [Tech, React]
categories: [Programming]
preview: A short description of the post meant for previews.
---

Album Module

The blog includes an optional album (photo gallery) module that allows you to organize and display photos.

Configuration

Edit src/album.config.ts to manage albums:

export const albumConfig: AlbumConfig = {
  enabled: true,
  albums: [
    { dir: 'travel-2024', name: '2024 Travel', cover: 'cover.jpg' },
    { dir: '春', cover: 'sakura.jpg' }, // CJK dirname, name defaults to dirname
  ],
};

• enabled: Toggle the entire album module on/off
• dir: Directory name under public/albums/ (letters, numbers, hyphens, underscores; CJK characters allowed; no spaces or path separators)
• name (optional): Display name for the album
• cover (optional): Cover photo filename

Adding Photos

Place your photos in public/albums/{dirname}/:

public/albums/travel-2024/
  photo1.jpg
  photo2.png
  cover.jpg

Supported formats: .jpg, .jpeg, .png, .webp, .heic

Building Album Data

npm run build:albums

This command:

1. Scans configured album directories
2. Generates WebP thumbnails (max 1080px long side) in thumbs/ subdirectories
3. Extracts EXIF metadata (camera, focal length, aperture, shutter speed, ISO)
4. Outputs JSON index files to public/generated/

Thumbnails are generated incrementally — unchanged photos are skipped.

Contributing

This project strictly prohibits manual coding. All code must be generated by AI.

AI Contributors

• Gemini 3 Pro
• Gemini 3.1 Pro
• Claude Sonnet 4.5
• Claude Opus 4.6