Extending Gatsby Create a Blog Site Using MDX, CDN, and Netlify — Nabendu Biswas Extending Gatsby Create a Blog Site Using MDX, CDN, and Netlify Nabendu Biswas Extending Gatsby Nabendu Biswas Bhopal, India ISBN-13 (pbk): 978-1-4842-6854-4 ISBN-13 (electronic): 978-1-4842-6855-1 https://doi.org/10.1007/978-1-4842-6855-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/9781484268544. For more detailed information, please visit http://www.apress.com/source- code. Printed on acid-free paper To my Dad. I miss him every day! He left for heaven in November 2020 due to a stroke. He had retired 10 years back from a top government organization, BHEL, as a senior engineer. He always was the pillar in my life. I hoped to spend more time with him, but life had some other plans. Table of Contents About the Authors ����������������������������������������������������������������������������������������������������ix About the Technical Reviewer ���������������������������������������������������������������������������������xi Introduction �����������������������������������������������������������������������������������������������������������xiii Chapter 1: Setting up the Blog Site ��������������������������������������������������������������������������1 Blog Site at a Glance ���������������������������������������������������������������������������������������������������������������������1 Getting Started ������������������������������������������������������������������������������������������������������������������������������3 Adding Folders ������������������������������������������������������������������������������������������������������������������������������4 Basic Structure ������������������������������������������������������������������������������������������������������������������������4 Layout ������������������������������������������������������������������������������������������������������������������������������������10 Adding the Navbar ����������������������������������������������������������������������������������������������������������������������14 Adding the Footer ������������������������������������������������������������������������������������������������������������������������20 Layout for the Home Page �����������������������������������������������������������������������������������������������������25 Summary�������������������������������������������������������������������������������������������������������������������������������������28 Chapter 2: Adding gatsby-plugin-mdx to the Site ��������������������������������������������������29 Getting Started ����������������������������������������������������������������������������������������������������������������������������29 Adding Posts �������������������������������������������������������������������������������������������������������������������������������29 Adding Gatsby Plug-ins ���������������������������������������������������������������������������������������������������������������32 Displaying Posts ��������������������������������������������������������������������������������������������������������������������������36 Generating Pages Programmatically �������������������������������������������������������������������������������������������47 Coding Dynamic Pages ���������������������������������������������������������������������������������������������������������������51 Summary�������������������������������������������������������������������������������������������������������������������������������������57 v Table of ConTenTs Chapter 3: Adding Author Details to the Blog Site ��������������������������������������������������59 Adding Author Details �����������������������������������������������������������������������������������������������������������������59 Adding Tags to the MDX Files ������������������������������������������������������������������������������������������������������62 Adding kebabCase for Slug Paths �����������������������������������������������������������������������������������������������67 Updating gatsby-node�js �������������������������������������������������������������������������������������������������������������69 Creating a Query �������������������������������������������������������������������������������������������������������������������������71 Adding Styles in the Modules������������������������������������������������������������������������������������������������������74 Adding Tags to the Post Page ������������������������������������������������������������������������������������������������������79 Summary�������������������������������������������������������������������������������������������������������������������������������������83 Chapter 4: Adding Functionality to the Site ������������������������������������������������������������85 Adding Search Functionality �������������������������������������������������������������������������������������������������������85 CSS Fix ����������������������������������������������������������������������������������������������������������������������������������������90 Mobile Menu �������������������������������������������������������������������������������������������������������������������������������95 Right and Left Sidebars ���������������������������������������������������������������������������������������������������������96 Styled Components��������������������������������������������������������������������������������������������������������������100 Fixing the Center Tags ���������������������������������������������������������������������������������������������������������108 Closing the Side Menu ���������������������������������������������������������������������������������������������������������111 Summary�����������������������������������������������������������������������������������������������������������������������������������122 Chapter 5: Adding a Series Feature ����������������������������������������������������������������������123 Getting Started ��������������������������������������������������������������������������������������������������������������������������123 Adding Series to Mobile Menu ��������������������������������������������������������������������������������������������������127 Making CSS Changes for the Right Menu ���������������������������������������������������������������������������������131 Showing Series Posts ���������������������������������������������������������������������������������������������������������������134 Adding Series to Each Post Page ����������������������������������������������������������������������������������������������140 Summary�����������������������������������������������������������������������������������������������������������������������������������148 Chapter 6: Deploying the Site in Netlify ����������������������������������������������������������������149 Netlify Deployment ��������������������������������������������������������������������������������������������������������������������149 Correcting an Error ��������������������������������������������������������������������������������������������������������������154 Adding a Custom Domain ����������������������������������������������������������������������������������������������������157 vi Table of ConTenTs Adding a Contact Form with Formspree �����������������������������������������������������������������������������������165 Adding Functionality to the Form ����������������������������������������������������������������������������������������170 Testing the Form ������������������������������������������������������������������������������������������������������������������173 Summary�����������������������������������������������������������������������������������������������������������������������������������175 Chapter 7: Adding Gatsby Plug-ins to the Site �����������������������������������������������������177 gatsby-plugin-robots-txt �����������������������������������������������������������������������������������������������������������177 gatsby-plugin-sitemap ��������������������������������������������������������������������������������������������������������������178 gatsby-plugin-manifest �������������������������������������������������������������������������������������������������������������180 gatsby-plugin-react-helmet ������������������������������������������������������������������������������������������������������186 Adding SEO �������������������������������������������������������������������������������������������������������������������������������191 gatsby-plugin-google-analytics ������������������������������������������������������������������������������������������������200 Checking for Errors �������������������������������������������������������������������������������������������������������������������206 gatsby-plugin-disqus ����������������������������������������������������������������������������������������������������������������212 gatsby-plugin-mailchimp ����������������������������������������������������������������������������������������������������������221 Summary�����������������������������������������������������������������������������������������������������������������������������������229 Chapter 8: New Features and Fixes ����������������������������������������������������������������������231 Changing the Cover Image ��������������������������������������������������������������������������������������������������������232 Adding a Subscription Box ��������������������������������������������������������������������������������������������������������236 Showing the Total Blog Count ���������������������������������������������������������������������������������������������������240 Correcting Any Errors ����������������������������������������������������������������������������������������������������������������246 Adding a Google Search Console ����������������������������������������������������������������������������������������������254 Summary�����������������������������������������������������������������������������������������������������������������������������������260 Index ���������������������������������������������������������������������������������������������������������������������261 vii About the Author Nabendu Biswas is a full-stack JavaScript developer who has been working in the information technology industry for the past 15 years. He has worked for some of the world’s top development firms and investment banks. He is currently working as an Associate Architect at Innominds. He is a passionate tech blogger who publishes on dev.to and medium.com and on thewebdev.tech. He is an all-around 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 front-end developer for more than three years working 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 also find him playing soccer. He was born in Benin City and is currently based in Lagos, Nigeria. xi Introduction This book takes you through a large, professional blog site using Gatsby. It uses the latest technologies of MDX, Netlify, and CDN to develop this production site. The site we create in this book is already in production with 10,000 visitors monthly. This is an advanced book and it is advised that you know the basics of React before using this book. Also, readers are advised to go through “Foundation Gatsby Projects” by the author to learn the basics of Gatsby with much simpler projects. xiii