Code-based website
A website built directly from source code (HTML, CSS, JavaScript, optionally a framework or static site generator) rather than constructed through a CMS's visual editor.
Also known as: coded website, custom-coded site, hand-coded site
A code-based website is a site whose pages, layouts, and behavior are defined directly in source code (HTML, CSS, JavaScript, and optionally a framework or static site generator). The site is typically stored in a version control system like Git, built by an automated process, and deployed to a web host or CDN.
This is distinct from sites built primarily through a CMS’s visual editor, where the underlying code is generated and managed by the platform.
How a code-based site is typically built
A common workflow:
- Source files (HTML, CSS, JavaScript, Markdown content) are written and stored in a Git repository
- A build process, manual or automated, produces deployable files
- The output is uploaded to a web host or pushed to a CDN
- Subsequent updates flow through the same Git → build → deploy pipeline
Modern code-based sites usually use a framework or static site generator (Astro, Next.js, Eleventy, Hugo, Gatsby, SvelteKit, etc.) rather than hand-writing every HTML file.
Common stacks
- Pure static HTML/CSS/JS, smallest, simplest sites
- Static site generator + Markdown, Astro + Markdown, Hugo + Markdown, Eleventy + Nunjucks
- JavaScript framework with static export, Next.js, Nuxt, SvelteKit, Astro
- Server-rendered framework, Rails, Django, Laravel, Phoenix
- Headless CMS + static front-end, Contentful or Sanity feeding a static generator
Code-based does not imply any specific framework, language, or rendering model.
Code-based vs CMS-built sites
| Aspect | Code-based | CMS-built |
|---|---|---|
| Where the site lives | Git repository (portable) | Platform database (often portable in part) |
| Editing model | Code editor, optionally with a CMS layered on | Visual editor, often WYSIWYG |
| Customization ceiling | Limited only by what code can do | Limited to what the platform supports |
| Editor accessibility for non-developers | Lower without additional tooling | Higher |
| Performance ceiling | Typically high; controlled by the developer | Set by platform architecture |
| Setup effort | Higher | Lower |
| Recurring cost | Hosting only (often low) | Subscription to platform |
| Lock-in | Low | Varies, often high on hosted platforms |
Both approaches can produce excellent sites; the right fit depends on team capacity, budget, and how the site is expected to evolve.
Common reasons to choose code-based
- Performance requirements that exceed what hosted CMS platforms can deliver
- Need for custom integrations or non-standard functionality
- Desire to avoid recurring platform fees over the site’s lifetime
- Concern about portability and data ownership
- Existing developer capacity or willingness to hire one
Common reasons to choose a CMS
- No developer involvement available, now or ongoing
- Editing autonomy for non-technical staff is the top priority
- Tight budget for initial build (some CMS platforms have lower setup cost)
- Site requires features the CMS provides out of the box (membership, ecommerce templates, scheduling)
Editing experience on code-based sites
Several patterns make code-based sites editable by non-developers:
- Markdown files in the repo edited via a Git-aware tool (Forestry, Tina, Decap, GitHub web editor)
- Headless CMS providing a familiar editor that the static site reads from at build time
- Visual editing layers like Tina that overlay editing on a code-based site
- Form-based admin panels generated from the content schema
Common misconceptions
- “Code-based means no editor.” Code-based sites can have rich editorial workflows; the editor is just decoupled from the runtime.
- “Code-based requires constant developer work.” Day-to-day content changes can be handled without a developer; structural changes do require code work.
- “Code-based is always cheaper.” Initial build cost is often higher than a templated CMS site; recurring cost is usually lower.