Foundation Gatsby Projects Create Four Real Production Websites with Gatsby — Nabendu Biswas Foundation Gatsby Projects Create Four Real Production Websites with Gatsby Nabendu Biswas Foundation Gatsby Projects: Create Four Real Production Websites with Gatsby Nabendu Biswas Bangalore, India ISBN-13 (pbk): 978-1-4842-6557-4 ISBN-13 (electronic): 978-1-4842-6558-1 https://doi.org/10.1007/978-1-4842-6558-1 Copyright © 2021 by Nabendu Biswas This work is subject to copyright. All rights are reserved 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. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Louise Corrigan Development Editor: James Markham Coordinating Editor: Nancy Chen Cover designed by eStudioCalamar Cover image designed by Freepik (www.freepik.com) 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. For information on translations, please e-mail [email protected]; for reprint, paperback, or audio rights, please e-mail [email protected]. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484265574. For more detailed information, please visit http://www.apress.com/source-code. Printed on acid-free paper To my wife and kid. This book is affectionately dedicated. Table of Contents About the Author �����������������������������������������������������������������������������������������������������ix About the Technical Reviewer ���������������������������������������������������������������������������������xi Introduction �����������������������������������������������������������������������������������������������������������xiii 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 v Table of ConTenTs 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 vi Table of ConTenTs 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 vii Table of ConTenTs Implementing the Video ������������������������������������������������������������������������������������������������������������397 Create the Video Component �����������������������������������������������������������������������������������������������399 Deploying Netlify �����������������������������������������������������������������������������������������������������������������������407 Making CSS Changes ����������������������������������������������������������������������������������������������������������������415 Automatic Deployment ��������������������������������������������������������������������������������������������������������419 Summary�����������������������������������������������������������������������������������������������������������������������������������423 Index ���������������������������������������������������������������������������������������������������������������������425 viii About the Author Nabendu Biswas 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. ix About the Technical Reviewer Alexander Chinedu Nnakwue 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. xi