galiarmero.dev

Personal website and blog for Gali Armero, built with Astro. Uses Content Collections for blog posts, React islands for interactive components, and deploys to Netlify as a fully static site.

🧑‍🚀 Getting Started

Prerequisites: Node.js 18+ and npm.

npm install
npx astro dev

The dev server runs at http://localhost:4321.

🧞 Commands

Command	Description
npx astro dev	Start the development server
npx astro build	Build the production site to dist/
npx astro preview	Preview the production build locally
npm run check-format	Check Prettier formatting
npm run format	Auto-fix Prettier formatting

🚀 Project Structure

src/
├── components/        # Astro and React (.jsx) components
├── config/            # Site data (YAML), theme definitions
├── content/
│   └── blog/          # Blog posts (each post is a folder with index.md)
├── layouts/           # BaseLayout.astro (shared head, meta, analytics)
├── pages/             # File-based routing
│   ├── blog.astro     # Blog index page
│   ├── blog/          # Blog post pages ([...slug].astro)
│   ├── cards/         # Sharing card routes (dev-only)
│   └── puzzle-scores/ # Puzzle score pages (fetched from Nenoy API)
├── styles/            # Global and page-specific CSS
└── content.config.ts  # Content collection schema

✍️ Creating a New Blog Post

Each blog post is a folder under src/content/blog/ containing an index.md file and any associated images.

Using the script:

npm run new-post -- "My Post Title"

Frontmatter schema:

---
title: "My Post Title"
datePublished: "2026-03-24T12:00:00+08:00"
teaser: "A short description of the post."
sharingCard: ./sharing-card-my-post-title.png
---

Field	Type	Required	Description
title	string	yes	Post title
datePublished	date string	yes	ISO 8601 publish date
teaser	string	yes	Short description (used in previews and meta tags)
sharingCard	image path	no	Relative path to the sharing card PNG

🖼️ Generating Sharing Cards

Sharing cards are 1200x628 PNG images used for social media previews. They are generated by screenshotting dev-only /cards routes with Puppeteer.

Steps:

1. Start the dev server: npx astro dev
2. In another terminal: npm run generate-sharing-cards

This generates a sharing-card-<slug>.png inside each blog post's folder. Existing cards are skipped unless you pass --overwrite:

npm run generate-sharing-cards -- --overwrite

🚢 Deployment

The site deploys to Netlify as a static site.

• Build command: npx astro build (configured in netlify.toml)
• Publish directory: dist
• Environment variables: Set the variables from .env in Netlify's site settings