Gerrad Zhang
Modern Personal Blog
Astro React Tailwind CSS TypeScript Blog Official Theme

Modern Personal Blog

A modern, fast, and feature-rich blog platform built with Astro, React, and Tailwind CSS. Available on Astro's official theme directory.

Created: (Updated: )
Live Demo View Code

Modern Personal Blog

This is a modern, fast, and feature-rich blog platform built with Astro, React, and Tailwind CSS. Now available on Astro’s official theme directory!

This template combines the best of static site generation with dynamic features, creating a performant content management system perfect for personal blogs, portfolios, and project showcases.

Key Features

Content Management

  • MDX Support: Rich text formatting with React components in markdown
  • Hierarchical Organization: Categories and subjects for content structure
  • Tagging System: Related content discovery through tags
  • Featured Posts: Highlight important content
  • Draft Mode: Work on posts before publishing
  • Multi-language Support: Chinese and English content support

User Experience

  • Responsive Design: Three-column desktop layout with mobile optimization
  • Dark/Light Theme: Smooth theme transitions with user preference
  • Table of Contents: Auto-generated navigation for long posts
  • Search & Filter: Find content by tags, categories, and keywords
  • Optimized Navigation: Dynamic category menus and breadcrumbs

Performance & Technical

  • Static Site Generation: Lightning-fast page loads
  • Image Optimization: Automatic image optimization and lazy loading
  • SEO Optimized: Meta tags, Open Graph, JSON-LD, sitemap, and RSS
  • Type Safety: Full TypeScript support throughout the codebase
  • Modern Build Tools: Vite-powered development and build process

Technology Stack

  • Astro 4.0: Modern static site generator with Islands Architecture
  • React 18: Interactive components and client-side functionality
  • Tailwind CSS: Utility-first CSS framework for rapid styling
  • TypeScript: Type-safe development experience
  • MDX: Enhanced Markdown with component support
  • Vite: Fast build tooling and development server

Getting Started

This template is now available through the official Astro theme directory! You can use it in multiple ways:

# Create a new project using this official theme
npm create astro@latest -- --template modern-personal-blog

# Navigate to your project
cd your-project-name

# Install dependencies
npm install

# Start developing
npm run dev

Option 2: Clone from GitHub

# Clone the repository
git clone https://github.com/copyboy/product_whoami.git

# Navigate to the project directory
cd product_whoami

# Install dependencies
npm install

# Start the development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Option 3: Browse Official Theme Directory

Visit the Astro theme directory for detailed information, previews, and installation instructions.

Project Structure

src/
├── components/     # Reusable UI components
├── content/        # Blog posts and content collections
│   ├── blog/      # Blog posts (MDX)
│   └── projects/  # Project showcases
├── layouts/        # Page layouts
├── pages/         # Route pages
│   ├── blog/      # Blog post pages
│   ├── categories/ # Category pages with subject sub-pages
│   └── tags/      # Tag pages
├── styles/        # Global styles
└── utils/         # Utility functions

Content Management

Blog Posts

Blog posts are stored as MDX files in src/content/blog/. Each post supports:

  • Rich frontmatter with categories, tags, and metadata
  • MDX content with React components
  • Automatic slug generation and routing
  • Multi-language support (Chinese/English)

Project Showcases

Project information is stored in src/content/projects/ with support for:

  • Project descriptions and technical details
  • Repository and demo links
  • Technology stack information
  • Featured project highlighting

Customization

Site Configuration

Edit src/config/site.json to customize:

  • Site metadata and branding
  • Author information and location
  • Social media links
  • Feature toggles

Styling

  • Tailwind CSS: Modify tailwind.config.js for theme customization
  • Global Styles: Edit src/styles/global.css for custom styles
  • Components: Customize UI components in src/components/

Content Organization

  • Categories: Organize posts by main categories
  • Tags: Add descriptive tags for content discovery
  • Featured Content: Mark important posts and projects
Back to Projects