WTF is a Static Site Generator
ByPhilippe Bodart | Created on Jul 18, 2018
History, background and Future of Static Site Generators
The difference between a Wordpress website and a Static site is well described in one of David Walsh blog posts.
How does a Wordpress website work
Try to imagine for a second that the only way for people to know what’s happening in the world is to go to the nearby news kiosk and ask to read the latest news. The attendant has no way to know what the latest news is, so he passes the request on to a back room full of telephone operators. When an operator becomes available, they will take the request and phone a long list of news agencies, ask for the latest news and then write the results as bullet points on a piece of paper. The operator will then pass his rough notes on to a scribbler who will write the final copy to a nice sheet of paper, arrange them in a certain layout and add a few bits and pieces such as the kiosk branding and contact information. Finally, the attendant takes the finished paper and serves it to the happy customer. The entire process will then be repeated for every person that arrives at the kiosk. That is essentially how dynamic websites work. When a visitor gets to a website (the kiosk) expecting the latest content (the news), a server-side script (the operators) will query one or multiple databases (news agencies) to get the content, pass the results to a templating engine (the scribble) who will format and arrange everything properly and generate an HTML file (the finished newspaper) for the user to consume.
How static sites work
Beyond simplicity the main advantages of the JAMstack are
- SEO : First, simplifying your URLs and site architecture is often easier with JAMstack than it is with a dynamic website and full CMS. Rather than relying on complex server-side URL rewrites to make your content available at pretty URLs (example.com/?p=12345 → example.com/nice-and-tidy/), your URLs can be whatever you want them to be: they simply reflect the locations of your website’s files. The potential for unwanted duplication is also massively reduced. Many CMSs will automatically generate pages for categories, tags, and date-based archives which you may not even need. Typically, such pages are handled with no index directives or canonicalization using extra plugins. Static site generators instead allow you to fine-tune page creation and create whatever taxonomy suits your content. Should you require it, many generators include powerful logic and functions for creating filtered, paginated archives.
- Speed - Closely related to SEO, but obviously critical for UX too, is speed. The speed advantages of static websites can be phenomenal. With HTML generated in advance and database queries eliminated, your content can be served instantly from a global CDN. An experiment by Mathias Biilmann for Smashing Magazine found that with a highly optimized dynamic website (including a robust caching implementation), the time to first byte was on average six times faster using a static version distributed via CDN. Back in 2010, Google said page speed was a ranking factor but it “was focused on desktop searches” only. Now, in July 2018, it will look at how fast your mobile pages are and use that as a ranking factor in mobile search. Google has been promising to look at mobile page speed for years now, and it is finally there.
- Security – your website build with a Static Site Generator is an absolute fortress, plain and simple.
- Deployment and workflow – A core principle of JAMstack development is that everything lives in a Git repository; everything from our static sites components, generator config files, CSS & JS, to our written content (saved as plain-text markdown documents). With your hosting/deployment service configured to continuously mirror the appropriate branch of your repository, making a change can be as simple as pushing a commit to GitHub. Your entire website – code and content – lives in one centralized location protected by robust version control, and can be setup for continuous deployment.
For bloggers who would typically use a pre-built theme for their site, there are now hundreds of options. It’s worth mentioning that some technical know-how is still required to get up-and-running with one of these static generators. They’re certainly a long-way off becoming thriving theme marketplaces in their own right, but in a way that’s a good thing: bloated themes stuffed with unnecessary plugins and page builder tools are not a problem here!
The future of Static Site Generators
A common question that arises when a frontend tool, workflow or library becomes popular is, how long will it last? It’s tough to say how reliable these predictions are, but based on the track record of the web—static sites were around in the early days of the web and are still heavily used—static sites are likely a mainstay for the foreseeable future. A feature that we’ll likely see moving forward is interface improvement for non-technical users. Currently, static site generators are heavily geared towards developers; “for developers by developers”. Many of them utilize the command line and rely on markdown as input for content; without a user friendly GUI interface to manage content. Thankfully, we’ve already seen the Headless CMS movement emerge to address this with content creating and editing experiences that prioritize non-developers. Solutions like Contentful, Prismic and Forestry provide proprietary solutions while Netlify CMS, WebriQ CMS and Strapi are fully open soure. With these solutions, a content creator doesn’t need to be privy to the intricacies of the build and can focus on creating content. Another feature that will likely grow over the next few years is the integration of serverless functions in static site generators. You can easily enrich your JAMstack site with dynamic functionality by including third party services and APIs. By default, a static site—being static—doesn’t allow for this functionality. Relying on third party services to handle this functionality may add unnecessary load that will slow down the performance of your site and expose you to potential security exploits. A good alternative that has been slowly gaining momentum are serverless functions. Serverless architectures encourage business-logic driven development, without making premature optimizations. As an architecture that scales well and is still easy to maintain, serverless functions fit in with the paradigm of lightweight aesthetic of static sites. Though serverless functions are still in their infancy, you can start using serverless functions in your static sites today using Netlify Functions, which lets you deploy Lambda functions without an AWS account, and with function management handled directly within Netlify.
How can your company benefit from the JAMstack and this web development revolution?
In this rapid changing web development environment, it is hard to keep up with all the changes, especially when you do not have an internal team that can support your web and digital marketing efforts. It is important to have access to a pool of competencies and people that can design and develop your website or web application and give it the right look and feel that potential customers will be attracted by it. You need access to people that can help you create the needed visibility for your website and can produce the necessary content to enable viewers and customers to easily find you on the Internet. You need a team of forward thinking developers and designers that can make an impact on how your viewers and customers experience your website or web application.