Deploying Fast Static Sites with Jamstack

There are essentially two ways to deliver a website to a user.  Through static web pages or dynamic web pages. 

Static web pages are delivered to the user’s browser exactly as they are stored on the web server. Static pages deliver HTML marked-up content, CSS, and Javascript the same way to every visitor, ensuring a uniform experience no matter who is accessing the site.

On the other hand, websites can be delivered as dynamic web pages, where some of the content is generated dynamically on the web server at the time of the request. For example, when a user requests a web page from a WordPress website, a server needs to generate the content using a template engine, pulling data from a database or a third-party API to create the needed HTML to present to the user.   

The Benefits of Static Web Pages

1. Speed

Static web pages offer a whole range of advantages, the first of which is speed. Static web pages load very fast because they deliver the files just as they are stored on the web server. There is no need to generate anything when the request is made. This is the same reason that many dynamic sites employ caching. 

2. Affordable 

Static sites are cheap to run, as the underlying web server doesn’t need to actively run any code, nor does it need any kind of advanced configuration. The servers just need to deliver static assets upon demand from its file system. There is no expensive DB layer to maintain either. This makes static sites a lot easier to maintain. 

3. Security 

Static sites are also more secure. No code needs to be executed to build the site, so there is much less chance of malicious code injection or cross-scripting attacks. Because there is no active administration system running, there is no admin privilege a bad actor can gain. As the saying goes: “there’s no code more secure than no code.” 

4. Scalability 

It’s easy to scale static sites. As more capacity to serve additional requests is needed, more servers can be added in seconds that serve the static images. This can be done by a lot of systems on the fly, without the need to pre-provision additional resources, as you must do with dynamic web servers. 

5. Stability

Static sites also bring stability. There is no code being executed to generate the content for users, so there’s limited risk of something going wrong in the delivery process. With current caching set-ups, even if a specific web server completely vanishes from the Internet, there is most likely a copy of the site cached somewhere ready to handle incoming requests.  

The Principles of Jamstack

The term Jamstack refers to a way of building websites and applications that deliver better performance, higher security, and a better developer experience, while also decreasing the cost spent on maintenance and scaling. Jamstack is more a core set of principles that developers adhere to, rather than a formal tech stack.  

1. Generate static assets at build time. 

The first principle of Jamstack is that static assets should be generated at build time whenever possible. The more static assets that can be built before they are served to the browser, the better. Ideally, the entire project can be served by static web pages. This is not always possible, but tools like Next.js have evolved to help developers adhere to Jamstack principles while still using dynamic generation when absolutely needed.

2. Deploy static assets to a Content Delivery Network (CDN).

The next principle of Jamstack is that these static assets are deployed to a Content Delivery Network (CDN). A CDN is a group of geographically distributed servers that replicate content to different points around the world. The closer someone is to a node in the network of CDN servers, the faster the content can be served to them. For example, if a static site originates in Argentina, but uses a global CDN network, someone in the EU will pull in the needed assets from their nearest CDN node, thus avoiding a full round trip to the other side of the planet to serve the page.  As a result, the page loads faster.

3. JavaScript will be used to call APIs to generate assets for dynamic content. 

The final overarching principle of Jamstack is that if dynamic content is needed, JavaScript will be used to call APIs to generate those assets. Originally, the name Jamstack was capitalized as JAMstack, with the first three letters standing for Javascript, APIs, and Markup. 

For example, if you would like to display a Twitter feed on a Jamstack site, you would use JavaScript to call the Twitter API to get the needed Tweets, and then render the Tweets to the screen, again using JavaScript.

The Tools of Jamstack

As with all approaches to building websites and applications, various tools and platforms related to Jamstack have emerged to abstract away some developer challenges, such as lessening their burden of hand-coding every element of their project.  These tools and platforms fall mainly into the areas of static site generators, headless CMS, and serverless platforms. 

Static Site Generator 

A static site generator (SSG), as the name implies, is software that produces a static website using various data sources and styling templates. There are many options, based on many programming languages. A few examples include Jekyll, which uses Ruby, Hugo, which is built with GoLang, and Gatsby, leveraging React. Next.js can be counted in this category, though it can also handle dynamic content generation as well. All these SSG programs pull in data from specified sources and create the styled static assets that will be deployed to the CDN.

Jamstack CMS: Headless CMS 

The next technology to understand for Jamstack development is the Headless Content Management System (CMS). In general, a CMS is where you will store and manage the content for a website. You might already be familiar with legacy CMSs like WordPress, Drupal, and Joomla. These CMSs not only store the content but are also responsible for displaying that content, handling the presentation layer as part of the application.

Headless CMSs are not concerned with how the content will eventually be presented; that is the job of the SSG. 

There are multiple ways to store and retrieve content in a headless CMS, sometimes referred to as a decoupled CMS. Overall though, a good headless CMS will have an admin interface where content editors can write their copy and modify text in pre-set fields. The CMS admin interface is also where developers can define the various fields and content types in a process referred to as ‘content modeling’. Many applications, from smartwatches to Amazon’s Alexa, are leveraging headless CMSs to deliver content to the user. Traditional CMSs can be leveraged to serve the needs of Jamstack sites, but there has emerged a number of systems, like Storyblok and NetlifyCMS, that are custom-built for this use case.

Serverless Platforms

The final set of tools needed for Jamstack development are serverless platforms. This refers to online services that build, integrate, deploy and host applications. Whenever code is changed and pushed to a remote Git repository, or a new Git pull request is made, this triggers a build process that produces the static assets needed for the site. The same service will grab those static assets and deploy them to a CDN, often run by the same service. Netlify, Vercel, Azure Static Web Apps, and even GitHub Pages combined with GitHub Actions, are all serverless platforms.  

Jamstack: Pushing it All Together

A typical workflow for building a Jamstack site looks something like this:

1. Add content in your headless CMS, such as Storyblok.
2. Add references to that content in your SSG, such as Next.js.
3. Style the content with your SSG, using something like TailwindCSS.
4. Push those committed code changes to your online repository, using GitKraken.
5. Watch the build process work on your serverless platform, delivering the final rendered site to your URL. 

Click here to see Facundo walk through an example of adding content types to a Jamstack site using Next.js as the SSG, Vercel as the serverless platform, and Storyblok as the headless CMS. Watch as he uses GitKraken to commit changes and push to his remote. With GitKraken, you can quickly push changes by dragging-and-dropping one branch onto another from the central graph.

No matter what you are building, GitKraken can help take the complexity out of code management and the collaboration process.  Download the GitKraken Git client today, which includes a GUI and CLI to make your life as a developer easier with powerful visualizations and a Git-enhanced terminal experience, letting you focus on delivering your next awesome project instead of fighting to manage your codebase.