Creating a Studio project
Create a Studio project from a ready-to-deploy template or connect an existing Astro repository from GitHub. Both paths walk 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.
Template vs import
Section titled “Template vs import”| Start from a template | Import an existing repository | |
|---|---|---|
| Time | ~2 minutes | ~3 minutes |
| GitHub required | Yes | Yes |
| Best for | New projects that need a working starting point | Existing Astro repositories you want to manage in Studio |
Start from a template
Section titled “Start from a template”Step 1 — Open the wizard
Section titled “Step 1 — Open the wizard”Navigate to Studio and click New Project, then select Start from Template.
Step 2 — Choose a template
Section titled “Step 2 — Choose a template”Browse the available templates and select a framework. Options include Astro blog, docs, portfolio, and more. Each template is a fully configured Astro project with content collections, layouts, and example content already in place.
Step 3 — Connect GitHub
Section titled “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
Section titled “Step 4 — Configure the project”Fill in the project details:
| Field | Description |
|---|---|
| Repository name | The name of the new GitHub repository that will be created for you |
| Visibility | Choose Public or Private for the repository |
| Project name | The display name used inside Quant for this project |
Step 5 — Create
Section titled “Step 5 — Create”Click Create to start the wizard. You can follow progress in real time as each stage completes:
- Creating repository
- Creating project
- Setting up secrets
- Generating workflow
- Deploying
Step 6 — Project ready
Section titled “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 already deployed and live.
Import an existing repository
Section titled “Import an existing repository”Step 1 — Open the wizard
Section titled “Step 1 — Open the wizard”Navigate to Studio and click New Project, then select Import from GitHub.
Step 2 — Select a repository
Section titled “Step 2 — Select a repository”Choose your GitHub installation, then browse or search for the repository you want to import.
Step 3 — Review auto-detection results
Section titled “Step 3 — Review auto-detection results”Studio analyses the repository and reports what it finds. You will see whether an Astro config was detected, which content collections exist, and an annotation analysis showing click-to-edit support across your templates.
Step 4 — Configure the project
Section titled “Step 4 — Configure the project”Confirm or adjust the project settings:
| Field | Description |
|---|---|
| Deployment branch | The branch that triggers production deployments (typically main) |
| Project name | The display name used inside Quant for this project |
Step 5 — Create
Section titled “Step 5 — Create”Click Create to start the wizard. Studio creates the project, configures deployment secrets, and generates the GitHub Actions workflow for your repository.
Auto-detection
Section titled “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
Section titled “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
Section titled “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