Kumar Kalyan

Posted on Dec 30, 2021

Getting started with gatsby js

#gatsby #javascript #webdev #tutorial

Intro

Gatby js is on of the most fastest static site generator open source web framework made by combining React Graphql and web pack and today we gonna learn how to create a gatsby site and deploying it to gatsby cloud

Prerequisites

Although this article is beginner friendly but it’s better for the readers to have basic knowledge of Javascript & JSON(JavaScript object notation), Html , css, React styling components to understand the topics that will be explained
Latest version of Nodejs and npm
Basic knowledge if git and Github
gatsby cli
gatsby cloud account
A Code editor(I am using vs code )

the most important
The patience to read the full article

setup
Install node js link
Install git and git bash from link
= Now open the terminal and use
npm install -g gatsby-cli
This will install gatsby cli globally on your local machine

Now open the terminal follow the steps
Type gatsby new
Enter an site name "Gatsby Tutorial" (By default it will show My Gatsby Site)

We will now use any modification in this tutorial

Our gatsby project is successfully created now use
cd <project name > then hit gatsby develop to see our changes locally at localhost:8000

now let's navigate to our project folder in our code editor

this is how our gatsby file structure looks like

this is how our project looks locally

Now we are done with our setup , so let's make cahnges to our project . In the begining lets's delete all the markup and let's start from scratch

Here the Indexpage will render all the hml markup written within the tag (you can also use <div> here instead of <main>)
Now let's add some html and see what happens to our page

import * as React from 'react';
const IndexPage = () => {
  return (
    <main>
      <title>My Gatsby tutorial</title>
      <h1>Hi, there I am gatsby app</h1>
      <h4>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et ducimus
        labore magni facere est autem eum provident expedita laudantium. Magni
        vitae quia impedit delectus quo iste aliquam rerum, ipsa natus. Lorem
        ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ex
        accusantium deleniti et sint perspiciatis similique deserunt, molestias
        nam, quas cumque id! Esse necessitatibus animi eos quibusdam sunt ad
        dignissimos! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Soluta itaque delectus in, inventore, voluptatem at ab beatae pariatur
        magni eum omnis! Voluptatum quo dicta nostrum. Sit numquam
        exercitationem asperiores quibusdam.
        <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque,
        necessitatibus? Sunt dolorem corporis provident vero molestiae. Natus
        inventore velit assumenda quis accusantium beatae, quaerat molestias
        sapiente quos? Atque, quia saepe.
        <hr />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
        assumenda veniam distinctio delectus molestiae, itaque nemo cupiditate
        sint sequi ad, dolorum asperiores magnam accusamus. Molestiae dicta
        alias recusandae nostrum numquam.
      </h4>
    </main>
  );
};

export default IndexPage;

Now lets add some styles
for styling purpose we will define style objects lets see

import * as React from 'react';
let sytles = {
  mainStyle: {
    color: 'blue',
    padding:'30px',
    font:"Arial, Helvetica, sans-serif"
   },
};
const IndexPage = () => {
  return (
    <main style={sytles.mainStyle}>
      <title>My Gatsby tutorial</title>
      <h1>Hi, there I am gatsby app</h1>
      <h4>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et ducimus
        labore magni facere est autem eum provident expedita laudantium. Magni
        vitae quia impedit delectus quo iste aliquam rerum, ipsa natus. Lorem
        ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ex
        accusantium deleniti et sint perspiciatis similique deserunt, molestias
        nam, quas cumque id! Esse necessitatibus animi eos quibusdam sunt ad
        dignissimos! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Soluta itaque delectus in, inventore, voluptatem at ab beatae pariatur
        magni eum omnis! Voluptatum quo dicta nostrum. Sit numquam
        exercitationem asperiores quibusdam.
        <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque,
        necessitatibus? Sunt dolorem corporis provident vero molestiae. Natus
        inventore velit assumenda quis accusantium beatae, quaerat molestias
        sapiente quos? Atque, quia saepe.
        <hr />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
        assumenda veniam distinctio delectus molestiae, itaque nemo cupiditate
        sint sequi ad, dolorum asperiores magnam accusamus. Molestiae dicta
        alias recusandae nostrum numquam.
      </h4>
    </main>
  );
};

export default IndexPage;

Here we have defined a variable named styles and within it we have defied a property named main style and we are passing it as an expression to in the style attribute.

now let's add some images to our application

import * as React from 'react';
let sytles = {
  mainStyle: {
    color: 'blue',
    padding:'30px',
    font:"Arial, Helvetica, sans-serif"
   },
   imagsStyle:{
     width:"400px",
     radius:"10px"
   }
};
const IndexPage = () => {
  return (
    <main style={sytles.mainStyle}>
      <title>My Gatsby tutorial</title>
      <h1>Hi, there I am gatsby app</h1>
      <h4>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et ducimus
        labore magni facere est autem eum provident expedita laudantium. Magni
        vitae quia impedit delectus quo iste aliquam rerum, ipsa natus. Lorem
        ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ex
        accusantium deleniti et sint perspiciatis similique deserunt, molestias
        nam, quas cumque id! Esse necessitatibus animi eos quibusdam sunt ad
        dignissimos! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Soluta itaque delectus in, inventore, voluptatem at ab beatae pariatur
        magni eum omnis! Voluptatum quo dicta nostrum. Sit numquam
        exercitationem asperiores quibusdam.
        <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque,
        necessitatibus? Sunt dolorem corporis provident vero molestiae. Natus
        inventore velit assumenda quis accusantium beatae, quaerat molestias
        sapiente quos? Atque, quia saepe.
        <hr />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
        assumenda veniam distinctio delectus molestiae, itaque nemo cupiditate
        sint sequi ad, dolorum asperiores magnam accusamus. Molestiae dicta
        alias recusandae nostrum numquam.
      </h4>
      <img src={'https://picsum.photos/200/300'} alt="an image" style={sytles.imagsStyle} />
    </main>
  );
};

export default IndexPage;

Now we are ready with our gatsby app. let's deploy it to gatsby cloud

Deployment

create a git repo and push your code to gihub

now we have pushed our code to github
open your gatsby cloud dashboard and click on add a site

now choose your repo and click on import

now click on next as we don't have any configurations
next

and then click on build site

see how fast it is , deployed in just 0.26 seconds
you can checkout my site here
my site
and github repo

Conclusion

so this was all about creating a basic gatsby js application and deploying to gatsby js cloud. If you love this article share it with your peers and don't hesitate to hit a ❤️ .

DEV Community

Getting started with gatsby js

Intro

Prerequisites

the most important

setup

Deployment

Conclusion

Connect

Top comments (0)

Read next

Conquering SeaTunnel Challenges: Your Go-To Solutions Revealed

Enhancing two-way data binding in Angular

SVAR Gantt: New Open Source, Interactive Gantt Chart for React

Transforming the Wall of Text: Modern Design with Glassmorphism, CSS Animations, and Typography