AppDividend
Latest Code Tutorials

GatsbyJS Tutorial For Beginners

GatsbyJS: Static site generator for React

328

Get real time updates directly on you device, subscribe now.

GatsbyJS Tutorial For Beginners is the today’s leading topic. Gatsby.js is a static PWA (Progressive Web App) generator. Gatsby is Blazing-fast static site generator for React. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, pre-build pages and lift them into a global cloud of servers — ready to be delivered instantly to your users wherever they are. You can find more about GatsbyJS on their official website.

GatsbyJS is SEO friendly Static Site Generator. So it is beneficial to create blogs.

GatsbyJS Tutorial For Beginners

As usual, we start our tutorial by installing it on our machine.

Step 1: Install GatsbyJS.

We need to install Gatsby CLI using the following command.

npm install -g gatsby-cli

If you find any error in installation, then run in administrator mode.

For creating a new website, type the following command.

gatsby new mjweb

 

GatsbyJS Tutorial For Beginners

Now, go into the website folder.

cd mjweb

Start a hot-reloading development environment by the following command.

gatsby develop

 

GatsbyJS - Static site generator for React

It is accessible at http://localhost:8000.

Gatsby React Site Generator

 

Open the folder in your favorite editor.

code .

Step 2: Gatsby Starters.

The Gatsby CLI tool lets you install “starters.” These are partially built sites preconfigured to help you get moving faster on creating a particular type of site.

For example, to quickly create a blog using Gatsby, you could install the Gatsby Starter Blog by running:

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

Go to that site and install all the dependencies.

npm install

If you don’t specify a custom starter, your site will be created from the default starter.

Several starters can be created.

You can find more about starter templates on this link.

Related Posts
1 of 15

Step 3: Start development server on HTTPs.

Our application can also start on HTTPs using the following command.

sudo gatsby develop --https

It can now run on localhost with HTTPs protocol.

Gatsby on HTTPs

 

Step 4: Building with Components.

React’s component architecture simplifies building large websites by encouraging modularity, reusability, and clear abstractions. React has a broad ecosystem of open source components, tutorials, and tooling that can be used seamlessly for building sites with Gatsby.

Let us create a new component inside src  >>  pages folder. The name of the file is app.js.

// app.js

import React from 'react'

const App = () => (
    <div>
        <h3>Hello from app component</h3>
    </div>
  )
  
export default App

It is a simple React.js component.

Now, if you create new components inside pages folder, then React routing will automatically define its URL path and its component. In our case, the file name is app.js, so the path becomes app and component is App. So it maps automatically and now browses the following URL: https://localhost:8000/app

You can see that the template is the parent component but child component is also rendering, and child component is our app.js file. 

So, if you need to create more and more pages, then you merely create inside pages folder.

Adding a 404 Page.

You can place a 404.js page inside pages directory. When you try to access the page that is not accessible, then it can show this page. There is already 404.js page is built inside pages directory.

Adding Images

You can import images as a Javascript module using webpack.

Let us take an image and copy our images inside pages directory.

Now, in our app.js file, we can import the image like this.

// app.js

import React from 'react'
import user from "./Krunal.jpg"; 

const App = () => (
    <div>
        <h3>Hello from app component</h3>
        <img src={user} />
    </div>
  )
  
  export default App

Now, you will be able to see the image. If you open that image in another tab then you can see that the image is hosted on public >>  static directory with a modified name. So behind the scenes, it renames and copy that image inside public  >> static directory.

Step 5: Production Build

You can build an optimized build using the following command.

gatsby build

Gatsby will perform an optimized production build for your site generating static HTML and per-route JavaScript code bundles.

Deployment

You can many options on Gatsby’s official website.

GatsbyJS Tutorial For Beginners is over. In upcoming tutorials. we will build a blog and deep dive into the GatsbyJS.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.