When I first thought about using Gatsby, I did what I always do when doing something new: I overthought it.

I spent too much time reading about what Gatsby was and what Gatsby could do, and where you could use Gatsby…instead of making a site. Sometimes, the best way to learn something, is to do it. Theory can only get you so far, and you can only show off so much with theory.

For about a month I did nothing, and then when I volunteered myself to work on the front end of Telescope, I had no experience. I had to fix that quickly, so I could convince everyone else working on telescope that we should use Gatsby.

How to start a Gatsby Site

The first step in creating a Gatsby site, is to install the Gatsby CLI. According to the Gatsby docs site, the CLI is “the main entry point for getting up and running … a Gatsby application.” It allows you to run all the commands you need.

To install it globally you need to run:

 npm install -g gatsby-cli

if you want to see the commands you can use, you can either check the Gatsby docs site, or using the CLI run:

gatsby --help.

Installing it in my computer didn’t take long, unlike the other process, so that was nice.

After installing the CLI, you have some options. If you use:

 gatsby new name-of-project

then the site generated is the default Gatsby theme. It looks like this:

You can find the repo for the default site at gatsbyjs / gatsby-starter-default

Gatsby also offers other official starters, which you can use by using the new command and the url of the git repo. For example:

gatsby new your-site https://github.com/gatsbyjs/gatsby-starter-blog

The starter site templates offered by Gatsby are:

gatsby-starter-blog

gatsby-starter-hello-world

Perfect for a blank slate

gatsby-starter-blog-theme and gatsby-starter-theme-workspace are also available themes, but they do not have a demo available.

You can use other templates that are not starters or you can make your own, to install them it follows the same principle as above. Using the new command and the URL of the repo.

For my practice side, I decided to use the default starter because my React knowledge was rusty. It took a good day, but I got the hang of it and was able to rearrange a site the way I wanted.

While most of the process was similar to building a React app, I found the way to generate a dynamic navigation bar interesting.

In order to do that, you need to go into the gatsby-config.js file, and add menuLinks to the site metadata.

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
+    menuLinks:[
+      {
+         name:'home',
+         link:'/'
+      },
+      {
+         name:'page2',
+         link:'/page-2'
+      }
+    ]
  },
  plugins: []
}

By creating the navigation link this way, you can use GraphiQL to make requests, like so:

The query will return JSON objects with the links (https://www.gatsbyjs.org/docs/creating-dynamic-navigation/)

File Structure

But I’m getting ahead of myself, after you run gatsby new, you should be aware of the project structure structure.

A possible file structure, (https://www.gatsbyjs.org/docs/gatsby-project-structure/)

While you can find a more thorough lists of files that are generated for a Gatsby site in the docs, I will focus on the ones I spent most of my time on.

/public – Is a folder generated when the command gatsby build is ran, inside it you will find the files you need to host your site.

/src – Is where you will write the code for your front end. It’s where you will find folders for your pager or your components, among other things you will see on your site.

/src/pages – Components in this folder are pages with automatically created paths based on the page name. For example, a file named lab.js will be found in the path “/labs”. If you want something like “labs/lab-1”, then you would create a folder in /src/pages named lab, and inside it you would create a file named “lab-1.js”

gatsby-config – Meta information about the site can be found here. This where we put the menuLinks for a dynamic navbar, for example. This file also can include information about the plugins used, or where you would specify a path-prefix. For more information, the Gatsby docs are a great source of information.

Seeing What You Have Made

If you want to see how the site looks while you are making it, you need to run gatsby develop. On my machine, the first time run develop when I open my project, it takes a really long time (about 5 minutes or so) . While the waiting time does go down the subsequent times, it still is a bit of a wait.

The upside is, you don’t need to run gatby develop every time you update anything on your site. After saving the changes, the process is reloaded and you can see the changes in localhost:8000.

Once you have completed your site, you can run gatsby build to generate the public folder files that you need to make your website go live. If you want to run the website based on the public folder files, you need to use gatsby serve.

Aftermath

After my first attempt at blog with Gatsby, I also made a portfolio site for another class, which also took me about a day.

My experience had been fairly positive and painless, which made me I feel like Gatsby would be great to use with Telescope, as it is fast to create a static site, and there is a lot of templates that can be used. This allows telescope to look good, without having to spent too much time on insignificant details.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s