Introduction
This tutorial explains how to install and set up Gatsby on Ubuntu 20.04.
Overview of Gatsby
Gatsby is an open-source JavaScript framework built on top of React and combines functionality from GraphQL and Webpack into a single tool for building optimized static websites and applications. Gatsby and its tools use the Node.js runtime to run and compile code.
Prerequisites
Before you begin, you should:
- Deploy an Ubuntu 20.04 server.
- Update the server.
- Create a non-root user with sudo privileges.
- Log in to your server as a non-root user.
- Install Node.js and NVM.
Installation
Install the Gatsby CLI tool using NPM.
$ npm install -g gatsby-cliRun the Gatsby CLI tool to set up your site.
$ gatsby newYou should now see a prompt asking you for your site name. The default name is My Gatsby Site. Press Enter to use this name or enter your own.
What would you like to call your site?Enter the folder name where you would like to create your Gatsby site.
What would you like to name the folder where your site will be created?Choose the Content Management System (CMS) you would like to use, using the arrow keys to move and confirming your choice with Enter. You can choose the No (or I'll add it later) option if you're unsure.
? Will you be using a CMS?Choose the styling system you would like to install or choose the No (or I'll add it later) option if you are unsure. Use the arrow keys to move and confirm your choice with Enter.
? Would you like to install a styling system?Choose the features you would like to install. Choose each option by using the arrow keys to navigate and confirming with Enter. Once you have finished choosing, navigate to the bottom of the list and select Done.
Features such as adding page meta tags, an automatic sitemap, and generating a manifest file are useful for Search Engine Optimization (SEO). The Google Analytics tracking script can help track the analytics of your site. Responsive images help ensure your site looks good on desktop and mobile devices. Adding Markdown/MDX support enables the use of Markdown files for storing or writing content.
? Would you like to install additional features with other plugins?If applicable, configure the options for the features you have chosen. If this does not show up, you can proceed to the next step.
Great! A few of the selections you made need to be configured. Please fill in the options for each plugin now.It will now show you a summary of what Gatsby will install, along with the plugins and features you have chosen. Ensure to review this, and then confirm your choices with Enter.
? Shall we do this? (Y/n)Gatsby will now install the packages and plugins you have chosen. It may take a few minutes.
Once the installation is complete, it will show you that Gatsby successfully created your site.
Your new Gatsby site **My Gatsby Site** has been successfully created at **/your/directory/path**.Enter your site directory with the
cdcommand.$ cd /your/folder/pathStart the local development server using the
developscript.$ npm run developIt may take a while to build the site for the first time. When you see the message, You can now view my-gatsby-site in your browser., navigate to your server's public IP address on port 8000 in a web browser. An example of what your IP might look like is below.
https://192.0.2.123:8000/Verify the web page says Congratulations - you just made a Gatsby site!.
You have now installed your Gatsby site, and it's ready for you to build your web application.
Making Your Site
Since Gatsby is a developer tool, it requires HTML, CSS, and JavaScript knowledge. In addition, knowledge of React and JSX is also needed, as Gatsby is an extension of the React framework.
For example, you can edit the src/pages/index.js file to add some more text to your page.
Exit the development server by using Ctrl + C.
Open the
src/pages/index.jsfile in your text editor.$ nano src/pages/index.jsNavigate to the bottom of the file and find the
markupsection.// markup const IndexPage = () => {}Add some HTML markup such as
<p>or<h1>under the<main>tag. The...represents the rest of the text.// markup const IndexPage = () => { return ( <main style={pageStyles}> <h1>Hello World</h1> <p>This is a simple example of a Gatsby site.</p> ... ) }Close your text editor by using Ctrl + X, then pressing Y, followed by Enter to confirm your changes.
Re-run the development server with the
developscript.$ npm run developRefresh your browser and verify that the added text is now displayed at the top.
You can find in-depth guides on how to develop your own Gatsby site in the Gatsby documentation.
Creating an Optimized Production Build
To create an optimized production build of your site, close the development server with Ctrl + C, then run the build script.
$ npm run buildThe build script will create a production build of your site. This will output a folder called public in your directory. This folder is where the optimized production build of your site is stored.
Preparing for Production
You can use the public folder from the previous section to host the static web application directly on a custom web server or another hosting service of your choice.
To use the Gatsby web server, you can run the serve script.
$ npm run serveYou can use this guide to deploy an Express web server with Nginx, and learn how to secure the web server with a Let's Encrypt TLS certificate.
More Information
or
under the tag. The ... represents the rest of the text.
// markup
const IndexPage = () => {
return (
Hello World
This is a simple example of a Gatsby site.
...
)
}
Close your text editor by using CTRL + X, then pressing Y, followed by ENTER to confirm your changes.
Re-run the development server with the develop script.
$ npm run develop
Refresh your browser and verify that the added text is now displayed at the top.
You can find in-depth guides on how to develop your own Gatsby site in the Gatsby documentation.
Creating an Optimized Production Build
To create an optimized production build of your site, close the development server with CTRL + C, then run the build script.
$ npm run build
The build script will create a production build of your site. This will output a folder called public in your directory. This folder is where the optimized production build of your site is stored.
Preparing for Production
You can use the public folder from the previous section to host the static web application directly on a custom web server or another hosting service of your choice.
To use the Gatsby web server, you can run the serve script.
$ npm run serve
You can use this guide to deploy an Express web server with Nginx, and learn how to secure the web server with a Let's Encrypt TLS certificate.
More Information
Gatsby Website
Gatsby Documentation
Prepare a Node.js Application for Production
Hello World
This is a simple example of a Gatsby site.
... ) } Close your text editor by using CTRL + X, then pressing Y, followed by ENTER to confirm your changes. Re-run the development server with the develop script. $ npm run develop Refresh your browser and verify that the added text is now displayed at the top. You can find in-depth guides on how to develop your own Gatsby site in the Gatsby documentation. Creating an Optimized Production Build To create an optimized production build of your site, close the development server with CTRL + C, then run the build script. $ npm run build The build script will create a production build of your site. This will output a folder called public in your directory. This folder is where the optimized production build of your site is stored. Preparing for Production You can use the public folder from the previous section to host the static web application directly on a custom web server or another hosting service of your choice. To use the Gatsby web server, you can run the serve script. $ npm run serve You can use this guide to deploy an Express web server with Nginx, and learn how to secure the web server with a Let's Encrypt TLS certificate. More Information Gatsby Website Gatsby Documentation Prepare a Node.js Application for Production