# How the 30 Seconds of Code Website Is Built: Astro 5, SQLite Models, and Static Generation
> Discover how the 30 seconds of code website uses Astro 5, SQLite models, and static generation for a fast and efficient user experience. Learn about its architecture and deployment.
- Repository: [Angelos Chalaris/30-seconds-of-code](https://github.com/Chalarangelo/30-seconds-of-code)
- Tags: architecture
- Published: 2026-02-25
---
**The 30 seconds of code website is a static-site generated application built with Astro 5, featuring a custom SQLite-backed data layer, client-side fuzzy search indexing, and SCSS styling, deployed as static HTML on Netlify.**
The 30 seconds of code repository by Chalarangelo serves millions of developers seeking concise code snippets. The website architecture demonstrates how modern static-site generators can deliver complex functionality—including dynamic search and content management—without requiring server-side runtime code.
## Core Architecture and Technology Stack
### Astro 5 Static Site Configuration
The foundation of the 30 seconds of code website relies on **Astro 5** configured through centralized settings. The `astro.config.mjs` file imports site constants from [`src/astro/settings.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/astro/settings.js), establishing the base URL, build optimizations, and source directory structure.
```javascript
// https://github.com/Chalarangelo/30-seconds-of-code/blob/master/astro.config.mjs
import { defineConfig } from 'astro/config';
import settings from '#src/astro/settings.js';
export default defineConfig({
site: settings.websiteUrl,
build: { inlineStylesheets: 'always' },
compressHTML: true,
srcDir: 'src/astro',
});
```
The configuration enables aggressive optimizations including inline stylesheets and HTML compression, while [`src/astro/settings.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/astro/settings.js) centralizes site metadata like `websiteName` and `websiteUrl` for consistent SEO across all pages.
### Data Models and ORM Layer
Content management relies on a lightweight ORM implemented in [`src/core/model.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/core/model.js), with specific entity classes extending this base. The **Snippet** model ([`src/models/snippet.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/models/snippet.js)), **Collection** model ([`src/models/collection.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/models/collection.js)), and **Language** model ([`src/models/language.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/models/language.js)) provide type-safe access to SQLite-backed data.
```javascript
// https://github.com/Chalarangelo/30-seconds-of-code/blob/master/src/models/snippet.js
export default class Snippet extends ContentModel {
// …
get page() {
// Returns an Astro page adapter that knows the URL, layout etc.
return Page.from(this);
}
}
```
The model layer loads raw data via [`src/lib/loader.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/lib/loader.js), which parses markdown files and front-matter during the build process. Each model exposes a `page` property that returns an Astro page adapter, enabling the static generator to construct proper routes and layouts for each snippet.
### Client-Side Search Infrastructure
Search functionality operates entirely in the browser using a **custom inverted index** generated at build time. The [`src/lib/search/server.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/lib/search/server.js) module tokenizes all content and writes the index to [`public/search-index.json`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/public/search-index.json), while [`src/lib/search/documentSearch.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/lib/search/documentSearch.js) handles runtime fuzzy matching.
```javascript
// https://github.com/Chalarangelo/30-seconds-of-code/blob/master/src/lib/search/server.js
import { buildIndex } from './documentIndex.js';
import { writeFileSync } from 'fs-extra';
import { PUBLIC_PATH } from '#src/config/settings.js';
export async function generateSearchIndex(snippets) {
const index = buildIndex(snippets);
writeFileSync(`${PUBLIC_PATH}/search-index.json`, JSON.stringify(index));
}
```
This approach eliminates server-side search latency; the client fetches the pre-computed index and performs lookups locally through the [`omnisearch.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/omnisearch.js) bundle.
### Component Architecture and Styling
UI components are **Astro single-file components** mixing HTML, component scripts, and scoped styling. The `src/astro/components/Omnisearch.astro` file implements the site-wide search modal using semantic HTML5 elements and minimal JavaScript hydration.
```astro
---
// https://github.com/Chalarangelo/30-seconds-of-code/blob/master/src/astro/components/Omnisearch.astro
import Icon from '#src/astro/components/Icon.astro';
---
```
Global styling uses **SCSS modules** located in `src/astro/styles/`, including [`_layout.scss`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/_layout.scss) and [`_base.scss`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/_base.scss), compiled by Astro's built-in Sass support. The `src/astro/layouts/Layout.astro` file wraps all pages with the base HTML structure, ensuring consistent metadata and resource loading.
## Build Pipeline and Data Flow
### Content Preparation and Indexing
The build process begins with the `bin/prepare` script, which orchestrates the data pipeline:
1. **Content ingestion** – Reads raw markdown snippets from the repository and parses front-matter using the `front-matter` library
2. **Model hydration** – Populates the SQLite-backed model layer through [`src/lib/loader.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/lib/loader.js)
3. **Search indexing** – Invokes `generateSearchIndex()` from [`src/lib/search/server.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/lib/search/server.js) to create [`public/search-index.json`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/public/search-index.json)
This preparation phase ensures all dynamic data is serialized to static assets before Astro begins rendering.
### Static Generation and Deployment
During the `astro build` phase, Astro traverses the model instances (accessing `Snippet.page` and similar adapters) to render each article to static HTML. The [`package.json`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/package.json) scripts coordinate this workflow:
- `npm run build` executes `bin/prepare full` followed by `astro build`
- Output is pure HTML, CSS, and JavaScript suitable for any static host
- The repository deploys to **Netlify**, serving content directly from CDN edge nodes without server-side runtime
## Summary
- **Astro 5** powers the static-site generation with optimized build settings configured in `astro.config.mjs` and [`src/astro/settings.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/astro/settings.js)
- A **custom ORM layer** in [`src/core/model.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/core/model.js) manages snippet data through [`src/models/snippet.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/models/snippet.js) and related entity classes
- **Build-time indexing** via [`src/lib/search/server.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/lib/search/server.js) creates a static [`search-index.json`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/search-index.json) for instant client-side fuzzy search
- **Reusable Astro components** like `Omnisearch.astro` compose the UI with SCSS styling from `src/astro/styles/`
- The entire architecture generates static assets deployable to Netlify with zero server-side runtime requirements
## Frequently Asked Questions
### What static-site generator does 30 seconds of code use?
The 30 seconds of code website uses **Astro 5** as its static-site generator. According to the source code in `astro.config.mjs`, the project leverages Astro's content collections, SCSS compilation, and static rendering capabilities to produce optimized HTML files served from Netlify.
### How does the 30 seconds of code website handle search functionality?
Search is implemented through a **client-side inverted index** generated during the build process. The [`src/lib/search/server.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/lib/search/server.js) module creates a tokenized index saved as [`search-index.json`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/search-index.json), while `src/astro/components/Omnisearch.astro` loads this file and performs fuzzy matching via the [`omnisearch.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/omnisearch.js) script, eliminating the need for server-side search infrastructure.
### Where does the 30 seconds of code website store its snippet data?
Snippet data is managed through a lightweight ORM system where models like [`src/models/snippet.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/models/snippet.js) extend a base class from [`src/core/model.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/core/model.js). The data originates from markdown files with front-matter, processed by [`src/lib/loader.js`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/src/lib/loader.js) and optionally backed by SQLite, though the final site renders this content to static HTML at build time.
### What build tools and scripts are used to deploy the site?
The deployment pipeline uses **NPM scripts** defined in [`package.json`](https://github.com/Chalarangelo/30-seconds-of-code/blob/main/package.json), specifically `bin/prepare` for content processing and `astro build` for static generation. The `bin/prepare full` command parses all markdown, hydrates the model layer, and generates search indexes before Astro compiles the site for Netlify deployment.