Personal Blog Website Setup

This skill provides instructions for working with a personal website and blog built with Astro, a modern static site generator. The site is deployed to Netlify and focuses on content creation through markdown blog posts.

Project Structure

The site uses Astro v5.13.5 with the following structure:

Development Workflow

Starting Development

1. Check Node.js version matches `.nvmrc`

2. Run `npm run dev` or `npm start` to start the development server on port 4321

3. The server includes live reload for immediate feedback

Building for Production

1. Run `npm run build` to generate static files in `dist/`

2. Run `npm run preview` to preview the built site locally before deployment

3. Deployment to Netlify is configured via `netlify.toml`

Running Astro Commands

Use `npm run astro` to access Astro CLI commands for advanced operations.

Working with Content

Blog Posts

Markdown and MDX

Configuration Files

astro.config.mjs

Main configuration file containing:

netlify.toml

Deployment configuration for Netlify hosting including:

package.json

Defines:

Features and Integrations

Guidelines for Code Changes

1. **Preserve Existing Structure**: Maintain the established directory organization

2. **Content Collections**: Use Astro's content collections API for new blog posts

3. **Component Reusability**: Place reusable components in `src/components/`

4. **Layout Consistency**: Use existing layouts from `src/layouts/` when creating new pages

5. **Static Assets**: Place images and other static files in `public/`

6. **Build Verification**: Always run `npm run build` to verify changes before deployment

7. **Configuration Changes**: Document any changes to `astro.config.mjs` or `netlify.toml`

Common Tasks

Adding a New Blog Post

1. Create a new markdown/MDX file in `src/content/blog/` (or appropriate collection)

2. Add front matter with required metadata (title, date, description, tags)

3. Write content using markdown or MDX syntax

4. Test locally with `npm run dev`

5. Build and verify with `npm run build && npm run preview`

Modifying Styles

1. Locate relevant stylesheet in `src/styles/`

2. Make CSS changes

3. Verify in development mode with live reload

4. Test responsive design at different breakpoints

Adding New Pages

1. Create `.astro` file in `src/pages/` using file-based routing

2. Use existing layout from `src/layouts/` or create new layout

3. Add necessary components from `src/components/`

4. Test routing and navigation

Updating Dependencies

1. Check `package.json` for current versions

2. Update Astro and integrations carefully (test thoroughly)

3. Run `npm run build` to verify compatibility

4. Check Astro upgrade guides for breaking changes

Important Notes