Building a GatsbyJS Website from Sratch
Jan 10th, 2021
There are many Gatsby starter templates on the Gatsby Starters page that you can take advantage of to create various kinds of websites such as: a blog, a portfolio, a documentation...etc. So why would one want to build a website with Gatsby without utilizing one of those amazing templates at all? Well, there may be several reasons that you might want to do so:
- You do not want everything that is included in the starters
- You want to customize the build process of your website from the ground up
- You want to understand and learn how to create these starters
Here's the setup that I used to build my personal website with Gatsby from sratch without using any starter templates.
Installing Node.js & npm
For those who are not familiar with Node.js and npm, you might be wondering what are Node.js and npm, and why do you need them. Well in short:
- Node.js is a JavaScript runtime environment for executing JS code on your desktop. You will need Node.js to run Gatsby packages as they are written in JS.
- npm is a package manager for installing JavaScript packages from its public repository. You can also use npm to publish JS packages onto its public repository, though you will not need that functionality in this setup.
To install both Node.js and npm, visit Node.js download page and download the latest Node.js version for your operating system. As npm is installed along with Node.js, you do not need to download a separate installer for npm.
Installing the Dependencies
Once you have installed both Node.js and npm, create a directory for your website. This will serve as your root directory for your website.
Open up your terminal at the root directory and run npm init -y. This allows npm to generate a basic package.json file - a JSON file to store your JS package's metadata such as its name, author, main entry point, and any required dependencies. Edit that JSON file to give this package a name and a description.
After the package.json file is generated and edited, proceed to install all of the dependencies required for your Gatsby website. You will need to install the main gatsby package, and the React packages: react, react-dom. The reason you need to install the react packages is that Gatsby is a React-based framework that uses React hydration to transform the static HTML document with your React code.
To install those packages:
Run npm install gatsby react react-dom at the root directory.
Creating the Gatsby Project Structure
Gatsby requires a project structure to search for files to build your website. For example, Gatsby will look into /src/pages/ for any JS files containing React components to create webpages for each of those files. This is how your project structure should look like by the end of this section.
¦ gatsby-config.js ¦ package.json ¦ +---src ¦ +---components ¦ +---pages ¦ ¦ index.js ¦ ¦ ¦ \---styles \---static
Here's what each of the files/directories means:
gatsby-config.js- a configuration file for Gatsbypackage.json- the JSON file you should have created in the previous section-
src- the main directory for storing the source code of your websitecomponents- a subdirectory for storing React components used to build your website-
pages- a subdirectory in which every JS file with React components will be used to build a page of your websiteindex.js- the main page of your website
styles- a subdirectory for storing any CSS stylings used for your website
static- a directory for storing static content of your website such as pictures, audio, icons...etc.
Editing the index.js File
The index.js file as explained before is what Gatsby uses to build the main page of your website. Edit this file to include a simple React component as shown below.
Make sure that you use default export to export your React component so that Gatsby can import that component to build your webpage.
Previewing your Website
To preview your Gatsby website on your desktop, you will need to install the gatsby command line package: gatsby-cli. I highly recommend that you install this package globally with npm i -g gatsby-cli, as doing so will allow you to use Gatsby commands in your terminal with gatsby <command>.
To start the Gatsby development server, run gatsby develop at the root directory in your terminal. Once Gatsby finishes its build process, you can preview your website at http://localhost:8000. The server listens on port 8000 by default.
If you wish to preview your built Gatsby website, run gatsby serve at the root directory in your terminal.
References
“About Node.js®.” Node.js, https://nodejs.org/en/about/.
“What Is Npm?” Node.js, 26 Aug. 2011, https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/.
“Set Up Your Development Environment.” Gatsby. Web. https://www.gatsbyjs.com/docs/tutorial/part-zero/.
“Get to Know Gatsby Building Blocks.” Gatsby. Web. https://www.gatsbyjs.com/docs/tutorial/part-one/.
