{{announcement.body}}
{{announcement.title}}

How to Build а Landing Page With GatsbyJS

DZone 's Guide to

How to Build а Landing Page With GatsbyJS

We go over how to easily create a landing page for your site or app using the GatsbyJS framework. Read on to learn more old sport!

· Web Dev Zone ·
Free Resource

GatsbyJS is a JavaScript framework built upon the React framework and integrates Webpack with GraphQL to give you an awesome development experience.

As a beginner, if you are not willing to go through the stress of learning the React.js framework or GraphQL, GatsbyJS is a suitable starting point for you. Moreover, it has detailed documentation to transform you from a beginner to an expert in a short time.

GatsbyJS

Getting Started With GatsbyJS

Alright, before developing our fancy landing page, I would like to inform you that this guide is a step-by-step process towards getting our final result and, to save time, you’ll also get to see the code used to build the landing page.

Let’s get started.

Installing GatsbyJS

Okay, ready to go down this road with me? Let’s prep to build our landing page. But before that, GatsbyJS requires some files to be set up. For this tutorial, we will be leveraging the hello world starter pack from the GatsbyJS GitHub repository.

All that being said, let’s install the required applications to run GatsbyJS, which include Node.js and Git.

Installing Node.js

Node.js is a Javascript runtime environment which executes our JavaScript code outside of the browser. Visit the official Node.js website and download the stable version. Launch the setup file and install.

Great, with Node.js successfully installed, let’s verify whether it's really active from our command line ― I am using Windows for this tutorial, so for Mac and Linux users, simply open up your terminal and run.

node --version

With this command, you should get the version of Node.js installed. And that’s it! You have Node.js installed.

Installing Git

Git is a distributed version control system for tracking changes in your code during development.

Alright, with Node.js up and running, let’s install Git. Head to the official Git website and download the latest version. On installation, leave the selected options on default and keep clicking the next button until it installs successfully.

Creating Our GatsbyJS Site

With Node.js and Git installed, we are set to create our first GatsbyJS site. As mentioned earlier, we'll be leveraging the my-hello-world starter pack to build our landing page.

First things first, open up your terminal or cmd and run:

npx Gatsby Js new my-hello-world-starter https://github.com/Gatsby js/Gatsby Js-starter-hello-world

It’ll take a while for npx to clone the starter pack from the GatsbyJS repository. After cloning, you may run into an error in your git terminal requesting your GitHub account details (if you are not signed in) — ignore that.

In most cases, your starter file should be saved in your users' folder. For Windows users, check your C:\Users\*username* path and you’ll find the starter file as shown below: 

Image title

Working With Our GatsbyJS Starter File

Very well, kudos to you for making it this far. Let’s launch our starter pack and start developing.

I will be using Visual Studio Code for this tutorial, I recommend you do the same. Alright, let’s right-click on our “my-hello-world-starter” folder and open it with VS Code. 

Visual Studio Code

On opening the folder, you should see something similar to mine. Alright, we have our GatsbyJS site ready, but we have no way of viewing it, so let’s fix that right now.

Serving Our App

So, let’s run our app to see how it looks like.

We start by opening up our terminal in Visual Studio Code, using the hot key “Ctrl + `”. With our terminal open, let’s serve our app to run locally on our server.

To serve our app, run  npm run developAfter the command completes, your terminal will look like this or similar to this: 

GatsbyJS

Great, our app is live! Let’s view it.

To view your app, head to your favorite browser ― preferably Google Chrome — and enter http://localhost:8000/ into your address bar. You should get a hello world message on the browser window. 

GatsbyJS

Pretty simple, our app is up and running with a hello world text on our browser.

Getting to Know Our Files

With our app up and running, let’s examine some folders and files within our starter file before we get started with developing our simple landing page.

We have the node modules folder, public folder, static folder, and src folder.

  • The node modules contain all of the modules of code that your project depends on (npm packages) which are all automatically installed.
  • The src folder contains all of the code related to what you will see on the front-end of your sites (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code.”

Quick note, if you feel frustrated by the auto-correction in coding syntax, such as constantly moving the cursor to another position or moving the HTML angle brackets to a new line, head to the node-modules folder and delete the prettier folder right there and you have full control.

We will be working with our src folder and index.js file to update our front-end and, for the sake of time, we will be building a simple landing page. It's nothing too complex, just some HTML and CSS and, of course, it's going to look great.

Building the Landing Page

Alright, I believe we all have some fundamental knowledge of HTML and CSS because that’s the little we require to build our landing page. At the end of this tutorial, our simple landing page should look just like this:

GatsbyJS

Let’s get started with the HTML. To save time I have already written the necessary codes, so you can just copy and paste it into your editor.

Before we get started, let’s head to the src folder, down to pages and index.js file and add a bracket— () — just after our export default() arrow function. You should have something like this:

import React from "react"

export default () =>(
   <h1>Hello World</h1>
);

Now that we've verified that our code runs fine in the browser, let’s prepare the required CSS files for the page.

For this tutorial, we will be making use of Bootstrap CSS, UIkit, and a custom CSS file. You can download these files here. Be sure to copy the index and style CSS files into the pages folder.

Alright, after downloading the file, move it into your pages folder under the src folder. 

File structure

Up next, let’s link our UIkit CSS file from a CDN. To do this, we head to our public folder and open the index.html file. Locate the opening and closing head tags to then add this HTML code to link to our UIkit external stylesheet.

<link href="https://cdn.rawgit.com/creativetimofficial/now-ui-kit/2e8e665f/assets/css/now-ui-kit.min.css?v1.2.0" rel="stylesheet"></code>

We've successfully added all the required CSS files. We will be working with our index.js file to update our front-end. But first, let’s import the two CSS files we stored in the pages folder under the src folder.

Import './index.css'
Import './style.css'

Add the above import statements directly under your import react statement. Next, we'll work with the HTML. Being efficient, I prepared the HTML code, so just copy and paste this within the two brackets just after the export default() arrow function.

<div class="index-page sidebar-collapse">
   <div class="wrapper">
       <div class="page-header clear-filter filter-color">
           <div class="page-header-image" data-parallax="true">
       </div>
           <div class="container">
               <div class="content-center brand">
                   <h1 class="h1-seo large">THE BIGGEST DIGITAL ACCESSORIES</h1>
                   <h3 class="h3-seo">Coming Soon!</h3>
                  <button type="button" class="btn btn-primary btn-outline-success" style={{marginTop: "5em", width: "200px", fontSize: "20px"}}>Call To Action</button>
               </div>
           </div>
       </div>
   </div>
</div>

Taking two steps back, you can check the style.css file and see that we are setting the background image of the page and you can see some other styling right there. Refresh your browser to see the changes take effect and, voila, you have your landing page up and running.

Conclusion

GatsbyJS makes it easy to build landing pages. It’s quite fast and efficient, saving you lots of time and effort.

In this article, you’ve seen how to set up the requirements for working with GatsbyJS. You’ve also seen how you can build a simple but unique landing page. If you wish, you can make customizations to the whole set up and make a landing page of your own.

Thanks for reading. Questions and contributions are welcomed.

Topics:
gatsbyjs ,javascript ,static site ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}