WebriQ Blog

WTF is a Static Site Generator

July 17, 2018

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

The proposition of a static site is to shift the heavy load from the moment visitors request the content to the moment content actually changes. Going back to our kiosk metaphor, think of a scenario where it’s the news agencies who call the kiosk whenever something newsworthy happens. The kiosk operators and scribbles will then compile, format and style the stories and produce a finished newspaper right away, even though nobody ordered one yet. They will print out a huge number of copies (infinite, actually) and pile them up by the store front. When customers arrive, there’s no need to wait for an operator to become available, place the phone call, pass the results to the scribble and wait for the final product. The newspaper is already there, waiting in a pile, so the customer can be served instantly. And that is how static site generators work. They take the content, typically stored in flat files rather than databases, apply it against layouts or templates and generate a structure of purely static HTML files that are ready to be delivered to the users. With an ever-growing ecosystem surrounding static site development, many of the main issues surrounding building static sites are finding answers through new tools. Content management and administrative tasks can be challenging for end users who don’t have a technical background. Good news is there’s an impressive number of CMSs out there ready to complete your Static site. The difference between those CMSs and traditional CMSs, like Wordpress, being that you’ll use the former only for “content management” tasks, not templating and frontend content generation, making it easier for content manager and editors to contribute to the content of the website or the web application. Building websites using Static Site generators is often referred to the term JAMstack, stands for JavaScript, APIs, and Markup, and it describes a way of building static, database-free websites. This concept is deceptively simple– the word ‘static’ implies simplicity, or a lack of interactivity, but this could not be further from the truth. When we talk about static websites, we’re referring to the technology used to build, power, and serve them.

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.
  • **An exploding user and development community **- Take ecommerce, for example. For smaller retailers – the kind who might typically rely on WordPress and WooCommerce – a static website is now a totally viable option. Snipcart is a JavaScript-based shopping cart and checkout system which allows developers to add ecommerce functionality to any website. Product inventory and sales are managed through the Snipcart dashboard, and its API allows integration with inventory management systems, shipping providers, and so on. Alternative solutions include Foxycart and the Shopify buy button.

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.

At WebriQ, we have been developing and deploying JAM Stack websites for over two years now. With a dedicated APP, we have been able to build, develop, update and manage hunderds of sites. In this model we are using a Static Site Generator to develop the site, a GIT based CMS system to update the content and a Github repository to store all HTML, CSS and Javascript files. GIT files are pushed to a CDN network. Whereas this model does fit well for most smaller projects, it has it’s shortfalls when it comes to larger projects or projects with a need for frequent content updates and updates made by a variety of users, content writers and third party contributions. Since the JAM Stack is more a concept then a real technology stack, we have been contemplating for a while how we could combine the best of the traditional LAMP Stack ideas and the serious advantages and benefits of the JAM Stack. It’s what I would call the GLUE of the JAM Stack.


Building a JAM STACK website with us REQUEST A QUOTE

Take Me Home