gatsby-starter-wyoming

This GatsbyJS V3 starter template, gatsby-starter-wyoming, is specifically designed for small business website projects. It offers a fully-responsive, one-page site structure complete with a contact form, robust SEO capabilities, and GDPR-compliant Facebook Pixel and Google Analytics integration. The goal is to enable rapid deployment of high-quality, accessible websites using Gatsby.

Key Features:

• Configurable: Easily customize styles using SCSS variables, manage site data, links, and icons from a dedicated data folder, and leverage alias imports for organized folder structures. Intuitive styling is achieved with SCSS modules.
• Accessible: Includes a skip link, keyboard navigation, ARIA labels, alt tags, and semantic HTML to ensure broad accessibility.
• SEO Optimized: Features a comprehensive SEO component supporting Open Graph, Twitter cards, and JSON-LD schema. It also provides GDPR-compliant Google Analytics and Facebook Pixel integration with a cookie consent banner, and automatically generates a sitemap.xml on build.
• Ready for Launch: Boasts a full responsive design, a header component with distinct desktop and mobile navigation, lazy-loaded images for performance, a Netlify form with a custom success page, and a styled 404 error page.

Quick Start: To get started, clone the repository, navigate into the project directory, install dependencies, and then run the development server:

git clone https://github.com/stormcloud266/gatsby-starter-wyoming
cd gatsby-starter-wyoming
yarn install
yarn develop

Customizations:

• Configuration: User-specific data, including title, descriptions, and analytics IDs, is managed in src/data/config.js. Links and icons are defined in links.js.
• Global Styles: Modify site-wide styles such as text, background, accent colors, fonts, breakpoints, and padding through SCSS variables in src/assets/globalStyles/_variables.scss.
• Fonts: Web fonts are stored in static/fonts and can be updated in src/globalStyles/_fonts.scss and referenced in _variables.scss.
• Icons: Icons from TeenyIcons are converted to React components and located in src/assets/images/icons.js.
• Form: The contact form's name can be customized via a name prop for differentiation in Netlify Forms.
• SEO: The large summary card image is in the static/ folder. Default SEO information is in src/data/config.js and can be overridden per page using props.
• Analytics: Integrate Google Analytics and/or Facebook Pixel by adding tracking IDs to src/data/config.js and configuring the CookieBanner component in src/components/global/cookieBanner.js for GDPR compliance.