Static sites provide your team with a fast, reliable and easy to maintain website. Static sites are completely compatible with GraphCMS!
Statically generated websites are trendy for a reason! Here are some of the benefits of building your website as a static site:
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!
Managing image and video assets, as well as “dynamic” elements like navigation, can become problematic.
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.
Using a CMS with a static site comes at the cost of flexibility and performance.
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.
Creating static sites takes a lot of time.
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.
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.
npm install --save gatsby-source-graphql
gatsby-config.jsfile, add the source plugin with a
fieldName:, and API endpoint
useStaticQuery. See the Gatsby documentation at their respective URLs for the exact syntax and implementation.
option + spaceon mac or
alt + spaceon 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!