BlockBite docs

Astro basics

The few Astro concepts you need, with links to the full Astro documentation.

BlockBite works inside an Astro project. You only need a few foundations to understand where your pages, design and content live.

Pages, components and content

Concept In your project Learn more
Pages Files in src/pages/ define routes. index.astro is the home page. Astro pages
Components .astro files combine a script section with HTML templates. Props supply their values. Astro components
Layouts Shared components wrap pages with a document shell, navigation and footer. Layouts in Astro
Collections A loader and schema describe related content; routes read and render entries. Content collections

For BlockBite editing, a section’s fields.yaml declares its editable values. Page JSON supplies those values, and the native route passes them to the section component. See page content for a complete example.

What runs in the browser?

Astro components render HTML. Their frontmatter code runs during rendering, while scripts and hydrated framework components supply browser interactions. React and other framework components can be added through Astro integrations. Read Astro’s framework guide when you need interactive components.

A BlockBite island means an editable section with declared fields. Astro’s islands architecture describes how interactive UI loads in the browser. Declaring a BlockBite island does not automatically hydrate it.

Develop, build and preview

For a project with the standard Astro scripts:

npm run dev      # Develop with live updates
npm run build    # Build the site
npm run preview  # Inspect the built output locally

Use your project’s package manager and existing scripts. Native Play uses the project’s Astro pipeline; deployment follows your chosen Astro host. Continue with develop and build or deployment in the Astro docs.