Introducing merox-erudite: My Customized Astro Blogging Theme

I started this blog on astro-erudite — a clean, minimal template. Over several months I kept adding things I needed: comments, analytics, schema markup. Eventually I had enough changes that it made more sense to publish it as a separate fork: merox-erudite.

The reason for a fork rather than contributing back: some features (AdSense) don’t fit the original theme’s minimal philosophy, and the scope of changes is too personal to be a reasonable upstream PR. astro-erudite stays minimal; merox-erudite is batteries-included.

What I Added

Giscus Comments — GitHub Discussions integration with lazy loading, Astro view transition support, and automatic dark/light theme sync. Optional: if not configured, the component doesn’t render. Requires a public GitHub repo with Discussions enabled.

Analytics — Google Analytics and Umami, both optional via environment variables:

PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
PUBLIC_UMAMI_WEBSITE_ID=your-umami-id

SEO Schemas — Reusable FAQ Schema and HowTo Schema components for structured data and voice search.

Enhanced Homepage — Experience timeline, skills showcase with animated badges, and an updated hero section. The timeline is configured in src/pages/index.astro:

1
const experience: ExperienceItem[] = [
2
  {
3
    role: 'Your Role',
4
    company: 'Company Name',
5
    period: '2020 - Present',
6
    current: true,
7
    icon: 'lucide:briefcase',
8
    key: 'Your achievements and responsibilities'
9
  },
10
]

Design — Geist variable fonts, improved contrast and dark mode, better focus indicators for keyboard navigation.

Feature Comparison

Getting Started

1. Click “Use this template” on the merox-erudite repository
2. Clone and install:

   git clone https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
   cd YOUR_REPO_NAME
   npm install

3. Start dev server:

   npm run dev

   Available at http://localhost:1234
4. Update src/consts.ts with your site info
5. Configure optional features via environment variables

Deployment on Cloudflare Pages

Free tier, global CDN, automatic GitHub deploys, and straightforward environment variable management.

Build settings (auto-detected for Astro, but if needed):

• Build command: npm run build
• Output directory: dist
• Node version: 20.x+

Environment variables — add in Cloudflare Dashboard → Settings → Environment Variables:

1
PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
2
PUBLIC_UMAMI_WEBSITE_ID=your-umami-id
3

4
PUBLIC_GISCUS_REPO=username/repo
5
PUBLIC_GISCUS_REPO_ID=your-repo-id
6
PUBLIC_GISCUS_CATEGORY=Blog Comments
7
PUBLIC_GISCUS_CATEGORY_ID=your-category-id

Credits

• astro-erudite by @jktrn — original design and architecture
• Astro Micro by trevortylerlee — inspiration
• Cursor — development tool