Static site with GraphCMS illustration

What is a Static Website?

A static site is a compiled website, meaning it is comprised of just the HTML, CSS and JavaScript required to run the page. All pages are statically built ahead of time through some kind of static site build too, or generator. The content is only updated when the website is “rebuilt.” Static sites offer many advantages over their dynamic site counterparts, including speed, security, and ease of maintenance. Throughout this page, we will be running through the different aspects of a static site, how to get started as well as integration capabilities with the Headless CMS, GraphCMS.

What are the Benefits of Having a Static Site?

Statically generated websites are trendy for a reason! Here are some of the benefits of building your website as a static site:

  1. Increased Speed & Performance. According to the NY Times, any website that takes more than 400 milliseconds is likely to cause a user to leave the website before interacting with its content. Behind the scenes, static sites are simply HTML pages! No templates to compile or data to fetch. Many different generators minify the files prior to deployment in order to garner an even faster “time to first paint.”
  2. Reduced Security Vulnerabilities. A static site has no server-side code running at any given time, meaning the surface area for an intrusion is minimized if not mitigated entirely. A database that does not exist cannot be accessed, nor compromised!
  3. Improved Reliability and Fewer Resources. Deploying a static site requires significantly fewer computational resources compared to it’s dynamic (WordPress, etc) counterpart because the server only returns flat files. It’s still possible to crash a web server, but it’ll take exponentially more concurrent requests.

Common Myths About Static Sites and Content Management Systems

In modern web development, static sites and content management systems are hot topics and for a good reason. With technology advancements from companies like Netlify, and the emergence of the JAMstack development model, static sites are modern creatures that are misunderstood by many.
Let’s clear some of that up!

Myth

Managing image and video assets, as well as “dynamic” elements like navigation, can become problematic.

Truth

The root of this misconstrued idea comes from teams not using a CMS. With GraphCMS, managing and transforming assets are a breeze. Elements like your navigation can be defined as a schema within minutes. More about static site generators will be elaborated upon further down the page.

Myth

Using a CMS with a static site comes at the cost of flexibility and performance.

Truth

GraphCMS is a headless CMS leaving all of the presentational flexibility to you as the developer, no longer requiring you to wrestle with opinionated templates or aging templating languages. Most of the static site generators we suggest focus on GraphQL as the query language, improving DX exponentially by reducing under/over fetching.

Myth

Creating static sites takes a lot of time.

Truth

Using the suggested static site generators below, you could set up a brand new site plugged into GraphCMS in a matter of minutes. If you are looking for a well-documented quickstart, we suggest using a GatsbyJS starter located at its installation guide.

Using a Headless CMS With a Static Site Generator

As a Headless CMS based on GraphQL, GraphCMS is a great option to manage content on your static site. Our static site generator of choice for our website is Gatsby. In our case, Gatsby uses GraphQL natively for CMS calls and can simply stitch in GraphCMS instead of mapping some kind of RESTful resolver to the Gatsby API. Presuming you have a Gatsby site already or have gone through the quickstart guide, here is a short introduction on getting GraphCMS set up with the static site generator, Gatsby.

code example of setting up the gatsby config
  1. In your command line run npm install --save gatsby-source-graphql
  2. In your gatsby-config.js file, add the source plugin with a typeName:, fieldName:, and API endpoint url:.
code example of setting up the static query and in code
  1. In the page or component that you’d like to call your information, to get started you have a choice of using either StaticQuery or useStaticQuery. See the Gatsby documentation at their respective URLs for the exact syntax and implementation.
  2. Insert your schema model to fetch exactly the data you wish. Using the API explorer tab in GraphCMS Web App will make sure that you have a valid query before inserting it into your code. A superpower feature is the play button under content views, which propagates all possibilities of a content model into your API explorer. From inside the API explorer, hitting option + space on mac or alt + space on windows will give you a drop down of fields that your content model supports.

For any further questions, join the #gatsby channel in our community slack group, and ask away!

A Few Static Site Generators to Use with GraphCMS

There are many static site templates and generators to use depending on your development stack of choice. These include JavaScript, Ruby, PHP, and even Golang. You can use GraphCMS with any of these, as well as any we have left out, as long as they can post an HTTP request.

React Static Site Generators

Vue Static Site Generators

General Static Site Generators