Getting Started

This guide covers everything needed to set up and customize your modular Astro blog, designed for Obsidian users who want to publish content with minimal friction.

Prerequisites & Setup

You’ll need:

Node.js 18+
pnpm (recommended) or npm
Basic markdown familiarity
Obsidian (optional)

Installation

# Install dependencies
pnpm install

# Start development server
pnpm run dev
# Available at http://localhost:5000

# Build for production
pnpm run build

Configuration

Core Settings

Configure everything in src/config.ts. Enable only the features you need:

export const siteConfig = {
  site: 'https://yourdomain.com',
  title: 'Your Blog Title',
  description: 'Your blog description',
  author: 'Your Name',

  seo: {
    defaultOgImageAlt: "Astro Modular logo.",
  },
}

Customization

Configure theme and navigation in the config:

 theme: {
    fonts: {
      heading:
        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      body: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    },
  },
  layout: {
    contentWidth: "40rem",
  }

navigation: {
  style: 'minimal', // or 'traditional'
  pages: [
    { title: 'Posts', url: '/posts' },
    { title: 'About', url: '/about' }
  ],
  social: [
    { title: 'GitHub', url: 'https://github.com/username', icon: 'github' }
  ],
  homeBlurb: {
    enabled: true,
    placement: "below", 
  },
}

Customize colors in src/styles/global.css:

:root {
  --color-highlight: 14 165 233; /* Your accent color */
  --color-background: 255 255 255;
  --color-foreground: 15 23 42;
}

Modular Features

Toggle modular features in the config:

features: {
  readingTime: false,
  commandPalette: true,
  linkedMentions: true,
  wordCount: true,
  tableOfContents: true,
  tags: true,
  scrollToTop: true,
  darkModeToggleButton: true,
  showCoverImages: true,
  postNavigation: true,
  showSocialIconsInFooter: false,
},
postsPerPage: 5,
  commandPalette: {
    shortcut: "ctrl+K",
    placeholder: "Search all posts...",
    sections: {
      quickActions: true,
      pages: true,
      social: true,
    },
  }

Content Structure

src/content/
├── posts/           # Blog posts
│   ├── images/      # Post images
│   └── *.md         # Markdown files
├── pages/           # Static pages
│   ├── images/      # Page images
│   └── *.md         # Markdown files
└── .obsidian/       # Obsidian vault setup

Writing Posts

Create posts in src/content/posts/ with this frontmatter:

---
title: "Your Post Title"
date: 2024-01-20
description: "Meta & open graph description"
image: "images/cover.jpg"
imageAlt: "Alt text"
imageOG: true
hideCoverImage: false
tags:
  - tutorial
  - astro
draft: true
targetKeyword: "keyword"
---

## Start with H2 Headings

Write using markdown with enhanced features.

Use [[wikilinks]] to connect posts.

> [!note] Obsidian Callouts
> Work exactly like in Obsidian!