Skip to content

Getting Started with Hermes Prime

Hermes Team · · 2 min read
Hermes Prime setup

Hermes Prime is a reference-quality Astro theme built for content sites. This guide gets you from zero to a live blog in minutes.

Prerequisites

  • Node.js 18+
  • npm, pnpm, or yarn

Installation

If you’re starting fresh:

npm create astro@latest my-blog -- --template hermes-prime

Or clone the repo and install dependencies:

git clone https://github.com/example/hermes-prime.git my-blog
cd my-blog
npm install

Project Structure

src/
├── content/
│   └── blog/          # Your Markdown/MDX posts
├── components/        # Reusable UI components
├── layouts/
│   └── BaseLayout.astro
├── lib/               # Utilities, site config
├── pages/             # Routes
└── styles/
    └── global.css

Content lives in src/content/blog/. Each file is a post. Frontmatter defines metadata.

Your First Post

Create src/content/blog/hello-world.md:

---
title: Hello World
description: My first post
pubDate: 2025-02-22
author: Your Name
tags: [hello, meta]
---

Welcome to my blog. This is my first post with Hermes Prime.

Run the dev server:

npm run dev

Visit http://localhost:4321/blog/hello-world to see it.

Configuration

Edit src/lib/site.ts to customize your site:

export const SITE = {
  name: 'My Blog',
  tagline: 'A blog about things',
  description: '...',
  url: 'https://myblog.com',
  author: { name: 'Your Name', url: '...' },
  social: { twitter: '...', github: '...' },
};

Adding an Image to a Post

Include an image in frontmatter:

---
title: My Post
image: https://example.com/hero.jpg
imageAlt: Description for accessibility
---

Or use a local image from public/:

image: /images/my-photo.jpg

Building for Production

npm run build

Output goes to dist/. Deploy that folder to any static host—Vercel, Netlify, Cloudflare Pages, GitHub Pages, or your own server.

Next Steps

  • Customize the theme — Edit src/styles/global.css for colors and typography
  • Add pages — Create new .astro files in src/pages/
  • Use MDX — Rename .md to .mdx to embed React components
  • Set up RSS — Add @astrojs/rss for feed generation

Hermes Prime is designed to stay out of your way. Write content, tweak the config, and ship.