WTF is a Static Site Generator
David Walsh is a premier name in the website creation industry. His blog posts are filled with highly useful information about HTML, CSS, and other programming languages. He also talks extensively about website design and open-source programs available today. His articles describe the difference between a WordPress website and a Static website or a static site generator in a very colorful way. Here is a summary for you.
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 the latest news, 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 paper piece.
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 particular layout and add a few bits and pieces such as the kiosk branding contact information. Finally, the attendant takes the finished paper and serves it to a happy customer. For every person that arrives at the kiosk, the process repeats itself over and over.
That is essentially how dynamic webpages work. When a visitor gets to a website (the kiosk) expecting the latest content (the news), a server-side script (the operators or websites generator) will query one or multiple databases (news agencies) to get the content. The results go 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 site generation work
Static site generators propose to shift the heavy load from the moment visitors request the content to the moment content changes.
Going back to our kiosk metaphor, think of a scenario where news agencies call the kiosk whenever something newsworthy happens. The kiosk operators and scribbles will compile, format, and style the stories and produce a finished newspaper right away, even though nobody ordered one yet. They will print out many copies (infinite, actually) and pile them up by the storefront.
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, staying in a pile, serving the customer instantly. And that is how static site generators work.
Static site generators 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 sites generators, many of the main issues surrounding static building sites are finding answers through new tools.
Managing content and administrative tasks can be challenging for end-users who don't have a technical background. The 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, is that you'll use the former only for "content management" tasks, not templating and front-end content generation, making it easier for content managers and editors to contribute to the content of the site or the web application.
The term for building sites using Static site generators coins with the name JamStack. It stands for JavaScript, APIs, and Markup, and it describes a way of building static, database-free site pages. 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 and website generators, we refer to the technology used to build, power, and serve them.
Beyond simplicity, the main advantages of the JAMstack
SEO: First, simplifying your URLs and site architecture is often more comfortable with JAMstack than it is with a dynamic website generator and full CMS. Rather than relying on complex server-side URL rewrites to make your posts available at pretty URLs (example.com/?p=12345 → example.com/nice-and-tidy/), your URLs can be whatever you want them to be: they reflect the locations of your website's files. The potential for unwanted duplication is also massively reduced. Many CMSs will automatically create pages for categories, tags, and date-based archives that you may not 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 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 pages can be served instantly from a global CDN. An experiment by Mathias Biilmann for Smashing Magazine found that with a highly optimized dynamic site (including a robust caching implementation), the time to first byte was, on average, six times faster using a static version distributed via CDN. In 2010, Google said page speed was a ranking factor, but it "was focused on desktop searches" only. Now, in September 2020, it will look at how fast your websites deploy mobile pages and use that as a ranking factor in mobile search.
Security – your site built 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 (e.g. GitHub pages); everything from the components of your static site, generator config files, CSS & JS, to your written articles (saved as plain-text markdown documents). With your hosting/deployment service configured to continuously mirror your repository's appropriate branch, making a change can be as simple as pushing a commit to GitHub. Your entire site – code and content – lives in one centralized location protected by robust version control, which you can deploy continuously as needed.
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 site generator is now a viable option, and headless eCommerce is within reach for small retails. Download our ebook on Headless eCommerce here for more details.
Hundreds of theme options for bloggers who would typically use prebuilt templates for their site. 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 templates and traditional website themes that use unnecessary plugins and page builder tools are not a problem here!
Which Static site generator should you use?
There are about 400 Static Site Generators to choose from. Only a select number have reached maturity and are currently dominating the field. Which ones should you use to deploy your pages?
The best in class for 2021 and beyond
GatsbyJS
Gatsby brings static pages to front-end stacks, leveraging client-side JavaScript, reusable APIs, and prebuilt Markup. It's an easy-to-use solution that creates a SPA (Single Page Application) with React.js, Webpack, modern JavaScript, GraphQL, CSS, etc.
Gatsby.js is a static PWA (Progressive Web App) generator. It pulls only the critical HTML, CSS, data, and JavaScript so that your site can deploy as fast as possible, even offline. Gatsby's rich data plugin ecosystem lets a site pull data from various sources, including headless CMSs, SaaS services, APIs, databases, file systems, and more.
Gatsby has a wide range of applications and is a solid choice for sites that need to utilize data from many sources. This project's ambition is limitless, and with several unique new features, don't be surprised if adoption continues to skyrocket in 2020, and likely beyond 2020.
WebriQ has over 100 projects under its belt with the GatsbyJS Static Site Generator.
Hugo
An easy-to-set-up, user-friendly SSG that doesn't need many configs before you get the site up and running.
Hugo is well-known for its build speed (it claims to be the "world's fastest"), and its data-driven content features make it easy to generate HTML based on JSON/CSV feeds. You can also write your shortcodes and use the prebuilt templates to quickly set up SEO, comments, analytics, and other functions.
Besides, Hugo provides full i18n support for multi-language sites, making it easy to reach an international audience. Particularly useful for e-commerce merchants who want to localize their sites. Oh, and you like having options when it comes to themes? Hugo has hundreds of them.
With Hugo Modules, it now supports its dependency manager. It enables fetching of dependencies from any remote sources (GitHub, BitBucket, etc.) and even handpicking which files/directory from any given module merges in your project filesystem.
Its latest feature to date is called Render Hooks, which allows you to overwrite default rendering of Markdown images and links.
GRIDSOME
Gridsome is to Vue.js what Gatsby is to React. So if you're already down with Vue, you should check this one out. Even though it's a very young product, it still boasts an impressive number of features (PWA development, GraphQL queries, SEO-friendly SPAs, etc.). They are working on a plugin that will let you build Gridsome sites visually. It'll feel like Webflow and use Vue components as building blocks. Indeed a development to keep a close eye on.
Eleventy (11ty)
Making its first appearance on the official list in 2020 is Eleventy! "A simpler static site generator."
11ty is the equivalent of the well-known Jekyll, for JavaScript. Why do I put it before its predecessor on this list? Because I can feel a genuine excitement at the moment for what's in store for 11ty in the JAMstack community.
No doubt, it has become a genuine contender. Prepare to hear the name "Eleventy" thrown around a lot in the next few years.
The future of Static Site Generators
A common question arises when a front-end tool, workflow, or library becomes popular: 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 webpages are likely a mainstay for the foreseeable future.
A feature that we'll probably 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 use the command line and rely on markdown as input for published materials; without a user-friendly GUI interface to manage the pages.
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 Sanity, Contentful, Prismic, and Forestry provide proprietary solutions while Netlify CMS and Strapi are fully open source. With these solutions, a content manager can create content without having to be privy to the build's intricacies.
Another feature that will likely grow over the next few years is integrating serverless functions in static site generators. You can easily deploy and 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 an unnecessary load that will slow down your site's performance and exposes you to potential security exploits. A good alternative that has been slowly gaining momentum is 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 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. It lets you deploy Lambda functions without an AWS account, and with functions, management is handled directly within Netlify.
How can your company benefit from the JAMstack and this web development revolution?
In this rapidly changing web development environment, it is hard to keep up with all the changes in HTML, CSS, and other programming scripts. Even if you are well-versed with HTML for years now, there will still be a need to learn about other development languages. The difficulty is especially high when you do not have an internal team that can deploy and support your web and digital marketing efforts.
It is vital to access a pool of competencies and people who can design and develop your site or web application and give it the right look and feel that potential customers will be attracted. You need access to people to help you create the required visibility for your website and produce the necessary content to enable viewers and customers to find you on the Internet easily. It would help if you had a team of forwarding thinking developers and designers that can make an impact on how your viewers and customers experience your web applications.
At WebriQ, we develop and deploy JAM Stack webpages and we have been doing this for over four years now. With a dedicated JamStack APP, we have built, designed, updated, and managed hundreds of sites. In this model, we are using a Static Site Generator to create the site, a GIT based or headless CMS system to update the content, and a Github repository to store all HTML, CSS, and Javascript files.
A CDN network publishes the GIT files. Whereas this model had quite a bit of shortfall, especially with larger projects, mature headless content management systems, such as Sanity, Contentful, Directus, or Strapi have essentially overcome those shortfalls. You can read more about WebriQ's headless content management approach in https://www.webriq.com/monolithic-cms-versus-headless-cms and https://www.webriq.com/why-consider-headless-cms-for-content-marketing.