Build Fast Website With Gatsby & WordPress Ritesh Vatwani @riteshvatwani 

• What is Headless CMS? • JAMStack and it's benefits • What is Gatsby JS? • How does Gatsby JS Works? • How to Build Site using Gatsby + WordPress • How to deploy Gatsby site? • Solving your queries if you have any 

Headless CMS 

List 1-3 ways your company proposes to solve them. • A headless CMS is used for data capture, storage and delivery, making it frontend agnostic. • Its data can be displayed using any frontend technology, whether in a browser, mobile application, or elsewhere [email protected] 

Headless CMS Traditional CMS Database Backend UI API View Database API Website Mobile App Smart Watch app Backend UI 

JavaScript Api Markup 

Dynamic functionalities are handled by JavaScript. There is no restriction on which framework or library you must use. Server side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom function. Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator. 

• Serve pre-built markup and assets over a CDN No need to worry about server or database vulnerabilities • • Hosting of static files are cheap or even free [email protected] 

Front end developers can focus on the front end, without being tied to a monolithic architecture. This usually means quicker and more focused development If your product or article suddenly goes viral and has many active users, the CDN seamlessly compensates • • [email protected] 

Fast in every way that matters 

• Gatsby is a free and open source framework based on React and GraphQL • Helps to build blazing fast websites and apps [email protected] 

No content

No content

• Can be used as a base in the development of single- page or mobile applications. • Server-side runtime for executing queries by using a type system you define for your data. • It is a JavaScript library for building user interfaces • GraphQL is a query language for APIs 

No content

npm install -g gatsby-cli 

• gatsby new gatsby-with-wordpress-meetup • cd gatsby-with-wordpress-meetup • gatsby develop ( to starts the development server ) 

http://localhost:8000 / 

http://localhost:8000/__graphql 

• Config options for a Gatsby site, with meta data for project title, description, plugins, etc. • Implement Gatsby's Node.js APIs to customize and extend default settings affecting the build process [email protected] 

• Customize and extend default setting affecting the browser, using Gatsby's browser APIs • Use Gatsby’s server-side rendering APIs to customize default settings affecting server- side rendering [email protected] 

Using gatsby-source-wordpress Plugin 

• Source plugin for pulling data into Gatsby from WordPress sites using the WordPress REST API. • Pulls data from self-hosted WordPress sites, or sites hosted on WordPress.com npm install --save gatsby-source-wordpress [email protected] 

No content

• run gatsby develop command in CLI (gatsby build - for production) • It will fetch all the posts from WordPress API and create the posts. • Before you run your first query, ensure the WordPress JSON API is working correctly by visiting /wp-json at your WordPress install. 

No content

• Custom Post Types • ACF (Advanced Custom Fields) • WP-API-MENUS which gives you the menus and menu locations endpoint. • WPML-REST-API which adds the current locale and available translations to all post types translated with WPML. • wp-rest-polylang which adds the current locale and available translations to all post types translated with Polylang. • Yoast 

No content

Push to master Publish Content Webhook Webhook gatsby build Deploy 

No content

No content

89 

• reactjs.org • shopflamingo.com • sendgrid.com/docs/ • airbnb.io • Hopper.com 

No content

Ritesh Vatwani [email protected] www.zestard.com