Personal Developer Blog

A modern, fast, and clean developer blog built with Astro, styled with Tailwind CSS, and deployed on GitHub Pages.

✨ Features

• ✅ Fast, lightweight, and SEO-friendly
• ✅ Dark mode support (automatic based on system preferences)
• ✅ MDX support for interactive blog posts
• ✅ Syntax highlighting for code blocks
• ✅ Responsive design (mobile-friendly)
• ✅ RSS feed and sitemap generation
• ✅ Automatic deployment via GitHub Actions
• ✅ Custom MDX components (Callout boxes)
• ✅ Blog post tags and metadata

🚀 Project Structure

/
├── public/              # Static assets (fonts, images)
├── src/
│   ├── assets/         # Images that will be optimized by Astro
│   ├── components/     # Reusable Astro components
│   │   ├── Callout.astro      # Custom MDX callout component
│   │   ├── Header.astro       # Site navigation header
│   │   ├── Footer.astro       # Site footer
│   │   └── ...
│   ├── content/        # Content collections
│   │   └── blog/       # Blog posts (*.md, *.mdx)
│   ├── layouts/        # Page layouts
│   │   └── BlogPost.astro     # Blog post layout
│   ├── pages/          # File-based routing
│   │   ├── index.astro        # Homepage with blog list
│   │   ├── about.astro        # About page
│   │   └── blog/
│   │       ├── [...slug].astro # Dynamic blog post pages
│   │       └── index.astro     # Blog archive page
│   ├── styles/
│   │   └── global.css         # Global styles + Tailwind
│   └── consts.ts              # Site configuration
├── .github/
│   └── workflows/
│       └── deploy.yml         # GitHub Actions deployment
├── astro.config.mjs           # Astro configuration
├── CLAUDE.md                  # Claude Code guidance
└── package.json

🛠️ Development

Prerequisites

• Node.js 20+
• npm

Local Setup

1. Clone the repository:

git clone <your-repo-url>
cd abraham-blog

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The site will be available at http://localhost:4321/

Available Commands

Command	Description
npm run dev	Start development server at localhost:4321
npm run build	Build production site to ./dist/
npm run preview	Preview production build locally
npm run astro ...	Run Astro CLI commands

📝 Adding Blog Posts

1. Create a new .mdx or .md file in src/content/blog/

2. Add frontmatter with required metadata:

---
title: "Your Post Title"
description: "A brief description of your post"
pubDate: 2025-01-25
tags: ["tag1", "tag2"]
heroImage: "/blog-placeholder-1.jpg"  # Optional
---

3. Write your content using Markdown or MDX

Using MDX Components

Import and use custom components in your .mdx posts:

---
title: "Example Post"
description: "Using MDX components"
pubDate: 2025-01-25
tags: ["example"]
---

import Callout from '../../components/Callout.astro';

<Callout type="info">
This is an info callout! Types: info, warning, success, error
</Callout>

Code Syntax Highlighting

Code blocks are automatically highlighted. Just use triple backticks with a language:

```javascript function example() { console.log("Hello, world!"); } ```

🚀 Deployment

This blog automatically deploys to GitHub Pages when you push to the master branch.

First-Time Setup

1. Go to your GitHub repository settings
2. Navigate to Pages (under "Code and automation")
3. Under Source, select GitHub Actions

Configure Your Site URL

Update astro.config.mjs with your GitHub Pages URL:

export default defineConfig({
  site: 'https://yourusername.github.io',
  // If using a project repo (not username.github.io):
  // base: '/repo-name',
  // ...
});

Manual Deployment

npm run build

The static site will be built to ./dist/ and can be deployed anywhere.

🎨 Customization

Site Information

Edit src/consts.ts to update site title, description, and other metadata:

export const SITE_TITLE = 'Your Blog Title';
export const SITE_DESCRIPTION = 'Your blog description';

Styling

• Colors & Theme: Edit CSS custom properties in src/styles/global.css
• Dark Mode: Colors are defined in the @media (prefers-color-scheme: dark) section
• Tailwind: Add utility classes or customize astro.config.mjs

Navigation

Edit src/components/Header.astro to add/remove navigation links.

Footer

Edit src/components/Footer.astro to customize footer content.

📄 License

This project is open source and available for anyone to use as a template for their own blog.

🙏 Credits

• Built with Astro
• Styled with Tailwind CSS
• Base template inspired by Bear Blog
• Font: Atkinson Hyperlegible