A modern, elegant, and performance-focused blogging theme built for developers.

English | 简体中文

Demo · Report Bug · Request Feature

Introduction

Litos is a comprehensive blogging theme crafted with Astro, React, and TailwindCSS. It is designed to provide developers with a clean, professional, and highly customizable platform to showcase their work, thoughts, and photography.

Unlike traditional themes, Litos emphasizes visual aesthetics without compromising on performance. It features fluid animations, a polished design system, and a robust set of built-in components to help you build your personal brand effectively.

Key Features

• Modern Architecture — Astro 5 + React 19 for blazing fast performance and dynamic interactivity.
• Elegant Design — Fully responsive, meticulously crafted UI with TailwindCSS 4.
• Posts — Multiple layout options (compact, cover image) with rich Markdown support.
• Code Highlighting — Integrated Expressive Code for beautiful syntax highlighting.
• Math Support — KaTeX for rendering mathematical equations.
• SEO — Built-in sitemaps, robots.txt, and meta tags.
• Analytics — Configurable Vercount and Umami analytics.
• Dark Mode — Native light and dark theme support.

Deploy

Deploy your own Litos blog with one click:

Getting Started

Prerequisites

• Node.js (v18 or higher)
• pnpm (recommended)

Installation

1. Clone the repository

   git clone https://github.com/ndEX/Litos.git
   cd Litos

2. Install dependencies

   pnpm install

3. Start the development server

   pnpm dev

   Your site should now be running at http://localhost:4321.

Configuration

Content and theme behavior are split across:

• src/content/site.json for site metadata, homepage content, navigation links, hero metric, and social links
• src/config.ts for theme behavior and posts configuration

Site Settings

{
  "default": {
    "site": {
      "title": "Litos",
      "description": "Your site description here.",
      "website": "https://your-domain.com",
      "author": "Your Name"
    }
  }
}

Navigation

Header and footer links can be managed via headerLinks and footerLinks in src/content/site.json.

Scripts

Script	Description
pnpm dev	Starts the local development server.
pnpm build	Builds the site for production.
pnpm preview	Previews the built production site locally.
pnpm format	Formats code using Prettier.
pnpm check	Runs Astro check for diagnostics.

License

Distributed under the MIT License. See MIT LICENSE for more information.

Star History

---

made with 💗 by ndEX !