Learning By Doing— Use Gatsby to Create your First Site

Last week, our company launched a new project, it is set up with Gatsby — React (frontend), Laravel (backend), SQL (database).

In the beginning, I thought I would have a headache because, with my 1-year coding experience, I had only heard about GatsbyJS but never really worked with it deeply. But after reading the official docs patiently, I found that it was not as complicated as I imagined.

I want to share the basic steps in this article because everything must start with building a solid foundation.

From a technical point of view, GatsbyJS is a hybrid system of React, react-router, webpack, babel, and GraphQL to achieve a complete separation of the data - and the UI layer to create a fast website without losing the modern front-end development model of SEO.

1) Install Gatsby CLI via npm globally by running

npm install -g gatsby-cli

2) Create a Gatsby site from a starter

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

3) Go to director and Start the development mode

The command gatsby develop starts a development server.

Open up your browser and navigate to http://localhost:8000/

🙌🏻 Yup!🙃

In your code editor, take a look at the different directories and files contained in the ‘HELLO-WORLD’ directory (sorry about my screenshot with the half-hidden text). It should look something like this:

VS code screenshot

Now go to pages/index.js and change “Hello world!” to “Hello you!”, save the file and you should see that changes are reflected almost instantly in the browser.

Gatsby uses hot reloading to speed up your development process. Essentially, when you’re running a Gatsby development server, the Gatsby site files are being “watched” in the background — any time you save a file, your changes will be immediately reflected in the browser.
Let’s add an image, this page is too boring 🌨

In this case, a random image from Unsplash

Save the file:

This is what you should see ⭐️

Yeah! A small success! 🌸

Now, let’s using Page components（🌈 The premise is that you are familiar with the basic structure of React).

Any React component defined in src/pages/*.js will automatically become a page, in our case pages/index.js is the default page.

4) Create a new file “secondPage.js” at src/pages and write some simple code like below, save it.

This is our second page

Let’s say the default page and the second page both got quite large and you were rewriting a lot of things. You can use sub-components to break the UI into reusable pieces. Both of your pages may contain a header — create a component that will describe a Header. 👇

5) Create a “components” folder at /src, then a “Header” folder within it, which contains a “Header.js” file

(I am used to creating files with the same name in each folder, so that it’s simple and clear, for example, Header.js and Header.module.scss inside the Header folder…)

6) Give the Header some text

A very simple Header Component

7) Import this Header from page (/secondPage.js) like below

Import Header Component from page

Now our second page is updated! 💫
Please ignore the inline style here, I generally do not recommend using it. Instead, using scss module for each file would be much better, but in this case, just keep it simple with inline style. ⭐️

Second page contains Header component which we created and imported

🌹 Yeah! Another tiny success! Now let’s play a bit with props in a React way.

8) Give the Header a “title” prop inside pages/secondPage.js like below
Ignore the Link for now.

Give a title prop to Child Header

9) Update Header Component in a React basic way

Using title prop from Parent secondPage

Save and see 🍭

That was easy! Now you could create more pages and sub-components and play around with props! 🔍⏱⏳ …

Remember we had a component which we ignored before at step 8? That is what we want to discover now, it is used to link between pages.

👉 Important! The Gatsby component is for linking between pages within your site. For external links to pages not handled by your Gatsby site, use the regular HTML tag, or you could try it and take a look at the error in the console.

10) Open the index page component (src/pages/index.js), import the component from Gatsby, and give it a “to” property with the value of "/secondPage" for the pathname.

Import Link from Gatsby

Now the default page should look like this ( I gave the Header another title prop which contains “Default page” and pink colour to make it clearer).

Click on the link at the bottom, you will be linked to your second page which we created before

🎢 You can add the Link on your second page which maybe links to the default page, see screenshot at step 8.

Click on the link at bottom, you will be linked to default page

💎 That’s it! We created two simple pages that can be linked to each other, there is not much styling, but that is out of scope in this article.

But wait … just bear in mind, a website has four parts: HTML, CSS, JavaScript, and DATA — “everything that lives outside a React component”.

Often, we want to store data outside components and then bring the data into the component as needed. Data can live in file types like Markdown, CSV, etc. as well as databases and APIs of all sorts.

📝 There are many options for loading data into React components, one of the most popular and powerful of these is GraphQL which I’m learning currently.

The following are some of my thoughts in the current in-depth study. Below is just a brief introduction. I will try to introduce their usage in the next article.
There are two commonly used configuration files:

📍 /gatsby-config.js is basically used to configure two things:

• siteMetadata puts some global information, which can be obtained through GraphQL on every page, like a constent title …
• plugins configuration plugins, this can be obtained according to the plugin documentation when used

📍 /gatsby-node.js can call Gatsby node APIs to do some automation.

There are generally two common scenarios:

📍 Add additional configuration, such as generating a custom path for Markdown articles.

📍 Generate page files other than /src/pages, such as generating page files for each Markdown article.

The purpose of sharing those steps was to make my thoughts clearer and understand the basic usage of Gatsby, and I am still continuing to learn.

Thank you very much for taking the time to read this article！

If there is something that needs to be corrected, please contact me, I will be very glad to improve them!