Skip to content
Watch a live product demo 👀 See how Sanity powers richer commerce experiences
Sanity
  • Platform

    Sanity Studio

    Flexible editing environment

    APIs

    Connect to anything

    Content Lake

    Real-time database

    Watch product demo

    Features

    Real-time collaboration

    Fearlessly work with content

    Precise content querying

    Treat content as data with GROQ

    Localization

    Coherent messaging across territories

  • Use cases

    E-commerce

    Richer shopping experiences

    Marketing sites

    Control your story

    Products & services

    Innovate and automate

    Mobile apps

    Content backend for every OS

    View all

    Integrations

    Shopify
    Mux
    Vercel
    Netlify
    Algolia
    Cloudinary
    BigCommerce
    Commerce Layer
    Smartling
    Transifex
    View all
  • Learn

    Documentation
    API reference
    Guides
    GROQ cheat sheet
    Sanity UI
    Get started

    Build and share

    Templates
    Tools and plugins
    Schemas and snippets
    Project showcase
    Share your work
    Browse Exchange

    Frameworks

    React
    Vue
    Next.js
    Nuxt.js
    Svelte
    Remix
    Gatsby
    Astro
    Angular
    Eleventy
    View all
  • Discover

    Blog
    Resource library
    Agency partners
    Become a partner
    Technical support
    Talk to sales

    Case studies

    Puma

    Source of truth for all global markets

    Aether

    Unique digital shopping experience

    Morning Brew

    Omnichannel media distribution

    InVision

    Delivering exceptional customer experiences

    View all

    Popular guides

    Structured content
    Content modeling
    Headless CMS
    Headless SEO
    Static websites
    View all
  • Enterprise
  • Pricing
  • Log in
  • Contact sales
  • Get started
Contact salesGet started

Static websites

  • What is a static website?
  • Static vs dynamic websites: what are the differences?
  • How to build a static website
  • The best static site generators

Categorized in

  • Composable architecture
  1. Resources
  2. Composable architecture
  3. Static websites

Last updated December 20th 2022

What is a static website?

  • Joe Holmes

    Software Developer and Technical Writer

Your website is the digital face of your company. Oftentimes, it’s also the first place potential customers engage with your business.

Yet many of today’s websites are built with the structure of a traditional database-driven site like WordPress or HubSpot. This type of website can be clunky, slow to load, a hassle for developers to maintain, and vulnerable to hackers. A static site can address many of these issues and may better serve your website needs. Learn how to connect your CMS to a Static Site in 3 steps.

What is a Static Website?

A static website uses server-side rendering to serve pre-built HTML, CSS, and JavaScript files to a web browser, in contrast to traditional dynamic sites that work by rendering the webpage at the time of the request.

Static sites enable you to decouple your content repository and front-end interface, giving you greater flexibility in how your content is served. Cost-efficiency is another reason companies migrate to a static site because static files are lightweight and often faster and cheaper to serve.

In the last few years, static sites have greatly increased in popularity. This surge is primarily due to advances in developer tools (languages and libraries) and a stronger desire among businesses to optimize website performance beyond the limits of a database-driven site. Below, we’ll discuss the benefits of a static site in greater detail.

Static Generators vs. Dynamic Sites

Static sites can be written almost exclusively in HTML and serve a fixed set of data that renders the same for every site visitor. Static sites use server-side rendering to serve pre-built HTML, CSS, and JavaScript files to a web browser.

Dynamic sites operate in a completely different way, by leveraging HTML and CSS as well as server-side scripting languages like PHP to build webpages on the fly and serve different content to each site visitor.

Static vs. dynamic sites: what are the differences? →

Why you should consider using a Static Site Generator

Speed/Performance

Server-side rendering presents fewer potential challenges when it comes to site loading since the data (your site content) is being delivered as a fully pre-rendered webpage. Site visitors are less likely to experience issues such as broken images or pages that won’t load.

Page speed can also be faster because a static site is pre-rendered as lightweight, static HTML files. It’s more efficient to render a pre-built webpage instead of building out the webpage for every visitor. Improved page speeds can also translate to better SEO rankings.

Flexibility

Static sites can be rendered using a multitude of frameworks. Developers can work using their preferred language and framework (such as JavaScript, Ruby, React, Vue, etc.), making the build and maintenance easier to perform. Other advantages include leveraging your cloud infrastructure better and simplifying site development thanks to fewer dependencies.

Scalability

A static site lets you present content across multiple channels without having to reauthor your content. What’s more, a static structure can easily adapt to the changing needs of your website or app.

Security

With a dynamic site, hackers have multiple opportunities to breach your data because the entire system is connected. Yet with a static site, your content database exists independently from your front-end web interface. This setup gives hackers fewer entry points and keeps your data more secure. Website visitors do not connect to the content database each time they visit your website, which provides yet another security advantage compared to database-driven sites.

The best static site generators →

3. How to build your Static Site

A static site generator lets you apply a template to your data and content, which simplifies the process of converting your data into a website or application format. There are dozens of versions available for use with different developer languages and frameworks. Consider factors like site size, primary purpose, and functionality when evaluating static site generators.

Some of our favorite top and up-and-coming static site generators include:

  • Next.js - A popular framework for static React applications.
  • Hugo - A static site generator written in Go and known for its site build speed.
  • Gatsby - Perhaps the most popular React-based static site generator.
  • Jekyll - Ruby-based and one of the most commonly used static site generators.
  • Nuxt.js - Similar to Next.js, except that the framework is based on Vue rather than React.
  • Eleventy - A lesser-known JavaScript-based option that has been gaining traction in the developer community.

If you want to browse even more options, check out this great list of static site generators from Jamstack.

We recommend using a static site CMS in conjunction with a static site generator to build your static site.

How to build a static website: a step-by-step guide →

Hosting your Static Site on a CDN

Modern hosting providers like Netlify and Vercel use Content Delivery Networks (CDNs) to host static sites. This ensures that your site renders quickly for site visitors regardless of their location. A CDN caches static assets across a geographically distributed network of servers at the network edge, making it ideal for use with a static site (which consists of a set of static assets).

Want to see how this works? All of the Sanity.io starter projects are set up automatically with CDNs on Netlify or Vercel. Get a Sanity starter project up and running in minutes.

Sanity: built for SSGs

A next-gen headless content platform, Sanity is a robust decoupled back end optimized for seamless integration with SSG-built sites. Enjoy best-in-class developer experience and a product built from the ground up with SSG-friendly content modeling in mind.

Try Sanity
Next
Static vs dynamic websites: what are the differences?

Page content

  • What is a Static Website?
  • Why you should consider using a Static Site Generator
  • 3. How to build your Static Site

Product

Sanity StudioAPIsContent LakeSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

DocumentationBlogResource libraryCase Studies
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
  • Next.js blog
  • Next.js personal website
  • Clean Next.js + Sanity app
  • Clean Remix + Sanity app
  • Clean SvelteKit + Sanity app
  • All Templates
  • Agency partners
  • Technology partners
  • Headless CMS 101
  • What is an API CMS
  • Static Sites 101
  • Headless Commerce 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • Content as a Service
  • What is a DXP?
  • Typescript 101
  • Ecommerce SEO
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS

Company

Contact SalesEnterpriseCareersTerms of ServicePrivacy PolicyAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023