Creating an Agency Site in GatsbyJS-1

Photo by Kevin Ku on Unsplash

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
install

Rest of the chapter is exclusive content and will be in my upcoming book Gatsby Cookbook. You can find more details about it here.

You can find part-2 here.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Creating Employee Hierarchy Data Model using D3 (Part-3)

Designing Tokens — What makes great design tokens, and how to build them (Part 1)

The Easy Way to Understanding the React Context API

JavaScript methods Splice() Split() Slice()

A brief guide to Object.defineProperty() method in JavaScript

https://www.nasa.gov/audience/forstudents/5-8/features/nasa-knows/what-is-the-iss-58.html

Client Side Rendering Vs Server Side Rendering in React js & Next js

ES6 — Beginner’s Guide Contd.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

React App with Final Space API — Tinder Style

Bankist App: Banking made minimalist.

Setting Up a Netlify Contact Form in Your React Web Application

Create a form using React Hook Form to POST and GET data from your MongoDB on Next.js: Part I