StepsSection
apps/www/src/components/StepsSection.astro · 21 lines · group Features & lists
Used by
- pages.gitt.one /how-it-works/ × 2
- pages.gitt.one / × 2
Live sites: pages.gitt.one.
Samples 2
What happens on push
The same four steps for every site produced by the technology — nothing bespoke per project.
- 1
Content lands in git
You edit markdown or typed content tags — in your IDE, in the GitLab web editor, or with an AI agent working on the repository
- 2
CI pulls the builder
A standard pipeline pulls the builder image; the engine and its locked dependencies come ready-made, so builds stay reproducible for years
- 3
Static output is built
Markdown is rendered, images are converted into responsive webp, files are pre-compressed and SEO files are generated
- 4
An image ships
The result is an ordinary ~50 MB nginx image — deploy it to our Kubernetes clusters or to any Docker hosting you control
MDX of this sample
<StepsSection
title="What happens on push"
description="The same four steps for every site produced by the technology — nothing bespoke per project."
>
<StepItem
ind="1"
title="Content lands in git"
description="You edit markdown or typed content tags — in your IDE, in the GitLab web editor, or with an AI agent working on the repository"
/>
<StepItem
ind="2"
title="CI pulls the builder"
description="A standard pipeline pulls the builder image; the engine and its locked dependencies come ready-made, so builds stay reproducible for years"
/>
<StepItem
ind="3"
title="Static output is built"
description="Markdown is rendered, images are converted into responsive webp, files are pre-compressed and SEO files are generated"
/>
<StepItem
ind="4"
title="An image ships"
description="The result is an ordinary ~50 MB nginx image — deploy it to our Kubernetes clusters or to any Docker hosting you control"
/>
</StepsSection>From a git repository to a live site
A new website is just a new content repository. Time to first site — hours, not weeks.
- 1
Write content
Put your content in a git repository: markdown files for articles and knowledge bases, semantically typed content tags for landing pages
- 2
Add a tiny Dockerfile
A few lines on top of our standard builder image — no build configs, no toolchain to maintain in your repo
- 3
Push to master
CI builds your content into a ~50 MB nginx image and deploys it — to our Kubernetes clusters or any Docker hosting of yours
- 4
Edit and preview
Change content right in the GitLab web editor; every draft gets a staging replica of the real site to review before release
MDX of this sample
<StepsSection
title="From a git repository to a live site"
description="A new website is just a new content repository. Time to first site — hours, not weeks."
>
<StepItem
ind="1"
title="Write content"
description="Put your content in a git repository: markdown files for articles and knowledge bases, semantically typed content tags for landing pages"
/>
<StepItem
ind="2"
title="Add a tiny Dockerfile"
description="A few lines on top of our standard builder image — no build configs, no toolchain to maintain in your repo"
/>
<StepItem
ind="3"
title="Push to master"
description="CI builds your content into a ~50 MB nginx image and deploys it — to our Kubernetes clusters or any Docker hosting of yours"
/>
<StepItem
ind="4"
title="Edit and preview"
description="Change content right in the GitLab web editor; every draft gets a staging replica of the real site to review before release"
/>
</StepsSection>Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | yes | ||
| description | string |
Source apps/www/src/components/StepsSection.astro @ gitt.one
---
interface Props {
title: string;
description?: string;
}
const { title, description } = Astro.props;
---
<div class="bg-white">
<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
{title}
</h2>
{description && <p class="mt-4 max-w-3xl text-lg text-gray-500">{description}</p>}
<ol class="mt-12 grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-4">
<slot />
</ol>
</div>
</div>Source links point to engine-astro@e857a859. Samples are cut from the sites' own content by scripts/gallery-extract.mjs; nothing is merged or removed yet.