Have you ever opened a website that was loading for (what it seemed) ages? How long did it take you to close it? And have you ever gone back?
First impressions are, as we know, extremely important. Users judge your website (and therefore, you) immediately after they open it. That is why the loading speed is one of the most important components of user experience. Research has proven its importance over and over again.
This encouraged the return of static site generators in the software world. They are simple, secure, and very fast.
In this blog, we will uncover why and when to use them. Let s go!
What is a static website generator?
A static website is a plain HTML website that is designed, stored on a server, and delivered to a user s web browser just as it is. No content is generated between the user s click and loaded page. The content is generated in advance so that the view is ready to load.
On the contrary, dynamic websites fetch the content from the database, load an HTML template, render the content in the template, and return a formatted HTML page. See the illustration below for comparison.
A static website generator is a set of tools tasked with:
- applying data and content to templates, and
- generating a set of pages that can be served upon users requests.
Website performance is vastly improved this way because all that s left for the web server to do now is return a file.
Along with the static website generators growth in popularity, developers were creating various tools to support building websites in the language and environment of their choice. You can now use website generators in numerous programming languages and environments.
Apart from being fast, static sites are also very secure since no database can be corrupted and there are no vulnerabilities that can be exploited. They are reliable because the server only needs to host and return files, so there is a lesser chance that something will break on the fly. Another advantage is that there are no support and maintenance costs, making them cheaper.
On the other side, they do require technical knowledge. You depend on the documentation and the community, which is growing every day, but it is still small. You need to pay attention to file organization because data management is harder as the website grows bigger. There is no user management, and you need to have a machine and tools to generate static files and publish a website, as opposed to the content management systems that allow you to publish websites through a browser.
As we already mentioned, the greatest value that comes from using static site generators is the speed. This is why they are most commonly used by websites such as e-commerce, blogs, small personal websites, documentation, and marketing websites.
How to find the best static site generator?
There are many static site generators, so the big question is how to choose the right one for you. There are three key questions to be answered when choosing the static generator:
- What are you building?
- How are you building it?
- How complex are your templating needs?
You can find a large number of static site generators on the Static Site Generators website. The site features language and template descriptions, as well as statistics on how many times a particular generator has been downloaded and shared.
Headless CMS
A traditional CMS (Content Management System) consists of two parts:
- The part we use to manage the website (backend)
- The presentation part visible to users (frontend)
Headless CMS comes with content only; it is a back-end content management system, and instead of a presentation part, it offers an API (JSON, XML) for content delivery wherever it is needed.
Because of this approach, Headless CMS does not care about how and where our data is displayed. It has only one focus, and that is the storage and delivery of structured content. With Headless CMS we have a backend, while the programmer has to implement the frontend part. The advantage is that the programmer can choose a technology that is already known to him and he or she prefers instead of learning a technology specific to a particular CMS.
So the question is what happens to the presentation layer?
Static Site Generators come into play at this point. The programmer writes the code in a frontend framework of choice, which Static Site Generator combines with the content we got using Headless CMS, and creates a website.
This way we get a fast and visually appealing website that does not have to suffer the limitations imposed by the traditional implementation of websites.
This modern web development architecture based on vanilla JavaScript (or some of its frameworks such as React, Angular, Vue, and others), reusable APIs that collect data from various sources, and Markup on the basis generated by a website using static generators is called JAMstack.
It is important to highlight that JAMstack is not a programming language, but a web development approach for building web applications that have better performance, greater security, lower scaling costs, and a better experience for developers. With this approach, we no longer use monolithic applications as is the case with traditional CMS, but the application is broken down into smaller components.
CDN (Content Delivery Network)
CDN refers to a geographically distributed group of servers that work together to provide fast delivery to a website. Servers deliver cached static website content to users based on the user s geographical location. The popularity of CDN services is growing every day and most of the web traffic today uses CDN. For example, Facebook, Netflix, and Amazon all use CDN.
Websites implemented using a static site generator are ideal candidates for hosting on a CDN, as a CDN is commonly used to distribute static websites. This improves the loading time of generated HTML files and allows users to quickly access the desired data.
Gatsby
Why choose Gatsby as a static site generator when other generators are also extremely popular? We would go for Gatsby over others primarily because of the documentation offered by the community. Extensive documentation is available on their official site and every step of creating a Gatsby project is described in detail.
Gatsby can be used to create Progressive Web Applications, which follow the latest web standards and are optimized to be highly efficient. It uses popular technologies like React, Webpack, GraphQL, modern ES6 standard, Javascript, and CSS.
It is possible to use any package we have already used with NPM, especially those for React. Among other things, Gatsby offers a huge number of plugins, starters, and transformers. You will rarely need to implement your tool or modules because Gatsby offers a huge number of them that meet many needs. Gatsby can also be expanded with additional features. It offers support for SCSS and CSS-in-Javascript libraries which allows for better and easier style management.
With just one plugin (gatsby-plugin-sharp), we can directly generate fluid images, add filters, change the format, and much more. This saves a lot of time and effort on manually resizing images and improves performance. Gatsby is made to be flexible as we see from the widespread use of plugins.
Gatsby performs data fetching during build time. All this data is used to generate static HTML, Javascript, and CSS files and make rendering fast.
To create a Gatsby project you need to open a command line or some other tool you use and install Gatsby CLI:
npm install -g gatsby-cli
Once we have installed the Gatsby CLI we can proceed to create our first Gatsby website. When creating a project, use the so-called “starters” that partially create a website with a given configuration. Gatsby offers a multitude of starters with different architectures. The command to create a new project is:
gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
For example:
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
new – Gatsby command to create a new Gatsby project
hello-world – is the name of the project (we can call it whatever we want)
Finally, a GitHub URL that points to the repository where our starter is located where we want to use it. If we omit the starter URL, Gatsby will automatically generate a website based on the default starter.
You can find available starters for your Gatsby project here.
Gatsby is built on the React framework, so everything relevant for React applies to Gatsby as well (such as creating reusable components).
When we want to use data in our application we can extract it from different file types (Markdown, CSV, and many other sources) and use it directly within our components in the form we want. In that case, Gatsby offers two options.
The first way is Unstructured Data, and the second is GraphQL. When we have some small websites, unstructured data is a better choice. However, if we want to implement some more complex websites then GraphQL is a better choice.
We can use createPages Gatsby Node API to pull unstructured data into Gatsby pages directly. The createPage action is what actually creates the page and requires a parameter containing three fields:
Path: the relative path to the page
Component: absolute path to react component defined for this page
Context: data passed to a component. Data is an available component as props or as an argument in the case of GraphQL
So, for each page you want to create you must specify the path for visiting that page, the component template used to render that page, and any context you need in the component for rendering. We use the command to start our project:
gatsby develop
When we run the application, the static site generator creates a public folder on the root of the project within which it generates static data.
The good thing about using unstructured data is that there is no data layer. We collect the data and pass it to our site. However, a much better approach is to use GraphQL. For example, GraphQL allows you to only take the data you need, not what the API gives you back.
We can define the constants globally in gatsby-config.js, using siteMetadata object.
We access these items by building a GraphQL query and calling the variable from the HTML.
Only page components can build page queries. If we have a non-page component (in our case layout.js), we must use staticQuery.
We can use the GraphiQL tool to help us build queries. The access link will be written in the terminal after we run the application. We need to select items we will use on our page in the explorer menu and execute the query. After the execution, we will see our constants and their values. If the result reflects what we need, we can copy the query generated by the GraphiQL tool.
Conclusion
Static website generators are a great tool for building modern websites. They simplify creating, building, and compiling websites. There is a vast number of different static site generators that utilize different programming languages and environments and each of them has many benefits. The most significant is performance, following with the reliability, security. Since these are crucial features for a website, it is expected to see further growth in static website generators usage, and making them easier for non-technical users.