Creating a Studio project

Create a Studio project from a ready-to-deploy template, connect an existing Astro repository from GitHub, or migrate an existing website. Each path walks you through a guided wizard that configures your repository, sets up deployment secrets, and generates a GitHub Actions workflow so your site is live within minutes. If you just want to look around without signing in, use the demo instead.

Choose a path

	Start from Template	Connect Existing Repo	Import from Website
GitHub required	Yes	Yes	Yes
Best for	New projects that need a working starting point	Existing Astro repositories you want to manage in Studio	Migrating an existing site to a Studio-ready Astro project

Start from a template

Step 1 — Open the wizard

From the Quant Dashboard, open the Create Studio Project screen and select Start from Template.

Step 2 — Choose a template

Browse the Studio-ready templates pulled from the quantcdn-templates GitHub organisation. Each template is a fully configured Astro project with content collections, layouts, and example content already in place.

Step 3 — Connect GitHub

If you have not already connected a GitHub account, Studio prompts you to authorise the Quant GitHub App. Select the account or organisation where you want the new repository created.

Step 4 — Configure the project

Fill in the project details:

Field	Description
GitHub organisation	The GitHub installation under which the new repository will be created
Repository name	The name of the new GitHub repository (lowercase letters, numbers, and hyphens)
Make repository private	Toggle to create the repository as private (default) or public
Project name	The Quant project machine name (lowercase letters, numbers, and hyphens, max 32 characters)

Step 5 — Deploy

Click Create & Deploy to run the wizard. The progress panel walks through:

Creating Quant Project
Creating Deployment Token
Creating & Populating GitHub Repository
Configuring GitHub Secrets
Customizing Repository
Building & Deploying Site

Step 6 — Project ready

Once the wizard finishes you are redirected to the collection browser with pre-configured content from the template. Your site is built, deployed, and live.

Connect an existing repository

Step 1 — Open the wizard

From the Quant Dashboard, open the Create Studio Project screen and select Connect Existing Repo.

Step 2 — Select a repository

Choose your GitHub installation, then browse or search for the repository you want to connect. Studio also lets you pick the branch to analyse — it defaults to the repository’s default branch (typically main).

Step 3 — Review auto-detection results

Studio analyses the selected branch and reports what it finds. You will see:

Whether the repository looks like an Astro project (it must be one).
Which content collections are defined in src/content/config.ts (at least one is required).
An annotation analysis of data-quant-field attributes across your templates, indicating click-to-edit coverage.

If the repository is already linked to another Quant project in your organisation, Studio shows a warning.

Step 4 — Configure the project

Confirm or adjust the project settings:

Field	Description
Branch	The branch Studio will read content from (typically `main`)
Project name	The Quant project machine name (lowercase letters, numbers, and hyphens, max 32 characters)
Link to Project	Optional — enable Studio on a Quant project you already created instead of creating a new one

Step 5 — Deploy

Click Import & Deploy to start the wizard. Studio creates the project, configures deployment secrets, and opens a pull request adding a quant-deploy.yml GitHub Actions workflow to the repository. Merge the PR to trigger your first deployment; future pushes to the selected branch deploy automatically.

Import from an existing website

The third path, Import from Website, uses an AI-assisted migration to point at a live URL and generate a Studio-ready Astro project from it — including content detection, schema generation, and a Tailwind design replica. See Migration for the full walkthrough.

Auto-detection

When you import a repository, Studio scans the codebase to understand its structure and capabilities. The results drive how Studio configures the project.

Detected item	What Studio looks for	Why it matters
Astro config	`astro.config.mjs` or `astro.config.ts`	Confirms the project uses the Astro framework
Content collections	Directories under `src/content/` with a `config.ts`	Populates the collection browser with editable content
Zod schemas	Schema definitions exported from `src/content/config.ts`	Drives automatic form generation for structured editing
Layouts	`.astro` layout files referenced by content pages	Provides template scaffolding for the visual editor
Route patterns	File-based routing under `src/pages/` and collection slugs	Generates preview URLs for each piece of content
Click-to-edit annotations	`data-quant-field` attributes in Astro templates	Enables visual editing — clicking a rendered element opens its field in the editor

What gets configured

After the wizard completes, the following items are automatically set up in your repository and Quant project:

Item	Details
GitHub secrets	`QUANT_TOKEN`, `QUANT_CUSTOMER`, and `QUANT_PROJECT` are added to the repository so the deployment workflow can authenticate with QuantCDN
Deployment workflow	A `quant-deploy.yml` GitHub Actions workflow is committed to the repository, triggered on pushes to the deployment branch
Collection paths	Paths to each detected content collection are stored in the project configuration so the collection browser knows where to find your content
Route patterns	Detected route patterns are mapped to preview URLs, enabling live previews for every page in the project

Next steps

Define content schemas — Learn how Zod schemas drive form generation and validation in Studio
Start editing with the visual editor — Use click-to-edit annotations and live preview to author content visually