I have done quite a bit freelance WordPress development around 9 years back(2011). Three things which i didn’t liked at that time with WordPress. First was little coding, as i was creating these sites in WordPress with themes. Second, the sites were really slow and third, a lot of these sites were hacked and client used to come back.

I had came a long way since then and now i work as JS developer (React/Angular). I keep this awesome static site generator, GatsbyJS and decided to dive into it. I need to create a new blog site and some other personal sites. These sites are mostly static and Gatsby is a great way to use my React Skills and seems to also solve the problems which i had with Wordpress.

Will first try it to build a simple demo Agency site(Known as Service company in India). Right now i had gone through only the official docs at https://www.gatsbyjs.org/tutorial/ and it is awesome. Although i can use, one of the many starter kits available at Gatsby site to get a head-start. But decided to writer my own CSS, to brush up my CSS skills.

Let’s start with Gatsby. I will be following along with the tutorial to create the site. Install gatsby globally by npm install -g gatsby-cli

Next to create a new gatsby site give the following command in the terminal. It uses the most basic gatsby starter kit.

    gatsby new agencyDemo https://github.com/gatsbyjs/gatsby-starter-hello-world

installinstall

Now, goto the directory and run gatsby develop

gatsby developgatsby develop

Now, this basic site is up and running at http://localhost:8000/

Gatsby upGatsby up

Will start with creating the home page first. In Gatsby everything is React, so we will create the Home page component. We will first use global styles for the generic styles.

First create a folder styles inside src. Then a file global.css inside it. We will put the below generic global css inside it.

Basic StylesBasic Styles

Next create a file gatsby-browser.js in the root directory and include this global.css file.

gatsby-browser.jsgatsby-browser.js

We will use the extremely popular and my favorite CSS-in-JS library Styled Component to style the rest of the project.

We need to install some dependencies for styled-components. So, open up the terminal and type the below command.

    npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

Next, include the below in sites gatsby-config.js This file should be there already in the root folder.

gatsby-config.jsgatsby-config.js

Then restart the gatsby develop in the terminal.

We will now start with the index page. We will have a full page image and some centered text on top of it. First change your index.js as below.

index.jsindex.js

Now, we will start to write the Styled component. Create a file IndexStyles.js inside styles directory.

First the styles for the Banner. We will show our banner.jpg file as a background-image, so use the :after pseudo element.

Also, upload the image banner.jpg to the static folder. From here in a gatsby project, we can directly use an image.

Banner StylesBanner Styles

Next, we will center our text. We need to use the positioning system as we are showing the text over an image. We had already made the parent a position: relative and this div, we are making position: relative. Then we are using the left, top and transform it.

position: absoluteposition: absolute

Please make sure to have the below at the bottom of IndexStyles.js or else you will get an error.

export { Banner, TextWrapper, MoreText }

It will result in the below.

Centered text.Centered text.

Let’s now add some styles to the h2, p and a(Link tag converts to an anchor tag).

Styling.Styling.

Let’s add the style for the text Learn More . For this also we use the position: absolute logic.

MoreTextMoreText

Which will result in this beautiful page.

The beautyThe beauty

Let’s start with our Section two. Update the index.js to include this.

SectionTwoSectionTwo

Now, let’s add some styled-components for the SectionTwo.

SectionTwoSectionTwo

We will now use some font-awesome icons to give this section a nice finish. Open the terminal and install the dependencies.

npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

Then import the libraries in index.js

fontawesomefontawesome

Just add the following code below your div from last.

Awesome codeAwesome code

And you will get this.

Our PassionOur Passion

We also need some padding in this section. Let’s add it.

Some padding.Some padding.

Next, we will create SectionThree. It will have an image along with text, so we will make use of Flexbox. Add the following in index.js

SectionThreeSectionThree

Now, let’s add these styles in IndexStyles.js

SectionThreeSectionThree

FlexBoxIndexFlexBoxIndex

Let’s do some housekeeping by making common code for paragraph. Remove p from TextWrapper, SectionTwo and FlexBoxIndex

Then create a new styled component, with some props.

Generic ParaGeneric Para

Now, use it as required.

Some ParaSome Para

More paraMore para

Let’s do the same song and dance for h2 tag. Remove h2 from SectionTwo and FlexBoxIndex

And add a styled component GenericH2 in IndexStyles.js

GenericH2GenericH2

Then replace this in the index.js

GenericH2 in SectionTwoGenericH2 in SectionTwo

GenericH2 in SectionThreeGenericH2 in SectionThree

This completes Section Three.

SectionThreeSectionThree

We have two more sections to go in the Home Page and then we will create Our Works and About Us Page. We will use Layout component for Header and Footer.

These all for next parts. You can find code for the same here.

This post is also available on DEV.