bbuilds / byoungz-gatsby-headlesswp

A custom-built website using gatsby and headless WP

BYOUNGZ Gastby and WP Wordpress theme.

A custom built Gatsby theme leveraging WP as backend. Also built in is a custom IG feed using the Basic Display API and feeding into gatsby node.

LIVE URL

https://byoungz.com/

🔨 Dev Notes

Some useful notes to help clriafy what is needed for the theme.

ENV Vars

URL with WP Graphql Feed WPGRAPHQL_URL

If using a local URL (ignores self signed cert warnings) NODE_TLS_REJECT_UNAUTHORIZED = '0'

Needed User Access token if you want to use IG feedIG_ACCESS_TOKEN

Site URL needed for compiling things like sitemapSITE_URL

Google Tag Manager ID GTM_ID

Formspree URL GATSBY_FORM_SPREE_URL

Needed WP Plugins

• ACF
• Yoast
• WP GraphQL
• WPGraphQL Yoast SEO Addon
• WPGraphQL for Advanced Custom Fields
• WPGatsby - optional but very useful

Technology

• Tailwind CSS A utility-first CSS framework for rapidly building custom designs. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs

• React tsParticles Lightweight TypeScript library for creating particles.

• AOS -Animate On Scroll Library

• IG Basic Display API - Using Basic Display API for feed - will need to create an app, add an IG user, and generate their access token to display YOUR feed.

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

• For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

• To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.