Hexo Theme Aurora - Modern Blog Theme

Project Overview

Aurora is a futuristic and feature-rich blog theme developed for the Hexo static site generator. Created using Vue 3 and TypeScript, it’s a project that prioritizes user experience with modern web technologies. Designed with the philosophy of “Smooth flow of colours and a futuristic feeling.”

Challenge

Business Needs

Features sought in modern blog platforms:

Performance: Static site speed + SPA user experience
Modern Design: Gradients, smooth transitions, modern UI
Customization: Theme colors, layout, font options
Content Richness: Mathjax, code highlighting, featured posts
SEO: Static HTML + meta tag optimization
Multi-language: Blog content in different languages
Dark Mode: Eye-friendly night mode

Technical Requirements

Vue 3: Modern reactivity and composition API
TypeScript: Type-safe development
Hexo Compatibility: Hexo static site generator integration
Build Tool: Fast build with Vite
Styling: SCSS + Tailwind CSS hybrid
Plugins: Comment systems, search, analytics

Solution

Architectural Approach

Theme Architecture:

Technology Stack

Frontend Technologies:

Vue 3 (58.9%): Modern reactive framework
TypeScript (29.3%): Type safety
SCSS (8.6%): Advanced styling
JavaScript: Legacy support
HTML & EJS: Template rendering

Build & Tooling:

Vite: Ultra-fast build tool
PostCSS: CSS processing
Tailwind CSS: Utility classes
Jest: Unit testing

Hexo Ecosystem:

Hexo Core: Static site generation
Hexo Plugins: Various integrations
Markdown: Content format

Key Features

1. Single Page Application

SPA Navigation:

Features:

⚡ No reload on page transitions
🎭 Smooth page transitions
📱 Mobile-first navigation
🔙 Browser back/forward support

2. Featured Content System

Pinned Posts:

Featured Features:

📌 Pinned posts (sticky posts)
⭐ Featured badge
🖼️ Large cover images
📍 Homepage carousel

3. Dark/Light Theme

Theme Switcher:

Theme Features:

🌙 Dark mode support
☀️ Light mode
🎨 Gradient backgrounds
💫 Smooth color transitions
💾 User preference persistence

4. Multi-language Support (i18n)

Language Configuration:

i18n Features:

🌍 Multiple language support
🔄 Dynamic text switching
💾 Language preference storage
📝 Translatable UI elements

5. Advanced Content Features

Mathjax Support:

Code Highlighting:

Reading Time:

6. Comment Systems

Gitalk Integration:

Valine Integration:

7. Search Function

Blog Search:

8. Magazine-Style Layout

Grid Layout:

Development Process

1. Theme Setup (1 Week)

Hexo theme boilerplate
Vue 3 + Vite setup
TypeScript configuration
Base styling (SCSS + Tailwind)

2. Core Components (2 Weeks)

Navbar & Footer
Post card components
Sidebar widget
Archive views
Timeline component

3. Advanced Features (2 Weeks)

SPA routing
Search functionality
Comment systems
i18n implementation
Theme switcher

4. Styling & Polish (1 Week)

Gradient designs
Animations & transitions
Responsive design
Dark mode styling
Performance optimization

Technical Details

Vue 3 Composition API

Post Component:

SCSS Advanced Styling

Gradient Mixins:

Hexo Configuration

Results

Project Statistics

🔢 357 Commits: Active development
⭐ Open Source: MIT licensed
🌐 Live Demo: tridiamond.tech
📦 NPM Package: Published as Hexo theme

Performance

⚡ Build Time: <10s with Vite
🚀 Page Load: <2s (static HTML)
📱 Mobile Score: 95/100
🎯 SEO Score: 100/100

Features

✅ SPA navigation experience
✅ Multi-language support
✅ Dark/Light theme
✅ Mathematical formulas (Mathjax)
✅ Comment systems (Gitalk, Valine)
✅ Search functionality
✅ Magazine-style grid layout
✅ Timeline archives

Lessons Learned

Successes

Vue 3 + Hexo: Static site + SPA hybrid approach successful
TypeScript: Type safety very helpful in large projects
Vite: Development experience excellent
SCSS + Tailwind: Using both together efficient

Areas for Improvement

Performance: Image lazy loading
SEO: Better meta tag generation
Accessibility: ARIA labels improvement
Mobile: Touch gestures

Future Plans

v2.0 Features

📱 PWA support
🔔 Push notifications
📊 Better analytics dashboard
🎨 More theme presets
🖼️ Image gallery lightbox
📝 Markdown editor integration
🔍 Advanced search with filters

Technologies Used

Frontend

Vue 3 (58.9%)
TypeScript (29.3%)
SCSS (8.6%)
JavaScript
HTML & EJS

Build Tools

Vite
PostCSS
Tailwind CSS
Jest

Hexo Ecosystem

Hexo Core
Hexo Plugins
Markdown

Project Link

Live Demo: tridiamond.tech

For a Similar Project

Looking for a modern, feature-rich blog theme? We develop custom theme solutions with Vue, React, or other frameworks.

Back to Portfolio