Build static sites with Kontent
If you’re looking to launch a static, secure, and speedy website, you may be considering a static site generator (SSG). In combination with the JAMstackOpens in a new window approach and a headless CMS to store your content, you're on the way to success.
Choose your favorite technology and see what tools are available to you out of the box. And if you're still a bit uncertain whether static sites are the way to go, check out the main benefits SSGs have to offer.
Table of contents
Benefits of static site generators
Static site generators (SSG) take the prepared content, typically stored in flat files, apply it against templates, and generate a structure of static HTML files, ready to be delivered to your visitors. When compared to dynamic websites, they come with several advantages:
- Speed – An absence of the database makes the static site much more speedy and easier to load. All the server needs to do is return a file back to the user. There is no need for database queries, no client-server requests to process. Static site generators store a pre-built version of the site that can be delivered nearly instantly.
- Security – Every request for a web page made to a dynamic site causes an application to run and fetch content from a database. This creates a high risk of the site being attacked and the data being stolen. With a static site, security is the job of the web server. A static site using a CDN is practically immune to attacks because even if one web server on the CDN network goes down from an attack, other servers are still available. And since static sites don't process user data, there is no data to be stolen.
- Scalability – Unexpected traffic surges might crash a dynamic site. A static site is much better prepared as delivering static pages consumes very little server resources. Basic static sites with HTML files can be easily scaled up by just increasing the bandwidth.
- SEO – Load time speed is crucial to get ranked higher by search engines. And your static site will always be faster than dynamically generated websites. Also, static content is easier to parse by the web crawlers.
- Hosting and cost – HTML files for your static site can be served anywhere, scaled and migrated as needed. Plus, the files require less space making the hosting of static websites cheaper to that of dynamic sites.
But of course, running a static site has its disadvantages as well. Serving a static pre-rendered content means that you cannot tailor the experience on your site for each and every user. If serving real-time data and dynamic experience is a must for your site, dynamic sites are the way to go.
Combining the best of both worlds
Static site generators help you create lightweight, fast-performing, and secure websites. Using an SSG alone, however, has its limitations.
You might be OK with editing text files in Markdown format every time something on your site needs to change. But what about your less tech-savvy coworkers? Adding a headless CMS to the mix makes collaborating during content creation a breeze for the whole team. And not only that, you gain a proper workflow, role permissions, and all the benefits of structured content that a simple text file just can't offer.
To make sure you're completely of the hook from updating the content on your site, you can use webhooks to help you set up a tool that will pull content via Kontent APIs and generate a new static site whenever content has changed within the CMS.
Using Gatsby with Kontent
Gatsby is a React-based static site generator that leverages GraphQL for manipulating data. The Gatsby source plugin for Kentico KontentOpens in a new window (available as the
@kentico/gatsby-source-kontentOpens in a new window npm package) retrieves data from the Kontent Delivery API to build static sites using GatsbyOpens in a new window. There's also the
@kentico/gatsby-kontent-componentsOpens in a new window npm package that contains React components useful when processing Kontent data.
For more details, see the Gatsby guideOpens in a new window to learn how to use the plugin to source content from Kentico Kontent.
Vue.js tools to work with Kontent
The Kontent source plugin for GridsomeOpens in a new window allows you to work with Kentico Kontent as your content source to build static sites using GridsomeOpens in a new window. Gridsome is a Vue-powered static site generator for building blazing fast static websites. It is data-driven meaning it uses a GraphQL layer to get data from different sources in order to dynamically generate pages from it.
Using Wyam with Kontent
The Kentico Kontent Wyam libraryOpens in a new window (available as the
KenticoCloud.WyamOpens in a new window NuGet package) is a module that enables you to retrieve content items from Kentico Kontent to build static sites using WyamOpens in a new window. Wyam (rebranded as StatiqOpens in a new window) is a flexible and extensible static content generation framework for .NET.
See a blog post on how to develop a static site using Kontent Wyam libraryOpens in a new window in a combination with Netlify as a hosting service.
Using Jekyll with Kontent
Kontent JekyllOpens in a new window is utilizing Kentico Kontent as a content repository and lets you integrate with JekyllOpens in a new window. Jekyll is a simple, blog-aware, static site generator written in Ruby and using Liquid as a templating engine.
With Kontent Jekyll, you can generate posts, pages, collections, and data items. For full configuration details, see its Wiki page on GithubOpens in a new window.
- Check what's available for GraphQL that serves as a middleman between your app and Kentico Kontent.
- See how to make your static site dynamicOpens in a new window by providing dynamic functionality delivered via serverless functions.
Find available .NET SDKs to develop Kentico Kontent powered apps.
Check our Ruby SDK for retrieving content from Kentico Kontent.