Gatsby offers some major benefits for both the developer experience and website user experience. From a development standpoint, Gatsby helps you get started quickly with your project by providing a starter library<\/a> that includes reusable templates and boilerplate code that fits different project needs.<\/p>\n\n\n\n From a website user experience, Gatsby is well-known for creating extremely fast and performant websites by pre-rendering the content delivered at the first request on the server side, while also offering client-side rendering for subsequent requests using React\u2019s hydration technique<\/a>.<\/p>\n\n\n\n Another key feature of Gatsby is its ability to load data from various sources including filesystems, databases, CMS, or APIs. This is done by relying on GraphQL<\/a> for querying these different data sources. The Gatsby data layer powered by GraphQL combines the data from different sources offering a unified point for data access.<\/p>\n\n\n\n Gatsby is also known for \u201cplaying nicely\u201d with SEO. Because it pre-renders the page on the server side and generates a resulting static HTML, it allows web crawlers to retrieve and index the content. This is in contrast to SPA frameworks<\/a> that rely on client-side Javascript rendering which might be challenging for some web crawlers to use.<\/p>\n\n\n\n We can double down on the performance features of Gatsby by using UpCloud\u2019s ultra-fast servers<\/a> to deploy our Gatsby websites. This also brings the scalability and resilience features of the Cloud to further enhance our application\u2019s user experience.<\/p>\n\n\n\n In this guide, we\u2019re going to cover the fundamental concepts and use cases of Gatsby, along with a practical example for building and deploying a Gatsby project to a Cloud server on UpCloud. Throughout this guide, you\u2019ll be able to understand the following:<\/p>\n\n\n\n To follow along with this guide, you\u2019ll need to:<\/p>\n\n\n\n Gatsby is a web framework that is capable of building super fast web pages by leveraging SSG pre-rendering techniques. That is, when a user sends a request to get a page, the HTML is already generated previously and ready to be served instantly.<\/p>\n\n\n\n Let\u2019s clarify this more with a simple analogy.<\/p>\n\n\n\n Imagine you walk into a coffee shop to order a drink, upon receiving your request, the barista starts \u201cbuilding\u201d your drink by assembling the different components required. After waiting for this \u201cbuild\u201d process to finish, you finally get your drink.<\/p>\n\n\n\n Now what if the barista already \u201cpre-built\u201d this drink and has it ready to be served before you order it? You now don\u2019t have to wait for the process of making your drink to finish, you just put your order and you have it delivered. <\/p>\n\n\n\n This is roughly what Gatsby or other static site generators do.<\/p>\n\n\n\n Gatsby prepares the HTML document that should be delivered to the user prior to receiving the actual user request. This process happens at build time and not runtime, meaning that when you build your Gatsby project, it starts rendering the page to make it ready for requests, instead of rendering it at runtime when receiving the request.<\/p>\n\n\n\n It\u2019s worth mentioning that newer versions of Gatsby also offer other rendering options<\/a> besides the SSG method.<\/p>\n\n\n\n To further extend our analogy, let\u2019s assume that not all of the ingredients of your drink are actually there in the coffee shop, and they need to request it from other external sources to be able to prepare your drink.<\/p>\n\n\n\n For example, they need to use a specific type of coffee bean that is required for your drink, but it\u2019s currently not in-stock, so they will order it from an external provider of this coffee bean. Now you\u2019ll also have to wait for the time it takes for the ingredient to be \u201cpulled\u201d from its source.<\/p>\n\n\n\n Gatsby also saves this time as it pulls any required data from external sources during the build process when rendering the page. Now the generated HTML has all what\u2019s needed to be served to the user upon request, no extra server-side processing is needed.<\/p>\n\n\n\n The process of pulling data from data sources in Gatsby relies on using GraphQL. This provides Gatsby with a lot of flexibility to query data from a variety of sources like external APIs, databases, or content management systems.<\/p>\n\n\n\n Although Gatsby can be used to build almost any type of website, it\u2019s widely popular for content websites like blogs, documentation, and e-commerce.<\/p>\n\n\n\n Gatsby is also well-suited for SEO, it provides built-in support for server rendering of metadata like description and title, and it includes them in the generated HTML pages. This capability is provided through a Gatsby SEO component and plugins like Gatsby React Helmet<\/a>.<\/p>\n\n\n\n The performance and scalability features of Gatsby are only one piece of the puzzle. At the end, there\u2019s still a critical role that the underlying infrastructure plays in the overall user experience. That\u2019s why choosing the right hosting option for your Gatsby website should be of a top priority.<\/p>\n\n\n\n Taking advantage of the Cloud is considered one of the best options for hosting your application. By leveraging the massive scalability and performance features offered by the Cloud, you can satisfy your application\u2019s non-functional requirements with less manual operations and overhead, and this is what the UpCloud servers<\/a> excel at.<\/p>\n\n\n\n UpCloud servers deliver world-class performance and reliability by utilizing the underlying technologies that UpCloud uses at every component of their infrastructure. Starting from the storage component, UpCloud servers can use the MaxIOPS<\/a> block storage system, an UpCloud-developed storage technology that outperforms industry-standard SSD<\/a>. Additionally, the block storage systems are served from a clustered storage area network<\/a> backend, and not from the local hypervisor, which provides higher levels of availability and recovery against hardware failures.<\/p>\n\n\n\n Another differentiating component for UpCloud servers is the underlying compute hosts<\/a>, which are designed for availability and use enterprise-grade virtualisation and hardware resources.<\/p>\n\n\n\n UpCloud also has a global presence<\/a> across multiple geographical locations, which provides the flexibility to deploy applications as close as possible to the end-users, improving their user experience. Now let\u2019s get into a practical scenario by installing Gatsby on our UpCloud server, then creating and testing a project. As mentioned in the prerequisites section, you need to already have your UpCloud server deployed and prepared with Node.js and npm.<\/p>\n\n\n\n Connect to your UpCloud server using SSH. You\u2019ll first need to generate an SSH key and use it for your server<\/a>. Then you can use the command Verify your Node.js and npm installation with the commands Install Gatsby CLI to initialize, build, and develop your Gatsby projects. There are multiple ways to use the Gatsby CLI, we can install it with npm using the command Now, navigate to your project directory and start the local development server with the command Now let\u2019s navigate our project folder and understand its most important contents:<\/p>\n\n\n\n Now when we build our project, we\u2019ll be able to navigate to the As we can see, the We can try this by adding a simple logo image to our website:<\/p>\n\n\n\n Next we\u2019ll create a component under Now let\u2019s try the So far we\u2019ve been testing our website using the However, this setup is not production-ready, so we need to do some additional steps to prepare our website to run in a production environment. In these steps we\u2019ll be installing and configuring Nginx to serve our Gatsby website instead of relying on the local development server, and we\u2019ll also compile and build our project files instead of just serving them in the development mode.<\/p>\n\n\n\n You\u2019ll find the list of pages rendered for your project at the end of the command output.<\/p>\n\n\n\n In the above configuration, we first set this server as the default, meaning that requests that have no matching host name in the Host header will be served from this server. Next we set our Now we\u2019ve our production-ready Gatsby website served using Nginx!<\/p>\n\n\n\n One of the major benefits of using Gatsby is its ability to boost your website’s SEO ranking. Of course, the SEO algorithms are complicated with a lot of factors taken into consideration, but we\u2019ll cover the key features of Gatsby that optimize SEO performance:<\/p>\n\n\n\n Meta description and title informs the user about the content included in the page, it\u2019s like a summary of what to expect when visiting this page. So, a compelling description should be a critical factor for driving organic traffic to your website. Note that you\u2019ll need to install the plugin first using the command You can use Gatsby to set your generated HTML page headings by configuring the page contents in its relative component.<\/p>\n\n\n\n The Gatsby image plugin<\/a> takes care of implementing the underlying complexities of image optimization while providing an easy way for the developer to leverage and customize the functionality of the plugin.<\/p>\n\n\n\n In the above example, we\u2019re using the StaticImage<\/em><\/strong><\/a> component from the Gatsby image plugin to add the smartphone.png<\/em><\/strong> image to our page and use the alt text A smartphone device<\/em><\/strong> to describe our image content.<\/p>\n\n\n\n We can improve our website performance by implementing some Gatsby optimization techniques. These techniques can be generally divided into the following categories:<\/p>\n\n\n\n Gatsby provides plugins such as gatsby-plugin-webpack-bundle-analyser-v2<\/em><\/strong><\/a> that help analyze and understand the used JavaScript bundle; we can later use these insights to optimize the JavaScript bundle.<\/p>\n\n\n\n Another styling improvement is to use Gatsby plugins that correspond to CSS-in-JS libraries. This will help render the styles on the server side and avoid the browser recalculating the size and position of elements on the page, also known as reflow<\/a>. Examples of these plugins are Gatsby styled components plugin<\/a> and emotions plugin<\/a>, which provide support for using styled-components<\/a> and emotions<\/a> libraries respectively.<\/p>\n\n\n\n We can also implement some minor font optimization techniques by reducing the font file size, store the font file locally<\/a> instead of installing it from an external source, and avoid including font extensions that you don\u2019t need.<\/p>\n\n\n\n Gatsby is a web framework for building fast, scalable, and SEO-friendly websites. It uses SSG pre-rendering techniques to optimize website performance and improve user experience. Gatsby also has the ability to load data from a variety of data sources using GraphQL. This offers great flexibility in generating the content of the web pages created by Gatsby.<\/p>\n\n\n\n In this guide, we covered the fundamental concepts of Gatsby and why we should use it for building a website. We used UpCloud high performance servers to install Gatsby and set up our first project. Then we tested our Gatsby project in the development mode and also in the production mode by using Nginx. Finally, we explored some techniques that we can use in Gatsby to optimize our website SEO and performance.<\/p>\n\n\n\n Ready to deploy your SEO-friendly and performance-optimized Gatsby website in the Cloud? Try UpCloud<\/a> now and explore a rich set of Cloud services that will help satisfy your website requirements.<\/p>\n\n\n\n Gatsby is a modern framework for building static sites. It optimizes speed, ensures accessibility, and integrates components for different SEO optimization techniques.<\/p>\n\n\n\n Install Node.js and Gatsby CLI, create a project, and test it locally. This guide provides step-by-step installation instructions.<\/p>\n\n\n\n Use \n
Prerequisites<\/h2>\n\n\n\n
\n
What is Gatsby and Why Use It?<\/h2>\n\n\n\n
Why Choose UpCloud for Hosting Gatsby Websites?<\/h2>\n\n\n\n
Combining all of these features with affordable and simple configurations<\/a> makes UpCloud a perfect choice for hosting different types of workloads, especially those that will benefit the most from the performance capabilities like Gatsby websites.<\/p>\n\n\n\nInstalling Gatsby on UpCloud<\/h2>\n\n\n\n
ssh -i <key-file> root@<server-IP>.<\/code><\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby1-1024x1024.png\")
<\/figure>\n\n\n\nnode -v <\/code>and npm -v.<\/code><\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby2-1024x262.png\")
<\/figure>\n\n\n\nnpm install -g gatsby-cli,<\/code> or we can execute it directly as a node package using npx gatsby <\/code>followed by the Gatsby command we need. For this guide, we\u2019ll be installing it using npm.<\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby3-1024x305.png\")
<\/figure>\n\n\n\n
Create a new project using the command gatsby new <project-name><\/code>.<\/em><\/strong><\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby4-1024x357.png\")
<\/figure>\n\n\n\n
This will automatically clone and use the default Gatsby starter<\/a> that includes boilerplate code and configuration to get started quickly with your project.<\/p>\n\n\n\ngatsby develop.<\/code> This development server is useful for testing your project locally.<\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby5-1024x913.png\")
<\/figure>\n\n\n\n
The above command starts the dev server locally on port 8000. By default, it can only accept requests on the localhost, meaning that you need to connect to it from the same server. Since our Ubuntu server doesn\u2019t have a browser installed, we can test the connectivity using curl with the command curl localhost:8000<\/code><\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby6-1024x306.png\")
<\/figure>\n\n\n\n
As we can see, we get a response with the HTML content of the Gatsby website. To enable connecting to our development server from anywhere, we can modify the gatsby develop <\/code>command by adding -H 0.0.0.0 <\/code>option, which specifies that the server should listen to requests on any interface IP address and not only the localhost.<\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby7-1024x386.png\")
<\/figure>\n\n\n\n
We can now connect to our server using its public IP from a browser on any other machine.<\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/image-132-1024x769.png\")
<\/figure>\n\n\n\nUnderstanding Gatsby project structure<\/h2>\n\n\n\n
![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby8.png\")
<\/figure>\n\n\n\n\/src <\/code>: This is the directory that contains the source code that generates everything in the frontend of your site. For example, there\u2019s a \/pages <\/code>subdirectory under the \/src<\/em> directory where you can create React components that are transformed into pages in your website with their path equal to their file name.
Let\u2019s clarify this by creating a file called about.js<\/code> under \/src\/pages<\/code>. This file will contain the following React component:<\/p>\n\n\n\n\/\/ src\/pages\/about.js\n\nimport * as React from \"react\"\n\nfunction AboutPage() {\n return (\n <div className=\"about-container\">\n <p>This is the about page of the website<\/p>\n <\/div>\n )\n}\n\nexport default AboutPage<\/code><\/pre>\n\n\n\n\/about <\/code>path in the website:<\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby9.png\")
<\/figure>\n\n\n\n\/public<\/code>: This directory will contain the output of the build process for our Gatsby project. For example, the HTML document generated from the React components under the \/src\/pages<\/code> will be added to their own subdirectory under this \/public <\/code>directory. Let\u2019s check this for the previous \/about <\/code>page:<\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby10.png\")
<\/figure>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby11.png\")
<\/figure>\n<\/figure>\n\n\n\nindex.html <\/code>file was created in the \/about <\/code>subdirectory under the \/public <\/code>directory. Which contains our HTML code generated from the React component.<\/p>\n\n\n\n\/static<\/code>:<\/em><\/strong> Any file that you add under this directory will be copied under the \/public<\/code> <\/em>folder as it is with no changes. This can be considered one way to add assets to your project.<\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby12.png\")
<\/figure>\n\n\n\n \/src\/pages<\/code> to display this image:<\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby13-1024x425.png\")
<\/figure>\n\n\n\n \/logo <\/code>path for our website:<\/p>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby14-1024x609.png\")
<\/figure>\n\n\n\nDeploying Gatsby using Nginx<\/h2>\n\n\n\n
gatsby develop<\/code> command, which starts a development server on the fly and starts serving the requests.<\/p>\n\n\n\n\n
apt update <\/code>and apt install nginx <\/code>commands. You can use the corresponding package manager of your operating system.<\/li>\n<\/ol>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby15-1024x574.png\")
<\/figure>\n\n\n\n\n
systemctl status nginx.<\/code> We can also test the service by connecting from a browser to our server IP.<\/li>\n<\/ol>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby16-1024x282.png\")
<\/figure>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby17-1024x402.png\")
<\/figure>\n<\/figure>\n\n\n\n\n
gatsby build.<\/code> This will compile the related project files and generate the final HTML pages under the \/public <\/code>subdirectory.<\/li>\n<\/ol>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby18-1024x399.png\")
<\/figure>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby19-1024x614.png\")
<\/figure>\n\n\n\n\n
\/public <\/code>directory to \/var\/www\/ <\/code>with the command cp -r public\/ \/var\/www\/<\/code>, this will be the web root that we\u2019ll configure for our nginx server.<\/li>\n<\/ol>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby20.png\")
<\/figure>\n\n\n\n\n
\/public<\/code> directory as the web root. The Nginx configuration files location depends on your operating system, but in most cases it will be under the \/etc\/nginx\/ <\/code>directory.<\/li>\n<\/ol>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby21-1024x436.png\")
<\/figure>\n\n\n\n\/public<\/code> directory that we copied under the \/var\/www <\/code>as our web root, so our Nginx server will process requests by searching for files starting from this location. Finally, we configure two locations for our website root \/<\/em><\/strong> <\/code>and \/about<\/code> pages.<\/p>\n\n\n\nserver {\n listen 80 default_server;\n\n root \/var\/www\/public;\n\n location \/ {\n }\n\n location \/about\/ {\n }<\/code><\/pre>\n\n\n\n\n
systemctl restart nginx<\/code>, then test access to the website pages from the browser.<\/li>\n<\/ol>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby22-1024x299.png\")
<\/figure>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby23-1024x403.png\")
<\/figure>\n\n\n\n![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby24.png\")
<\/figure>\n<\/figure>\n\n\n\nOptimizing Gatsby for SEO<\/h2>\n\n\n\n
\n
Additionally, because website performance is a key factor in SEO ranking, the performance optimization offered by the SSG rendering helps improve Gatsby\u2019s SEO results.<\/li>\n<\/ol>\n\n\n\n\n
![\"-\"](\"https:\/\/upcloud.com\/media\/gatsby25-1024x203.png\")
<\/figure>\n\n\n\n
Gatsby enables you to dynamically set these tags for your pages in an easy and efficient way using the gatsby react helmet plugin<\/em><\/strong><\/a> or Gatsby Head API<\/em><\/strong><\/a>.
A sample component that uses gatsby react helmet to generate page title and description can look like this:<\/p>\n\n\n\nimport React from 'react';\nimport { Helmet } from 'react-helmet';\n\nconst MyPage = () => {\n return (\n <div>\n <Helmet>\n <title>Deploy high performance website with Gatsby and UpCloud<\/title>\n <meta name=\"description\" content=\"In this tutorial you\u2019ll learn how to create a Gatsby website and optimize its performance with UpCloud servers\" \/>\n <\/Helmet>\n <\/div>\n );\n};\n\nexport default MyPage;<\/code><\/pre>\n\n\n\nnpm install gatsby-plugin-react-helmet react-helmet.<\/code>
<\/p>\n\n\n\n\n
This URL structuring is crucial for improving your site\u2019s SEO performance and even for the experience of your site visitors. URLs and permalinks for a specific resource on a website should be descriptive, this helps search engines better understand and index the content.
Gatsby allows setting custom SEO-friendly URLs and slugs by modifying the gatsby-node.js<\/a> file and using the Gatsby slug plugin<\/a>.
<\/li>\n<\/ol>\n\n\n\n\n
import React from \"react\"\nimport { Link } from \"gatsby\"\n\nimport Layout from \"..\/components\/layout\"\nimport SEO from \"..\/components\/seo\"\n\nconst DocsPage = () => (\n <Layout>\n <SEO title=\"Home\" \/>\n <h1>Explore Gatsby Documentation<\/h1>\n <h2>Gatsby Rendering Options<\/h2>\n <h2>Gatsby SEO Component<\/h2>\n <\/Layout>\n)\n\nexport default DocsPage<\/code><\/pre>\n\n\n\n\n
import { StaticImage } from \"gatsby-plugin-image\"\n\nexport function Smartphone() {\n return (\n <StaticImage\n src=\"..\/images\/smartphone.png\"\n alt=\"A smartphone device\"\n \/>\n )\n}<\/code><\/pre>\n\n\n\nOptimizing Gatsby for Performance<\/h2>\n\n\n\n
\n
Additionally, Gatsby includes a built-in <Script><\/em><\/strong><\/a> component that provides a more efficient and performant way for loading scripts. With this component, we can control the technique by which we load the script at a specific stage of serving our content. These techniques include post-hydrate<\/em><\/strong>, idle<\/em><\/strong>, and off-main-thread<\/em><\/strong>.
<\/li>\n<\/ol>\n\n\n\n\n
\n
\n
\n
Conclusion<\/h2>\n\n\n\n
FAQs<\/h2>\n\n\n\n
\n
\n
\n
gatsby build<\/code> to generate static files, then deploy them on an Nginx server.<\/p>\n\n\n\n\n