Using Gatsby and Netlify CMS
Using Gatsby and Netlify CMS
Minimum price
Suggested price
Using Gatsby and Netlify CMS

This book is 100% complete

Completed on 2020-04-26

About the Book

Gatsby is a powerful tool for building static web sites. It does require some technical know-how, though. If you are building a web site for a non-technical audience, then this book is for you. Netlify CMS simplifies the process of creating and managing content with an easy to use administrative user interface, and best of all - it's free and open source.

You can build and deploy a fully featured site, with just the cost of a domain name.

Netlify CMS gives users a WYSIWYG editor experience for authoring Markdown content. This removes the technical barrier to maintaining a Gatsby site. This book will guide you through the entire process of building a blog powered by Gatsby, managed by Netlify CMS, and deployed for free on Netlify.

About the Author

Joe Attardi
Joe Attardi

I have been developing software professionally since 2004, working at companies such as Nortel, Dell, Constant Contact, and Salesforce.

For many years, I was squarely in the Java camp, and JavaScript was an afterthought. Over the years, I became more interested in frontend development, and started using JavaScript more and more.

In 2015 I took a job at Constant Contact doing only front-end development. Since then, I haven't looked back. JavaScript is my primary area of expertise now. I have worked with several JavaScript frameworks (though I may not remember how to use all of them off the top of my head!) such as Angular, React, Svelte, and Vue.

I live in the Boston area with my wife, son, and two cats.

You can find my web site at, and you can find me on Twitter at @JoeAttardi.

Table of Contents

  • Preface
  • About the author
  • About this book
    • About the example project
    • Who this book is for
    • Cover image
  • What is Netlify CMS?
    • About Netlify
    • About Netlify CMS
    • Backends
    • How it works
    • Widgets
    • Previews
    • More information
  • A Gatsby crash course
    • What is Gatsby?
    • GraphQL
    • Query types
    • Plugins
    • Dynamic page creation
    • Wrapping up
  • Setting up the Coffee Shop example project
    • Prerequisites
    • Create a new repository with the starter code
    • Clone the repository
    • Install dependencies
    • Test it out
    • Deploying on Netlify
  • A tour of the example project
    • Directory structure
    • CSS modules
  • Setting up Netlify CMS
    • Install dependencies
    • Create the initial configuration file
    • Collections
    • Configuring blog entries
    • Add the Gatsby plugin
    • Commit and deploy
    • Configure Netlify Identity and Git Gateway
    • More about Netlify Identity
    • Summary
    • Further reading
  • Netlify CMS Content Manager
    • Registering and logging in
    • Creating a new blog entry
    • How publishing works
    • The Markdown editor
    • Adding media
    • The editorial workflow
    • Summary
    • Next steps
  • Sourcing blog data
    • Gatsby plugin configuration
    • Making Gatsby aware of the Markdown files
    • Parsing the Markdown data
    • Querying the data from Gatsby
    • Adding a new entry
    • Summary
  • Dynamic page creation
    • Gatsby Node APIs
    • Adding the slug to the blog entry data
    • Dynamically creating the blog entry pages
    • Linking to the dynamically generated pages
    • Wrapping up
    • One last tweak
    • Summary
  • Blog pagination
    • How pagination works
    • Create some new blog entries
    • Dynamically creating the blog list pages
    • Creating the blog list template page
    • Add some styling
    • Add a link to the new blog list page
    • Summary
  • Adding more content
    • The contentKey attribute
    • A bit of grunt work
    • Updating the queries
    • Creating a pages collection
    • Adding the index page data
    • Adding another file system source
    • Creating template pages for the page data
    • Summary
  • Creating the coffee menu
    • Nested lists
    • Defining the menu page
    • Adding menu items
    • Building the menu page
    • Ease of maintenance
    • Summary
  • Custom previews
    • Customizing Netlify CMS
    • Creating the template
    • Register the preview
    • Open the local Content Manager
    • Adding a new category to the menu
    • Summary
    • Further reading
  • Finishing up
    • Other platforms
    • Further learning
    • Thank you

Authors have earned$9,108,966writing, publishing and selling on Leanpub,
earning 80% royalties while saving up to 25 million pounds of CO2 and up to 46,000 trees.

Learn more about writing on Leanpub

The Leanpub 45-day 100% Happiness Guarantee

Within 45 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

See full terms

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers), EPUB (for phones and tablets) and MOBI (for Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses! Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks. Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. It really is that easy.

Learn more about writing on Leanpub