{"id":40480,"date":"2022-03-09T12:30:00","date_gmt":"2022-03-09T18:30:00","guid":{"rendered":"https:\/\/www.rosehosting.com\/blog\/?p=40480"},"modified":"2022-06-03T03:31:24","modified_gmt":"2022-06-03T08:31:24","slug":"how-to-install-gatsby-on-ubuntu-20-04","status":"publish","type":"post","link":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/","title":{"rendered":"How to Install Gatsby on Ubuntu 20.04"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\r\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"742\" height=\"372\" class=\"wp-image-40577\" src=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg\" alt=\"how to install gatsby on ubuntu 20.04\" srcset=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg 742w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04-300x150.jpg 300w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04-150x75.jpg 150w\" sizes=\"(max-width: 742px) 100vw, 742px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Gatsby is a fast modern site generator for React. It is an open-source framework that combines the functionality from React, GraphQL, and Webpack for building static websites and applications.<\/p>\r\n\r\n\r\n\r\n<p>Gatsby is more than just a static site generator, it allows the web developers to build websites using React and work with any data source (CMSs, Markdown, etc) of their choice. In this tutorial, we will show you how to install Gatsby on Ubuntu 20.04.<\/p>\r\n\r\n\r\n\r\n<p><!--more--><\/p>\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-662b98a60cf1e\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-662b98a60cf1e\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#Prerequisites\" title=\"Prerequisites\">Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#Step-1-Log-in-to-the-server\" title=\"Step 1. Log in to the server\">Step 1. Log in to the server<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#Step-2-Create-a-System-User\" title=\"Step 2. Create a System User\">Step 2. Create a System User<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#Step-3-Install-NodeJS-and-NPM\" title=\"Step 3. Install NodeJS and NPM\">Step 3. Install NodeJS and NPM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#Step-4-Install-Gatsby-CLI\" title=\"Step 4. Install Gatsby-CLI\">Step 4. Install Gatsby-CLI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#Step-5-Install-PM2\" title=\"Step 5. Install PM2\">Step 5. Install PM2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#Step-6-Install-and-Configure-NGINX\" title=\"Step 6. Install and Configure NGINX\">Step 6. Install and Configure NGINX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#Step-7-Install-SSL-certificate\" title=\"Step 7. Install SSL certificate\">Step 7. Install SSL certificate<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"prerequisites\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<ul>\r\n<li>Ubuntu 20.04 VPS<\/li>\r\n<li>SSH access with root privileges<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"step-1-log-in-to-the-server\"><span class=\"ez-toc-section\" id=\"Step-1-Log-in-to-the-server\"><\/span>Step 1. Log in to the server<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>First, log in to your Ubuntu 20.04 server through SSH as the root user:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">ssh root@IP_Address -p Port_number<\/pre>\r\n\r\n\r\n\r\n<p>You will need to replace \u2018IP_Address\u2018 and \u2018Port_number\u2018 with your server\u2019s respective IP address and SSH port number.<\/p>\r\n\r\n\r\n\r\n<p>Before starting, you have to make sure that all Ubuntu OS packages installed on the server are up to date. You can do this by running the following commands:<\/p>\r\n\r\n\r\n\r\n<pre id=\"h-apt-update-y\" class=\"wp-block-preformatted\"># apt update -y\r\n# apt upgrade -y<\/pre>\r\n\r\n\r\n\r\n<p id=\"h-apt-upgrade-y\">\u00a0<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"step-2-create-a-system-user\"><span class=\"ez-toc-section\" id=\"Step-2-Create-a-System-User\"><\/span>Step 2. Create a System User<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>Next, we will create a new system user and grant it sudo privileges. In this tutorial, we will create a new system user called &#8216;master&#8217;, you can choose any username you like.<\/p>\r\n\r\n\r\n\r\n<pre id=\"h-adduser-master\" class=\"wp-block-preformatted\"># adduser master<\/pre>\r\n\r\n\r\n\r\n<p>Once created, let&#8217;s run this command to add the new user to sudo group. In Ubuntu, users who are members of sudo group are allowed to run sudo commands.<\/p>\r\n\r\n\r\n\r\n<pre id=\"h-usermod-ag-sudo-master\" class=\"wp-block-preformatted\"># usermod -aG sudo master<\/pre>\r\n\r\n\r\n\r\n<p>Now, we can log in as the new user &#8216;master&#8217;, and we will use this user to complete the installation.<\/p>\r\n\r\n\r\n\r\n<pre id=\"h-su-master\" class=\"wp-block-preformatted\"># su - master<\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"step-3-install-nodejs-and-npm\"><span class=\"ez-toc-section\" id=\"Step-3-Install-NodeJS-and-NPM\"><\/span>Step 3. Install NodeJS and NPM<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>There are some methods to install both NodeJS and NPM. In this article, we will install them using the node source. For other methods, you can check our blog post on <a href=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-node-js-and-npm-on-ubuntu-20-04\/\">how to install NodeJS and NPM<\/a>.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ curl -sL https:\/\/deb.nodesource.com\/setup_14.x | sudo -E bash -<\/pre>\r\n\r\n\r\n\r\n<p>Once completed, we need to download the package information from the newly added source above.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ sudo apt update<\/pre>\r\n\r\n\r\n\r\n<p>Next, run the following command to finally install NodeJS and NPM.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ sudo apt install nodejs<\/pre>\r\n\r\n\r\n\r\n<p>NodeJS and NPM have been successfully installed, you can check the installed version using this command:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ node -v; npm -v<\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"step-4-install-gatsby-cli\"><span class=\"ez-toc-section\" id=\"Step-4-Install-Gatsby-CLI\"><\/span>Step 4. Install Gatsby-CLI<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>Gatsby CLI is the main entry point for getting up and running the Gatsby application. It is packaged as an executable that can be used globally. We can install Gatsby CLI via npm.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ sudo npm install -g gatsby-cli<\/pre>\r\n\r\n\r\n\r\n<p>To check the installed version of Gatsby CLI, run this command:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ gatsby --version<\/pre>\r\n\r\n\r\n\r\n<p>Now, let&#8217;s create a new Gatsby website, you can replace &#8220;<strong>gatsby_site<\/strong>&#8221; with any name you like.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ gatsby new gatsby_site<\/pre>\r\n\r\n\r\n\r\n<p>Wait for a few moments, and a new &#8220;gatsby_site&#8221; directory is created.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"880\" height=\"245\" class=\"wp-image-40481\" src=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby_new.png\" alt=\"\" srcset=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby_new.png 880w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby_new-300x84.png 300w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby_new-150x42.png 150w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby_new-768x214.png 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Invoke the command below to develop Gatsby and run it.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ cd gatsby_site\r\n$ gatsby develop -H 0.0.0.0<\/pre>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"757\" height=\"633\" class=\"wp-image-40483\" src=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby-develop.png\" alt=\"\" srcset=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby-develop.png 757w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby-develop-300x251.png 300w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby-develop-150x125.png 150w\" sizes=\"(max-width: 757px) 100vw, 757px\" \/><\/figure>\r\n\r\n\r\n\r\n<p><br \/>You should be able to access your Gatsby site at <code>http:\/\/YOUR_SERVER_IP_ADDRESS:8000<\/code>, press CTRL + C if you want to stop it.<\/p>\r\n\r\n\r\n\r\n<p>Now, let&#8217;s build our Gatsby website:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ gatsby build<\/pre>\r\n\r\n\r\n\r\n<p>The <code>gatsby build<\/code> command is a part of the Gatsby CLI. Run <code>gatsby build <\/code>command to create a production-ready version of your site when you are ready to publish your site. You can also deploy your Gatsby website to GitHub to set up a CI\/CD (Continuous Integration and Continuous Deployment) pipeline.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"866\" height=\"979\" class=\"wp-image-40484\" src=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby-build.png\" alt=\"\" srcset=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby-build.png 866w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby-build-265x300.png 265w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby-build-133x150.png 133w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/gatsby-build-768x868.png 768w\" sizes=\"(max-width: 866px) 100vw, 866px\" \/><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"step-5-install-pm2\"><span class=\"ez-toc-section\" id=\"Step-5-Install-PM2\"><\/span>Step 5. Install PM2<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>Process Manager (PM2) will allow you to keep applications alive forever, reload them without downtime, and facilitate common system admin tasks. Invoke the command below to install PM2 on your Ubuntu 20.04 globally.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ sudo npm install pm2 -g<\/pre>\r\n\r\n\r\n\r\n<p>After installing PM2, we can run these commands to start our Gatsby website on port 8000.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ cd ~\/gatsby-site<br \/>$ pm2 start gatsby --name mygatsby -- serve -p 8000<\/pre>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"640\" class=\"wp-image-40487\" src=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/pm2-start-gatsby-1-1024x640.png?v=1645321062\" alt=\"\" srcset=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/pm2-start-gatsby-1-1024x640.png 1024w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/pm2-start-gatsby-1-300x187.png 300w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/pm2-start-gatsby-1-150x94.png 150w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/pm2-start-gatsby-1-768x480.png 768w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/pm2-start-gatsby-1.png 1156w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"step-6-install-and-configure-nginx\"><span class=\"ez-toc-section\" id=\"Step-6-Install-and-Configure-NGINX\"><\/span>Step 6. Install and Configure NGINX<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>Your Gatsby install has now been completed and you should be able to access it at your server\u2019s public IP with port number 8000. However, if you want to access your Gatsby website using a domain name or subdomain name instead of typing the server&#8217;s IP address and the port number in the URL, you would need to configure a reverse proxy on your server.<\/p>\r\n\r\n\r\n\r\n<p>In this step, we will show you how to implement the reverse proxy configuration using Nginx. Nginx is a powerful and high-performance web server that focuses on customization and performance.<\/p>\r\n\r\n\r\n\r\n<p>First, install Nginx with the following command:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ sudo apt install nginx<\/pre>\r\n\r\n\r\n\r\n<p>On Ubuntu 20.04, Nginx is configured to start running upon installation, you can check it by running this command:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ sudo systemctl status nginx<\/pre>\r\n\r\n\r\n\r\n<p>Once installed, create a new Nginx server block configuration file. Replace <code>yourdomain.com<\/code> with your actual domain or subdomain name:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ sudo nano \/etc\/nginx\/sites-enabled\/yourdomain.com.conf<\/pre>\r\n\r\n\r\n\r\n<p>Add the following content to the file:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">server {\r\n\r\n    listen 80;\r\n\r\n    server_name yourdomain.com;\r\n    location \/ {\r\n        proxy_pass http:\/\/localhost:8000;\r\n        proxy_http_version 1.1;\r\n        proxy_set_header X-Forwarded-Host $host;\r\n        proxy_set_header X-Forwarded-Server $host;\r\n        proxy_set_header X-Real-IP $remote_addr;\r\n        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\r\n        proxy_set_header X-Forwarded-Proto $scheme;\r\n        proxy_set_header Host $http_host;\r\n        proxy_set_header Upgrade $http_upgrade;\r\n        proxy_set_header Connection \"Upgrade\";\r\n        proxy_pass_request_headers on;\r\n    }\r\n    location ~ \/.well-known {\r\n       allow all;\r\n    }\r\n}<\/pre>\r\n\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Save the file by pressing <strong>CTRL + O<\/strong> then press <strong>CTRL + X<\/strong> to exit the nano editor then restart Nginx.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ sudo systemctl restart nginx<\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"step-7-install-ssl-certificate\"><span class=\"ez-toc-section\" id=\"Step-7-Install-SSL-certificate\"><\/span>Step 7. Install SSL certificate<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>This is an optional step but highly recommended to complete. We will install a free SSL certificate from Let&#8217;s Encrypt.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ sudo apt install python3-certbot-nginx -y<\/pre>\r\n\r\n\r\n\r\n<p>Once completed, we can run this command to install the SSL certificate.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">$ sudo certbot<\/pre>\r\n\r\n\r\n\r\n<p>You will be asked for your email address, accept the Let&#8217;s Encrypt TOS, and whether you want to share your email address with the Electronic Frontier Foundation or not. Then, you need to choose which names would you like to activate HTTPS for. Choose your Gatsby website by typing the number and hitting ENTER. Let&#8217;s encrypt will install the certificate and it will ask you whether to configure HTTP to HTTPS redirect or not, you can choose redirect then certbot will create the redirection and reload Nginx if everything is okay.<\/p>\r\n\r\n\r\n\r\n<p>Now, you should be able to access your Gatsby website in HTTPS mode at <code>https:\/\/yourdomain.com<\/code>, you can proceed with building your application using the Gatsby.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"706\" height=\"835\" class=\"wp-image-40486\" src=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-18-at-17.26.07.png\" alt=\"\" srcset=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-18-at-17.26.07.png 706w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-18-at-17.26.07-254x300.png 254w, https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-18-at-17.26.07-127x150.png 127w\" sizes=\"(max-width: 706px) 100vw, 706px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Of course, you don\u2019t have to pull your hair to install Gatsby on <a href=\"https:\/\/www.rosehosting.com\/ubuntu-hosting.html\" target=\"_blank\" rel=\"noreferrer noopener\">Ubuntu 20.04<\/a> if you have a managed Linux VPS hosting plan hosted with us. If you do, you can simply ask our support team to install <a href=\"https:\/\/www.gatsbyjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gatsby <\/a>on Ubuntu 20.04 for you. They are available 24\/7 and will be able to help you with the installation of Gatsby, as well as any additional requirements that you may have.<\/p>\r\n\r\n\r\n\r\n<p>PS. If you enjoyed reading this blog post on how to install Gatsby on Ubuntu 20.04, feel free to share it on social networks by using the shortcuts below or simply leave a comment down in the comments section. Thank you.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Gatsby is a fast modern site generator for React. It is an open-source framework that combines the functionality from React, &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to Install Gatsby on Ubuntu 20.04\" class=\"read-more button\" href=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#more-40480\" aria-label=\"Read more about How to Install Gatsby on Ubuntu 20.04\">Read More<\/a><\/p>\n","protected":false},"author":4,"featured_media":40577,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,1698,1712],"tags":[1995,172,1839],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Install Gatsby on Ubuntu 20.04 - RoseHosting<\/title>\n<meta name=\"description\" content=\"In this tutorial, we will show you how to install Gatsby, a fast modern site generator for React, on Ubuntu 20.04.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Install Gatsby on Ubuntu 20.04 - RoseHosting\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we will show you how to install Gatsby, a fast modern site generator for React, on Ubuntu 20.04.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/\" \/>\n<meta property=\"og:site_name\" content=\"RoseHosting\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/RoseHosting\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/rosehosting.helpdesk\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-09T18:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-03T08:31:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg?v=1645631973\" \/>\n\t<meta property=\"og:image:width\" content=\"742\" \/>\n\t<meta property=\"og:image:height\" content=\"372\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeff Wilson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"In this tutorial, we will show you how to install Gatsby, a fast modern site generator for React, on Ubuntu 20.04.\" \/>\n<meta name=\"twitter:creator\" content=\"@rosehosting\" \/>\n<meta name=\"twitter:site\" content=\"@rosehosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeff Wilson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/\"},\"author\":{\"name\":\"Jeff Wilson\",\"@id\":\"https:\/\/www.rosehosting.com\/blog\/#\/schema\/person\/7ce77a842fa6a9a7f8efa186f2353713\"},\"headline\":\"How to Install Gatsby on Ubuntu 20.04\",\"datePublished\":\"2022-03-09T18:30:00+00:00\",\"dateModified\":\"2022-06-03T08:31:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/\"},\"wordCount\":967,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.rosehosting.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg\",\"keywords\":[\"gatsby\",\"install\",\"Ubuntu 20.04\"],\"articleSection\":[\"Tutorials\",\"Ubuntu\",\"Web Frameworks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/\",\"url\":\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/\",\"name\":\"How to Install Gatsby on Ubuntu 20.04 - RoseHosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.rosehosting.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg\",\"datePublished\":\"2022-03-09T18:30:00+00:00\",\"dateModified\":\"2022-06-03T08:31:24+00:00\",\"description\":\"In this tutorial, we will show you how to install Gatsby, a fast modern site generator for React, on Ubuntu 20.04.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#primaryimage\",\"url\":\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg\",\"contentUrl\":\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg\",\"width\":742,\"height\":372,\"caption\":\"how to install gatsby on ubuntu 20.04\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.rosehosting.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Install Gatsby on Ubuntu 20.04\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.rosehosting.com\/blog\/#website\",\"url\":\"https:\/\/www.rosehosting.com\/blog\/\",\"name\":\"RoseHosting\",\"description\":\"Premium Linux Tutorials Since 2001\",\"publisher\":{\"@id\":\"https:\/\/www.rosehosting.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.rosehosting.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.rosehosting.com\/blog\/#organization\",\"name\":\"RoseHosting\",\"url\":\"https:\/\/www.rosehosting.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.rosehosting.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/03\/android-chrome-192x192-1.png\",\"contentUrl\":\"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/03\/android-chrome-192x192-1.png\",\"width\":192,\"height\":192,\"caption\":\"RoseHosting\"},\"image\":{\"@id\":\"https:\/\/www.rosehosting.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/RoseHosting\",\"https:\/\/x.com\/rosehosting\",\"https:\/\/www.linkedin.com\/in\/rosehosting\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.rosehosting.com\/blog\/#\/schema\/person\/7ce77a842fa6a9a7f8efa186f2353713\",\"name\":\"Jeff Wilson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.rosehosting.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/09271207587f897ab46faaed9b355252?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/09271207587f897ab46faaed9b355252?s=96&r=g\",\"caption\":\"Jeff Wilson\"},\"description\":\"An experienced Linux veteran with many years of experience. Helping other Linux admins with frequent Linux and business-related blog posts on the RoseHosting blog. Techie by choice. Loving nature and travel. Happily married and father of two lovely children.\",\"sameAs\":[\"https:\/\/www.rosehosting.com\",\"https:\/\/www.facebook.com\/rosehosting.helpdesk\"],\"url\":\"https:\/\/www.rosehosting.com\/blog\/author\/jwilson\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Install Gatsby on Ubuntu 20.04 - RoseHosting","description":"In this tutorial, we will show you how to install Gatsby, a fast modern site generator for React, on Ubuntu 20.04.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/","og_locale":"en_US","og_type":"article","og_title":"How to Install Gatsby on Ubuntu 20.04 - RoseHosting","og_description":"In this tutorial, we will show you how to install Gatsby, a fast modern site generator for React, on Ubuntu 20.04.","og_url":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/","og_site_name":"RoseHosting","article_publisher":"https:\/\/www.facebook.com\/RoseHosting","article_author":"https:\/\/www.facebook.com\/rosehosting.helpdesk","article_published_time":"2022-03-09T18:30:00+00:00","article_modified_time":"2022-06-03T08:31:24+00:00","og_image":[{"width":742,"height":372,"url":"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg?v=1645631973","type":"image\/jpeg"}],"author":"Jeff Wilson","twitter_card":"summary_large_image","twitter_description":"In this tutorial, we will show you how to install Gatsby, a fast modern site generator for React, on Ubuntu 20.04.","twitter_creator":"@rosehosting","twitter_site":"@rosehosting","twitter_misc":{"Written by":"Jeff Wilson","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#article","isPartOf":{"@id":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/"},"author":{"name":"Jeff Wilson","@id":"https:\/\/www.rosehosting.com\/blog\/#\/schema\/person\/7ce77a842fa6a9a7f8efa186f2353713"},"headline":"How to Install Gatsby on Ubuntu 20.04","datePublished":"2022-03-09T18:30:00+00:00","dateModified":"2022-06-03T08:31:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/"},"wordCount":967,"commentCount":0,"publisher":{"@id":"https:\/\/www.rosehosting.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#primaryimage"},"thumbnailUrl":"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg","keywords":["gatsby","install","Ubuntu 20.04"],"articleSection":["Tutorials","Ubuntu","Web Frameworks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/","url":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/","name":"How to Install Gatsby on Ubuntu 20.04 - RoseHosting","isPartOf":{"@id":"https:\/\/www.rosehosting.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#primaryimage"},"image":{"@id":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#primaryimage"},"thumbnailUrl":"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg","datePublished":"2022-03-09T18:30:00+00:00","dateModified":"2022-06-03T08:31:24+00:00","description":"In this tutorial, we will show you how to install Gatsby, a fast modern site generator for React, on Ubuntu 20.04.","breadcrumb":{"@id":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#primaryimage","url":"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg","contentUrl":"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/02\/how-to-install-gatsby-on-ubuntu-20.04.jpg","width":742,"height":372,"caption":"how to install gatsby on ubuntu 20.04"},{"@type":"BreadcrumbList","@id":"https:\/\/www.rosehosting.com\/blog\/how-to-install-gatsby-on-ubuntu-20-04\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.rosehosting.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Install Gatsby on Ubuntu 20.04"}]},{"@type":"WebSite","@id":"https:\/\/www.rosehosting.com\/blog\/#website","url":"https:\/\/www.rosehosting.com\/blog\/","name":"RoseHosting","description":"Premium Linux Tutorials Since 2001","publisher":{"@id":"https:\/\/www.rosehosting.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.rosehosting.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.rosehosting.com\/blog\/#organization","name":"RoseHosting","url":"https:\/\/www.rosehosting.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.rosehosting.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/03\/android-chrome-192x192-1.png","contentUrl":"https:\/\/www.rosehosting.com\/blog\/wp-content\/uploads\/2022\/03\/android-chrome-192x192-1.png","width":192,"height":192,"caption":"RoseHosting"},"image":{"@id":"https:\/\/www.rosehosting.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/RoseHosting","https:\/\/x.com\/rosehosting","https:\/\/www.linkedin.com\/in\/rosehosting\/"]},{"@type":"Person","@id":"https:\/\/www.rosehosting.com\/blog\/#\/schema\/person\/7ce77a842fa6a9a7f8efa186f2353713","name":"Jeff Wilson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.rosehosting.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/09271207587f897ab46faaed9b355252?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/09271207587f897ab46faaed9b355252?s=96&r=g","caption":"Jeff Wilson"},"description":"An experienced Linux veteran with many years of experience. Helping other Linux admins with frequent Linux and business-related blog posts on the RoseHosting blog. Techie by choice. Loving nature and travel. Happily married and father of two lovely children.","sameAs":["https:\/\/www.rosehosting.com","https:\/\/www.facebook.com\/rosehosting.helpdesk"],"url":"https:\/\/www.rosehosting.com\/blog\/author\/jwilson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.rosehosting.com\/blog\/wp-json\/wp\/v2\/posts\/40480"}],"collection":[{"href":"https:\/\/www.rosehosting.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rosehosting.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rosehosting.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rosehosting.com\/blog\/wp-json\/wp\/v2\/comments?post=40480"}],"version-history":[{"count":11,"href":"https:\/\/www.rosehosting.com\/blog\/wp-json\/wp\/v2\/posts\/40480\/revisions"}],"predecessor-version":[{"id":40915,"href":"https:\/\/www.rosehosting.com\/blog\/wp-json\/wp\/v2\/posts\/40480\/revisions\/40915"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rosehosting.com\/blog\/wp-json\/wp\/v2\/media\/40577"}],"wp:attachment":[{"href":"https:\/\/www.rosehosting.com\/blog\/wp-json\/wp\/v2\/media?parent=40480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rosehosting.com\/blog\/wp-json\/wp\/v2\/categories?post=40480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rosehosting.com\/blog\/wp-json\/wp\/v2\/tags?post=40480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}