back to all posts

Creating an Agency Site in GatsbyJS-3

by Nabendu Biswas / August 27th, 2019

#gatsby #react #webdev
Series: Gatsby-agency

Welcome to part-3 of the series. In the previous part we have created a common footer in the layout component.

Let us first create a Header with Navigation.

index.jsindex.js

Let’s add some styles now in styled-components.

The StylesThe Styles

We now get a header with Menu.

The MenuThe Menu

Next, we will create our Works page. Create a new file works.js inside pages folder.

New Works pageNew Works page

Let’s add some Styles for the same in IndexStyles.js

StylingStyling

We will soon create a new component Project in which will pass each project. Let’s create an Array of Object containing some projects.

The ArrayThe Array

Next, let’s create the Project component inside components folder.

ProjectProject

Let’s add some styles for the component in global.css

global stylesglobal styles

This shows our Works page.

WorksWorks

We have missed one thing and that is to make the header fixed, so that if we scroll then also the header remains. For this in IndexStyles.js add the following.

Header fixedHeader fixed

This was causing issues with Our Works text, because the margin: 0 for GenericH2

Let’s edit it using props, so that it can be used in works.js without effecting others.

Styles updatedStyles updated

Now, in works.js we just need to add some

some addedsome added

We will next create a new page about.js inside pages folder.

New pageNew page

Here, we are reusing most of the part from our index.js, but using a different Banner image. We are doing this again with the help of props of styled components.

Banner updatedBanner updated

Let’s make SectionTwo now. Here we will again reuse a styled component.

SectionTwoSectionTwo

We made the below changes in the SectionTwo styled component, to include a white background.

SectionTwo changesSectionTwo changes

We have also added two new styled components.

New Styled componentsNew Styled components

Now our About page looks like below.

About UsAbout Us

We will now deploy our site to netlify. We already have a form submission setup in the index.js page with netlify.

If you want to know in details of form submission setup, go through this youtube video by Traversy media.

I have already pushed all my code to github. Now, let’s deploy to netlify. Open your netlify account.

NetlifyNetlify

Now, click on New Site from Git

And then choose the provider. I have choose Github as my code is there. Once you authorize, it will show you list of all your Github repositories.

All reposAll repos

Click on the repo to deploy. In my case it was AgencyDemo

DefaultsDefaults

Keep the defaults and click on Deploy Site

And the site will be deployed within minutes.

Site deployedSite deployed

Our site is deployed. It’s time to check the form submission feature of netlify. Go to the form in home page and add content.

Content AddedContent Added

The form submission didn’t went as expected and gave me a lot of error. After searching found that form handling in site generated through gatsby is a bit different in netlify. Found these two links to solve the issue.

https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#form-handling-with-static-site-generators https://github.com/sw-yx/gatsby-netlify-form-example-v2

So, we will change our functional component to class based component and do the following changes.

Class based componentClass based component

And these changes also.

ChangesChanges

We also need to add thanks.js file inside pages folder

thanksthanks

Now, when we submitted the form we receive the message in our netlify console.

Message receivedMessage received

You can find the complete code for the project here https://github.com/nabendu82/AgencyDemo

The netlify deployment is here https://priceless-panini-95d866.netlify.com/

Nabendu Biswas