Ryze

Ryze is a modern, reader-friendly and content-first starter built with Astro v5, Tailwind CSS v4, and optimized for SEO and responsiveness across all devices. Perfect for personal blogs and content-focused websites.

Read the blog posts to understand how Ryze is built and how to customize it for your own site.

Features

• Modern & minimalist design with responsive layout
• Light & Dark mode with system preference detection
• Static site generation for optimal performance
• Automatic sitemap and RSS feed generation
• SEO optimization (Open Graph, Twitter Cards, Canonical URLs)
• Markdown-based blog posts with frontmatter metadata
• Syntax highlighting with Shiki
• Featured posts and tag-based organization
• Archive and chronological browsing
• Reading time estimation
• TypeScript support
• Component-based architecture with Astro & React
• Tailwind CSS v4 for styling
• Code quality tools (ESLint & Prettier)

Lighhouse Performance Scores

Project Structure

Ryze
├── public/
│   └── favicon.svg
│
├── src/
│   ├── assets/
│   │   └── ... (static assets like fonts, icons)
│   ├── blog/
│   │   ├── post-title.md
│   │   ├── another-post.md
│   │   └── ... (add your posts here)
│   │
│   ├── components/
|   |   ├── CopyButton.astro
│   │   ├── FeatureCard.astro
│   │   ├── Featured.astro
│   │   ├── Footer.astro
│   │   ├── Header.astro
│   │   ├── Introduction.astro
│   │   ├── Navigation.astro
│   │   ├── Newsletterastro
│   │   ├── Pagination.astro
│   │   ├── PostCard.astro
│   │   ├── ProgressBar.tsx
│   │   ├── Seo.astro
│   │   ├── Socials.astro
│   │   ├── ThemeToggle.tsx
│   │   ├── Title.astro
│   │   └── Year.astro
│   │
│   ├── layouts/
│   │   ├── BaseLayout.astro
│   │   └── BlogLayout.astro
│   │
│   ├── pages/
│   │   ├── index.astro
│   │   ├── [...slug].astro
│   │   ├── 404.astro
│   │   ├── rss.xml.ts
│   │   ├── robots.txt.ts
│   │   ├── archive/
│   │   │   ├── [page].astro
│   │   │   └── [year]/[page].astro
│   │   └── tags/
│   │       ├── index.astro
│   │       └── [tag]/[page].astro
│   │
│   ├── styles/
│   │   ├── global.css
│   │   └── typography.css
│   │
│   └── content.config.ts
│
├── .gitignore
├── .prettierrc
├── astro.config.mjs
├── tsconfig.json
├── eslint.config.js
├── package.json
├── LICENSE
└── README.md

Tech Stack

• Astro v5 - Static site generator
• React - UI library for interactive components
• TypeScript - Typed JavaScript superset
• Tailwind CSS v4 - Utility-first CSS framework
• Tabler Icons - Icon library
• Fontsource - Self-hosted web fonts
• Cloudflare Pages - Deployment platform
• Shiki - Syntax highlighting
• RSS - RSS feed generation
• Sitemap - Sitemap generation
• ESLint & Prettier - Code quality and formatting

Installation

# Clone or download the project
git clone https://github.com/8366888C/Ryze.git
cd Ryze

# Install dependencies
npm install

# Start development server
npm run dev

The site will be available at http://localhost:4321

Commands

Command	Description
npm run dev	Start local development server
npm run build	Build production-ready static site
npm run preview	Preview production build locally
npm run astro ...	Run Astro CLI commands

License

This project is open source. See LICENSE for more information.