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](https://github.com/gatsbyjs/gatsby-starter-hello-world)
Now, goto the directory and run gatsby develop
Now, this basic site is up and running at http://localhost:8000/
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.
Next create a file gatsby-browser.js in the root directory and include this global.css file.
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.
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.
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.
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.
It will result in the below.
Let’s now add some styles to the h2, p and a(Link tag converts to an anchor tag).
Which will result in this beautiful page.
Let’s add the style for the text Learn More. For this also we use the position: absolute logic.
Let’s start with our Section two. Update the index.js to include this.
Now, let’s add some styled-components for the SectionTwo.
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
Just add the following code below your div from last.
And you will get this.
We also need some padding in this section. Let’s add it.
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
Now, let’s add these styles in IndexStyles.js
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.
Now, use it as required.
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
Then replace this in the index.js
GenericH2 in SectionTwo
GenericH2 in SectionThree
This completes Section Three.
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.