Configuration

Customize OmarCMS to match your style and needs.

Site Metadata

Edit package.json to set your site name and description:

{
  "name": "your-blog-name",
  "description": "Your blog description",
  "author": "Your Name"
}

Astro Configuration

astro.config.mjs controls build settings. The defaults work for most cases, but you can customize: 

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://yourdomain.com',
  // Add integrations, custom renderers, etc.
});

Styling

OmarCMS uses CSS custom properties for theming. Edit src/layouts/BaseLayout.astro to change colors, fonts, and spacing: 

:root {
  /* Light theme */
  --bg: #ffffff;
  --fg: #171717;
  --accent: #2563eb;
  --muted: #525252;
  --border: #e5e5e5;
}

:root[data-theme="dark"] {
  /* Dark theme */
  --bg: #0a0a0a;
  --fg: #e5e5e5;
  --accent: #60a5fa;
  --muted: #9ca3af;
  --border: #262626;
}

Navigation

Update the header navigation in src/layouts/BaseLayout.astro:

<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
  <a href="/docs">Docs</a>
  <a href="/about">About</a>
  <!-- Add your own links -->
</nav>

Analytics

OmarCMS includes Vercel Analytics by default. To use other analytics platforms:

  1. Install the integration: pnpm add @astrojs/analytics-name
  2. Add to astro.config.mjs
  3. Add environment variables in Vercel

Custom Head Tags

Add analytics scripts, verification tags, or other <head> content by editing src/components/CustomHead.astro: 

<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script is:inline>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

<!-- Google Search Console verification -->
<meta name="google-site-verification" content="your-verification-code" />

<!-- Plausible Analytics -->
<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

This component is automatically included on every page. Just paste your tracking codes directly.

Custom Pages

Add new pages in src/pages/:

src/pages/
  ├── index.astro        # Homepage
  ├── blog/              # Blog pages
  ├── docs/              # Documentation
  ├── about.astro        # About page
  └── your-page.astro    # Custom page

Custom Components

Create reusable components in src/components/:

---
// src/components/MyComponent.astro
interface Props {
  title: string;
}
const { title } = Astro.props;
---

<div class="my-component">
  <h2>{title}</h2>
  <slot />
</div>

<style>
  .my-component {
    padding: 1rem;
    border: 1px solid var(--border);
  }
</style>

Next Steps