JPytr.com has recently been rebuilt using HUGO and the JAMStack. This post discusses gives a brief overview and introduction to the JAMStack.
Familiarity with version control and the basics of web-development will be helpful to follow along.
Introduction
What is the JAMStack?
JAMStack is a technology stack used to build “static” websites.
The JAM in JAMStack stands for:
- JavaScript
- Application Programme Interfaces (API’s)
- Markup
And a stack refers to combination of software products and languages used to create a web application
What is a static site?
Static content refers to files or content that can be delivered to the end user without having to be generated, modified or processed by a server. This means that the same content is delivered to all users of site. Typical examples of static files are HTML, CSS, JavaScript, and images.
Static content contrasts with “dynamic content” which is generated by server side languages such as PHP, NodeJS, or Python. A static site has no 1st party dynamically generated content and relies primarily on serving static files to the user.
The simplified setup associated with a static site takes away the potential to deliver dynamic content, however a static site can be supplemented to deliver richer functionality and interactivity, through the use of external API’s (which communication with 3rd party services), and “client side” JavaScript. The comment section of this site is one example of where an API can be used to provide dynamic style content.
A Markup language or Lightweight Markup Language (LML) is designed to provide a “humane” easy to write, easy to read language which can be edited or written in a generic text editor. A raw markdown file can be read or edited easily by a person, and converted by a machine to less human friendly formats like HTML.
A Static Site Generator is a tool which converts the Markup language to HTML, and can also incorporate templating engines like Jinja or Go Templates to reduce repetition and allow developers to refactor code effectively, and introduce programmatic logic. Without a static site generator, or something similar, creating a static site would involve writing raw HTML, CSS, JS etc. And if you wanted the same navbar on each page, a lot of copy and pasting would be required: editing would be a nightmare. With a SSG the developer can use a combination of templates, HTML, CSS, JS, and Markdown, which makes the development experience more human friendly.
What are the advantages of a static site?
Performance
Static sites are generally faster than dynamic sites as web-pages are pre-built, and so there is no additional time spent generating or processing the content. This simplifies the process of serving files to the user, and also opens up new deployment options, such as deployment via a Content Delivery Network or CDN.
A content delivery network or content distribution network (CDN) is a geographically distributed network of proxy servers and their data centers. The goal is to distribute service spatially relative to end-users to provide high availability and high performance. CDNs serve a large portion of the Internet content today, including web objects (text, graphics and scripts), downloadable objects (media files, software, documents), applications (e-commerce, portals), live streaming media, on-demand streaming media, and social networks. (Wikipedia)
The image below illustrates a single server setup (left) e.g. my old WordPress site vs. a CDN distribution scheme (right) e.g. the new JPytr.com site.
Static sites deployed using Content Delivery Networks (CDN’s) will ensure that users around the world have a high performance web browsing experience.
Ease of development
Working with a static site takes away a lot of the strenuous activity associated with maintaining a dynamic site, like managing databases and security. This frees up more time to focus on the site content, and look and feel.
The workflow associated with developing a static site is also a pleasant and productive experience, and allows a great deal of flexibility.
Example workflow
-
Content: I am currently writing this post in a Markdown file within an Atom editor. As I edit the Markdown content the Static Site Generator is providing a light weight local server, detecting changes to markdown, and rebuilding the site as changes are made. This means that I can write content and instantly see the effect of the changes in my browser.
-
Version Control: When I am happy with the content I can commit my changes and push the new site content to my preferred version control system (gitlab).
-
Deployment: Deployment can then be automated using continuous integration pipelines, CDN’s like Netlify have access to the version control system and can redeploy the site as changes are made. Deployment occurs in a matter of seconds.
This creates a really productive workflow particularly for those who are more tech savvy. As a side note many non-technical users will prefer to use a visual/graphic Content Management System (CMS). The ease of use associated with a CMS contributes to the success of technologies such as WordPress. However, whilst most Static Site Generators do not provide a CMS as standard, a CMS is still an option for static sites services such as forestry.io offer such solutions.
Cost Effective
The tools required to build and deploy a static site are either open-source and open-licence, or free for non-commercial use. Meaning that with a little effort anyone can develop and deploy a static site at little to no-cost.
Couple the cost benefits with the performance benefits of static deployment, and you have a technology stack delivers great bang for your buck.
Better security
As there is no database in a static site, and the site can be deployed via CDN security is much less of a concern to the developer. Modern CDN’s also make it very easy to include HTTPS encryption
What are trade-offs?
-
Lack of Sever-side functionality: Because the site is pre-built and “static” there is no opportunity to generate dynamic content on the fly. In particular there is no database, which as noted previously is a benefit from a security perspective, but makes the developer reliant on external API’s to deliver “dynamic” style content such as comments sections etc. More complex sites will benefit from having server side dynamic functionality (for Python see Flask, Django, Pyramid).
-
Technical Knowledge: Relative to running your own dynamic site utilising Flask, PostgreSQL, Nginx, Gunicorn etc. running a static site is straightforward. Relative to using a managed Wordpress site for your blog, it’s more complex and may not suite non-technical content creators.
Where to get started
Choosing a Static Site Generator
There are a huge number of static site generators. I would personally recommend HUGO which utilises Golang templates. There are also Python based alternatives such as Pelican, or Lektor. Jekyll is probably one of the more popular choices which uses Ruby. It’s probably worth picking one of the more popular options as there is likely to be a larger user base which means more support, fewer bugs etc.
Hosting
A quick internet search will bring up a wide range of hosting options, many version control systems such as gitlab allow users to deploy and host a site free of charge. There are also many popular choices in terms of CDN’s.
Continuous integration
The are many options here. But to get started Continuous Integration can be implemented easily using a single configuration file included within your code repo:
CDN’s like netlify also offer point and click deployment which is super easy: