Project Overview

Hermit is a personal blog built on the AstroPaper theme. It's a static site generator-based blog with SEO, performance, and modern features.

Technologies Used

Core Framework

• Astro 5.12.0 — Static site generator with component islands
• TypeScript 5.8.3 — Type safety

Styling & UI

• Tailwind CSS 4.1.11 — Utility-first CSS
• @tailwindcss/typography — Typography plugin

Content & Markdown

• Markdown — Blog posts in src/data/blog/
• Shiki — Syntax highlighting with transformers (highlight, word highlight, diff notation)
• remark-toc — Table of contents
• remark-collapse — Collapsible sections

Features & Integrations

• @astrojs/rss — RSS feed generation
• @astrojs/sitemap — Automatic sitemap
• Pagefind 1.3.0 — Client-side search
• Satori — Dynamic OG image generation
• Sharp — Image processing
• Day.js — Date formatting

Development Tools

• ESLint — Code linting
• Prettier — Code formatting
• TypeScript ESLint — TypeScript linting

Key Features

1. SEO

   • Structured data (JSON-LD)
   • Open Graph and Twitter Card meta tags
   • Canonical URLs
   • Sitemap generation
   • Google Site Verification support

2. Content Management

   • Markdown-based posts
   • Frontmatter with author, dates, tags, featured status
   • Draft posts
   • Scheduled posts (15-minute margin)
   • Tag system with tag pages
   • Archives page

3. User Experience

   • Dark/light mode toggle
   • Responsive design
   • Client-side search (Pagefind)
   • Pagination (4 posts per page/index)
   • Back to top button
   • Breadcrumb navigation
   • Social sharing links

4. Developer Experience

   • TypeScript
   • Component-based architecture (Astro components)
   • Path aliases (@/*)
   • Edit post links (GitHub)
   • Code syntax highlighting with file names

5. Performance

   • Static site generation
   • Optimized images
   • Minimal JavaScript

Project Structure

src/
├── components/     # Reusable Astro components
├── layouts/        # Page layouts
├── pages/          # Route pages (index, posts, tags, archives, etc.)
├── data/blog/      # Markdown blog posts
├── styles/         # Global CSS and typography
├── utils/          # Helper functions and utilities
└── config.ts       # Site configuration

Build & Deployment

Build Process

The build script (npm run build) performs:

1. Type checking (astro check)
2. Static site generation (astro build)
3. Search index generation (pagefind --site dist)
4. Copying search assets to public directory

Deployment

Configured for static hosting. The site URL in src/config.ts can be updated to your deployed domain. You can deploy to:

• Cloudflare Pages
• Vercel
• Netlify
• GitHub Pages
• Any static hosting service

The build outputs to the dist/ directory, which can be deployed to any static host.

Available Scripts

• npm run dev — Start development server
• npm run build — Build for production (includes type check, build, and search index)
• npm run preview — Preview production build locally
• npm run format — Format code with Prettier
• npm run lint — Lint code with ESLint

Configuration

Main configuration is in src/config.ts, including:

• Site metadata (title, description, author)
• Posts per page settings
• Feature toggles (archives, back button, edit post links)
• Dynamic OG images
• Timezone settings
• Language and direction (LTR/RTL)

The project is ready for deployment and can be customized through the configuration file and by adding markdown posts to src/data/blog/.