Build Fast Website With Gatsby & WordPress

Session by Ritesh Vatwani contains -
-> What is JAMStack
-> What is Gatsby
-> How Gatsby Works
-> Bridging between Gatsby and WordPress
-> Building website using Gatsby and WordPress

Transcript

1. Build Fast Website With Gatsby & WordPress Ritesh Vatwani @riteshvatwani
2. • 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
3. Headless CMS
4. 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 ritesh@zestard.com
5. Headless CMS Traditional CMS Database Backend UI API View Database API Website Mobile App Smart Watch app Backend UI
6. JavaScript Api Markup
7. 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.
8. • 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 ritesh@zestard.com
9. 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 • • ritesh@zestard.com
10. Fast in every way that matters
11. • Gatsby is a free and open source framework based on React and GraphQL • Helps to build blazing fast websites and apps ritesh@zestard.com
14. • 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
16. npm install -g gatsby-cli
17. • gatsby new gatsby-with-wordpress-meetup • cd gatsby-with-wordpress-meetup • gatsby develop ( to starts the development server )
18. http://localhost:8000 /
19. http://localhost:8000/__graphql
20. • 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 ritesh@zestard.com
21. • 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 ritesh@zestard.com
22. Using gatsby-source-wordpress Plugin
23. • 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 ritesh@zestard.com
25. • 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.
27. • 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
29. Push to master Publish Content Webhook Webhook gatsby build Deploy
33. • reactjs.org • shopflamingo.com • sendgrid.com/docs/ • airbnb.io • Hopper.com
35. Ritesh Vatwani ritesh@zestard.com www.zestard.com