Build process
The set of automated steps that transform source code and content into the final files served to website visitors.
Also known as: build pipeline, build step
A build process is the set of automated steps that transform a website’s source files (templates, content, scripts, styles, images) into the final files served to visitors. Builds typically run on a developer’s machine during development and on a hosting provider’s build server when changes are deployed.
Modern web development relies heavily on build processes; very few production sites are deployed without one.
What a build process typically does
A typical build performs some combination of:
- Compiles content. Converts Markdown to HTML, MDX to React components, etc.
- Applies templates. Combines content with layouts to produce final HTML pages
- Bundles JavaScript. Combines source modules into optimized files for the browser
- Compiles CSS. Processes Sass, Less, PostCSS, or Tailwind into final stylesheets
- Optimizes assets. Compresses images, generates responsive variants, minifies code
- Generates a sitemap. Lists all pages for search engines
- Pre-renders pages. For static sites, generates the HTML for every route
- Outputs to a deployment folder. Typically
dist/,build/,public/, or_site/
Common build tools
| Tool | Role |
|---|---|
| Vite | Modern bundler used by Astro, SvelteKit, Vue, and others |
| Webpack | Long-established bundler, still widely used |
| esbuild | Very fast bundler, often used inside other tools |
| Rollup | Bundler focused on libraries and ES modules |
| Parcel | Zero-config bundler |
| Turbopack | Newer Rust-based bundler from Vercel |
| PostCSS | CSS transformation pipeline |
| Sass / Less | CSS preprocessors |
| TypeScript compiler | Compiles TypeScript to JavaScript |
These tools are often invoked indirectly by frameworks (Next.js, Nuxt, Astro, Remix) rather than configured manually.
Where the build runs
- Locally. During development, a build runs on the developer’s machine, often with hot reload
- In CI/CD. When changes are pushed to a repository, an automated build runs on a hosting platform or CI service (Cloudflare Pages, Netlify, Vercel, GitHub Actions)
- Scheduled or triggered. For sites that pull content from a CMS, builds may run on a schedule or be triggered by webhooks when content changes
A typical build pipeline for a static site
- Source code is pushed to a Git branch
- The hosting platform detects the change and starts a build
- The build environment installs dependencies (
npm installor equivalent) - The build command runs (
npm run build,astro build,hugo, etc.) - The output folder is uploaded to the hosting CDN
- The new version goes live (often within seconds of the build completing)
- Old versions may be retained for rollback
Build performance
Build time matters for:
- Developer feedback loop. Long builds slow down local development
- Deploy frequency. Builds that take minutes limit how often updates ship
- Cost. CI/CD platforms typically meter build minutes
Common factors affecting build time:
- Number of pages (some SSGs scale linearly, others sublinearly)
- Asset processing (image optimization can dominate)
- JavaScript bundle complexity
- Dependency installation time
- Whether incremental builds are supported
Mitigations include caching, incremental builds, and selective rebuilds for unchanged content.
Builds and deployment
Most modern hosting platforms (Cloudflare Pages, Netlify, Vercel, GitHub Pages) handle the build automatically:
- Connect the repository
- Configure the build command and output folder
- Push to the repository, the platform builds and deploys
This pattern is sometimes called Continuous Deployment (CD) or Git-based deployment.
Common build outputs
| Site type | Typical output |
|---|---|
| Static site | Folder of HTML, CSS, JS, and assets |
| Single-page application | One HTML file plus JS bundle and assets |
| Server-rendered app | Server bundle plus static assets |
| Hybrid (static + SSR) | Pre-built pages plus server functions |
Common misconceptions
- “Modern web development requires a complex build.” For simple sites, a build can be very simple (or skipped entirely with hand-written HTML/CSS).
- “Builds always need to be slow.” Tools like Vite and esbuild have made local builds nearly instant for many projects.
- “Build failures are rare.” Builds often fail during development; the build pipeline is also a check that catches errors before they reach production.