Alt Text

Welcome to part-2 of the series. I will be using mdx for the Gatsby site and taken the initial learnings from this udemy course from John Smilga.

Let’s open the terminal and create a new Gatsby project thewebdev with bare-bone starter package.

thewebdevthewebdev

After the setup is done, let’s start the development server by changing to it and running gatsby develop.

gatsby developgatsby develop

Now, we can open our project in localhost and it will show the Hello World text.

Hello WorldHello World

Next, let’s open up our VSCode for the project and create three folders components, posts, templates inside src folder.

VS CodeVS Code

Let’s first create the 404 page, which will be displayed if the user goes to any non-existent page. I found the template for this page from the internet and created a file 404.js inside pages folder.

404.js404.js

Next, create a folder css inside the src folder and put the file 404.css inside it. The content of it is below.

    # notfound {
        position: relative;
        height: 100vh;
      }

    # notfound .notfound {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
      }

    .notfound {
        max-width: 520px;
        width: 100%;
        line-height: 1.4;
        text-align: center;
      }

    .notfound .notfound-404 {
        position: relative;
        height: 240px;
      }

    .notfound .notfound-404 h1 {
        font-family: 'Montserrat', sans-serif;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        font-size: 252px;
        font-weight: 900;
        margin: 0px;
        color: # 262626;
        text-transform: uppercase;
        letter-spacing: -40px;
        margin-left: -20px;
      }

    .notfound .notfound-404 h1>span {
        text-shadow: -8px 0px 0px # fff;
      }

    .notfound .notfound-404 h3 {
        font-family: 'Cabin', sans-serif;
        position: relative;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        color: # 262626;
        margin: 0px;
        letter-spacing: 3px;
        padding-left: 6px;
      }

    .notfound h2 {
        font-family: 'Cabin', sans-serif;
        font-size: 20px;
        font-weight: 400;
        text-transform: uppercase;
        color: # 000;
        margin-top: 0px;
        margin-bottom: 25px;
      }

    [@media](http://twitter.com/media) only screen and (max-width: 767px) {
        .notfound .notfound-404 {
          height: 200px;
        }
        .notfound .notfound-404 h1 {
          font-size: 200px;
        }
      }

    [@media](http://twitter.com/media) only screen and (max-width: 480px) {
        .notfound .notfound-404 {
          height: 162px;
        }
        .notfound .notfound-404 h1 {
          font-size: 162px;
          height: 150px;
          line-height: 162px;
        }
        .notfound h2 {
          font-size: 16px;
        }
      }

Now on going to any non-existent page you will get this below page.

404.js404.js

We will create the contact and the about page in the similar manner. More pages and login component will be put later as needed.

Contact pageContact page

About PageAbout Page

Now, let’s have a Navbar and Footer component. We will make them inside a components folder, which will be inside src folder.

Navbar componentNavbar component

Footer ComponentFooter Component

Now, it’s a common practice in React/Gatsby to have Layout component, which will have all the common things like Navbar and Footer. So, let’s create a file Layout.js inside components folder.

Layout.jsLayout.js

Next, let use it in our index.js file. As, you might have noticed that the Layout component is wrapping all the other thing, which is only Hello World! now. This only is the children, which is the props been passed to the Layout component.

index.jsindex.js

Now, when we go to the Home page, it will show both Navbar and Footer components.

Home PageHome Page

Now, we can use the reusable component Layout in all our other pages and they will show Navbar and Footer components.

contact.jscontact.js

about.jsabout.js

If we goto any other pages also, the Navbar and the Footer would be present.

Contact PageContact Page

You can find the code for the same in this link.

This completes part-2 of the series.

This post is also available on DEV.