Nabendu Biswas

Foundation Gatsby Projects

Create Four Real Production Websites with Gatsby

1st ed.
Nabendu Biswas
Bangalore, India
ISBN 978-1-4842-6557-4e-ISBN 978-1-4842-6558-1
https://doi.org/10.1007/978-1-4842-6558-1
© Nabendu Biswas 2021
This work is subject to copyright. All rights are solely and exclusively licensed by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed.
The use of general descriptive names, registered names, trademarks, service marks, etc. in this publication does not imply, even in the absence of a specific statement, that such names are exempt from the relevant protective laws and regulations and therefore free for general use.
The publisher, the authors and the editors are safe to assume that the advice and information in this book are believed to be true and accurate at the date of publication. Neither the publisher nor the authors or the editors give a warranty, expressed or implied, with respect to the material contained herein or for any errors or omissions that may have been made. The publisher remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.
Distributed to the book trade worldwide by Springer Science+Business Media New York, 1 New York Plaza, New York, NY 10004. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.

To my wife and kid. This book is affectionately dedicated.

Introduction

I have done quite a bit of freelance work in WordPress development since 2011. The three things that I didn’t like about WordPress at that time were that little coding knowledge was required, the sites were slow, and they were easily hacked.

The awesome static site generator GatsbyJS solves all of these problems. It is built with React, so you can utilize all your React knowledge. Plus, it uses the in-demand GraphQL, so you will work with that also. The sites are blazing fast and completely secure. You need a bit of ReactJS knowledge to work with Gatsby, but it adds so much to the React ecosystem. It has a large plugin system like WordPress, which adds functionality. It can be used with a wide range of backend systems, like CMS, Firebase, and many more. In this book, we will first create a simple site using only Gatsby. After that, we will use Stackbit to quickly build a Gatsby site. Then we will build a complex site with all features using the Contentful CMS. The last chapter shows you how to build a video chat site, similar to Skype but using the Twilio service.

Table of Contents
Chapter 1:​ Creating an Agency Site 1
The Setup 1
Creating the Home Page 2
Creating the Index Page 3
Creating the Sections 9
Creating Section Two 9
Creating Section Three 13
Creating Section Four 20
Creating the Grid 21
Creating the Contact Us Form 26
Creating the Footer Section 29
Creating the Menu 32
Creating the Our Works and About Us Pages 34
Deploying the Site 44
Summary 52
Chapter 2:​ Creating a Blog Site Using Stackbit 53
The Setup Process 53
Adding a Domain 64
Adding Gatsby Plugins 80
gatsby-plugin-robots-txt 81
gatsby-plugin-sitemap 81
gatsby-plugin-google-analytics 84
Adding Social Links 95
Adding the Disqus Plugin 97
Adding More Site Features 100
Adding Advertisements 111
Making Minor Updates 120
Summary 123
Chapter 3:​ Creating a Tourism Site with Contentful:​ Part One 125
The Setup 125
Navbar and Footer 138
Creating the SimpleHero Component 144
About Section 150
Creating a Hot Tips Section 157
Creating a Deployment Site 161
Image Optimization 168
Background Image Optimization 176
Creating a Page Transition 185
Adding a Contact Form 190
Summary 200
Chapter 4:​ Creating a Tourism Site with Contentful:​ Part Two 201
Setting Up Contentful 201
CMS Setup 201
Install the Gatsby Plugins 219
Adding Queries for the Places Component 228
Adding the Featured Places Component 231
Adding the Place Component 236
Creating the Places Component 242
Create a Place Template 246
Summary 262
Chapter 5:​ Creating a Tourism Site with Contentful:​ Part Three 263
Creating the Blog Component 263
Adding Data to the Content Model 270
Displaying the Blog Component 277
Creating the BlogCard Component 281
Creating the Single Blog Page 285
Creating the Photos Component 299
Setting Up Contentful for the Photos Component 302
Creating the PhotoList Component 306
Creating the PhotoCard Component 309
Creating the Photos Template 311
Summary 317
Chapter 6:​ Creating a Tourism Site with Contentful:​ Part Four 319
Adding Gatsby Plugins 319
The SEO Plugin 320
Other Plugins 334
Adding Advertisements to the Site 337
Using Media.​net Ads 337
Using Infolinks Ads 342
Summary 347
Chapter 7:​ Creating a Video Chat Site 349
The Setup 349
Creating a Twilio Account 350
Working in the Dashboard 358
Updating the API Key Settings 362
Creating Twilio Functions 368
Adding the Code 378
Basic Setup 378
Create a Login Form 381
Connect the App to Twilio 388
Implementing the Video 397
Create the Video Component 399
Deploying Netlify 407
Making CSS Changes 415
Automatic Deployment 419
Summary 423
Index 425
About the Author
Nabendu Biswas
../images/502843_1_En_BookFrontmatter_Figb_HTML.jpg

is a full-stack JavaScript developer who has been working in the IT industry for the past 15 years. He has worked for some of the world’s top development firms and investment banks. He currently works as an Associate Architect at Innominds. He is also a passionate tech blogger who publishes on thewebdev.tech and is an all-round nerd, passionate about everything JavaScript, React, and Gatsby. You can find him on Twitter @nabendu82.

 
About the Technical Reviewer
Alexander Chinedu Nnakwue
../images/502843_1_En_BookFrontmatter_Figc_HTML.jpg

has a background in Mechanical Engineering from the University of Ibadan, Nigeria and has been a frontend developer for over three years. He has worked on both web and mobile technologies. He also has experience as a technical author, writer, and reviewer. He enjoys programming for the web, and occasionally, you can find him playing soccer. He was born in Benin City and is currently based in Lagos, Nigeria.

 
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.128.199.130