# How to Regenerate the Site Data for awesome-gpt-image-2: Complete Guide

> Learn how to regenerate site data for awesome-gpt-image-2 by running npm run generate:site-data. This guide rebuilds the case catalog from Markdown to JSON for the Vite frontend.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-09-01

---

**Run `npm run generate:site-data` to rebuild the case catalog from Markdown source files into the JSON payload consumed by the Vite frontend.**

The **awesome-gpt-image-2** repository powers a searchable gallery of GPT-Image-2 prompts and examples. Its dynamic data layer is not hand-maintained but generated programmatically from structured Markdown files. Understanding how to regenerate this site data is essential when adding new cases, updating existing entries, or deploying fresh builds.

## What the Generation Script Does

The Node.js script at `scripts/generate-site-data.mjs` transforms raw documentation into structured data. According to the source code, the script performs four core operations:

- **Collects source files** – reads [`docs/gallery-part-1.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-1.md) and [`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md) as input sources
- **Parses each case** – extracts titles, prompts, image URLs, source links, and infers categories and tags using helper functions like `extractPrompt()`, `extractSource()`, `inferCategory()`, and `inferTags()`
- **Builds a payload** – aggregates overall statistics (`totalCases`, `categories`, `styles`, `scenes`) plus an array of case objects with complete metadata
- **Writes JSON output** – serializes the payload to [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json), creating the directory if necessary

The resulting [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json) is consumed by [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) to render the interactive gallery, filters, and case detail views.

## Quick Regeneration Steps

Follow these commands to regenerate the site data from scratch:

```bash

# 1. Clone the repository

git clone https://github.com/freestylefly/awesome-gpt-image-2.git
cd awesome-gpt-image-2

# 2. Install dependencies

npm install

# 3. Regenerate site data for awesome-gpt-image-2

npm run generate:site-data

```

This single command executes `node scripts/generate-site-data.mjs` as declared in [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json) lines 6–9.

## Alternative: Direct Node Execution

Bypass npm scripts by invoking Node directly:

```bash
node scripts/generate-site-data.mjs

```

Both approaches produce identical output at [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json).

## Automating Full Regeneration

The repository includes npm lifecycle hooks that streamline workflows. The `predev` and `prebuild` hooks automatically trigger both generation scripts before starting the development server or creating a production build (see [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json) lines 13–16).

For manual full regeneration including the Agent skill library:

```bash

# Regenerate site data

npm run generate:site-data

# Regenerate style-skill data (optional)

npm run generate:style-skill

# Start development server with fresh data

npm run dev

```

## Key Files and Their Roles

| File | Purpose |
|------|---------|
| `scripts/generate-site-data.mjs` | Core generator script that parses Markdown and outputs JSON |
| [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json) | Declares `generate:site-data` and `generate:style-skill` npm scripts |
| [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json) | Generated output consumed by the Vite frontend |
| [`docs/gallery-part-1.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-1.md), [`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md) | Source Markdown files containing case definitions |
| `scripts/generate-style-skill.mjs` | Companion generator for Agent skill data |

## Regenerating After Content Changes

When you modify case data in the `docs/` directory, the site frontend does not automatically detect changes. You must explicitly regenerate the site data for awesome-gpt-image-2 to reflect updates:

1. Edit [`docs/gallery-part-1.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-1.md) or [`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md)
2. Run `npm run generate:site-data`
3. Restart `npm run dev` or rebuild with `npm run build`

The generation script re-parses all cases from scratch on every run, ensuring consistency across the entire catalog.

## Summary

- **Primary command:** `npm run generate:site-data` executes the generation pipeline
- **Input sources:** Markdown files in `docs/` directory
- **Output target:** [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json) consumed by [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)
- **Automation:** `predev` and `prebuild` hooks auto-regenerate when running `npm run dev` or `npm run build`
- **Direct execution:** `node scripts/generate-site-data.mjs` works identically

## Frequently Asked Questions

### What Node version is required to run the generation script?

The repository expects Node.js 18 or higher. The script uses modern ESM syntax (`import` statements) and `fs/promises` APIs that require contemporary Node versions.

### Why is my frontend not showing updated cases after editing Markdown?

The Vite development server does not watch `docs/` files for changes. After modifying source Markdown, you must manually run `npm run generate:site-data` to rebuild [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json), then restart the dev server.

### Can I regenerate both site data and style skills in one command?

While no single script combines both, the `predev` and `prebuild` npm hooks automatically execute both `generate:site-data` and `generate:style-skill` before their respective main commands, ensuring synchronized regeneration.

### What happens if [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json) already exists?

The generation script unconditionally overwrites the file. It creates the `data/` directory if missing, then writes fresh JSON, making repeated regeneration safe and idempotent.