Gatsby Material Business Markdown is a Gatsby starter template from ANOUN that builds a business website with Material Design components, a Markdown-powered blog, and a Formspark contact form, ready for one-click deployment on Netlify.
What is Gatsby Material Business Markdown?
Gatsby Material Business Markdown is a Gatsby starter created by ANOUN and designed by Jaydan Urwin, built on the React-based Gatsby static site generator. It takes Markdown files as its content source and produces a static site with a home page, an about page, a contact page with a working form, and a blog featuring per-post images. The template is the first in ANOUN's series of Gatsby starters inspired by Google's Material Design and is distributed as a public GitHub repository that can be deployed directly to Netlify with the official Netlify deploy button.
Key Features
- MDC React Components — The interface is built with Material Components Web React, Google's Material Design component library for React.
- MDC Theming — Theme colors are defined as CSS custom properties in
src/styles/theme.scss, covering primary, secondary, surface, and background colors, so rebranding means editing a few variables. - Home, About, and Contact pages — Three core business pages ship with the starter, including a contact page wired to Formspark; after creating a form at Formspark.io you replace the placeholder form ID in
src/components/ContactForm/ContactForm.js. - Markdown blog — Blog posts are written in Markdown and support featured images, so content can be authored without a CMS or database.
- SEO — Built-in SEO includes Open Graph tags, dynamic page titles and descriptions, and sitemap.xml generation.
- PWA support — Progressive Web App manifest and favicon generation are configured through
config/website.js. - Google Analytics support — A tracking ID field in
config/website.jsturns on Google Analytics for the built site. - CSS Fluid Typography — Typography uses Typography.js with an 18px base font size, a scale ratio of 3.157, Lora header fonts, and Lato body fonts, all editable in
config/typography.js.
Who should use Gatsby Material Business Markdown?
Small business owners can publish a site with a contact form and blog without commissioning a custom build. Developers can use it as a starting point for client projects, since brand colors, fonts, metadata, and analytics are all controlled from configuration files. Freelancers who need a Markdown-based blog plus static pages can avoid setting up a CMS entirely. Agencies that deploy regularly on Netlify get a one-click deploy flow through the official Netlify deploy button.
What can you do with Gatsby Material Business Markdown?
- Small businesses: publish a ready-to-go marketing site with home, about, and contact pages and deploy it to Netlify in one click.
- Developers: customize the Material theme by editing CSS custom properties, swap fonts in
config/typography.js, and add Google Analytics by entering a tracking ID inconfig/website.js. - Content editors: author blog posts as Markdown files with featured images and publish them without touching the UI code.
- Form owners: connect a Formspark form to the contact page by pasting a form ID into
ContactForm.js.
How does the template work?
Deploy the starter to Netlify with the one-click deploy button, then customize it through configuration files: site title, SEO fields, manifest details, and analytics live in config/website.js; theme colors live in src/styles/theme.scss; the about page is a Markdown file at content/pages/about.md. For the contact form, you create a form at Formspark.io and replace "YOUR-FORM-ID" in src/components/ContactForm/ContactForm.js with the ID Formspark gives you.
Alternatives
gatsby-starter-blog is Gatsby's official minimal blog-focused starter, and gatsby-starter-netlify-cms pairs a Gatsby site with Netlify CMS for Git-based content editing.
FAQ
How do I connect the contact form?
Create a form at Formspark.io and copy the form ID. Open src/components/ContactForm/ContactForm.js and replace "YOUR-FORM-ID" with your ID; the form submits with a fetch POST request to https://submit-form.com/YOUR-FORM-ID.
How do I change the site title and SEO metadata?
Edit config/website.js and update the title, titleTemplate, description, siteUrl, and image fields. The Google Analytics tracking ID and PWA manifest details such as icon, short_name, theme_color, and background_color are configured in the same file.
Can I change the colors?
Yes. Open src/styles/theme.scss and edit the CSS custom properties such as --mdc-theme-primary and --mdc-theme-secondary. Because the starter uses Material Design theming, the updated values propagate to the MDC React components.
How do I write a blog post?
Add a new post as a Markdown file in the blog content directory. The starter supports a featured image per post and formats posts from Markdown automatically. No CMS or database is required.
Is Google Analytics included?
Yes. The starter includes Google Analytics support. Add your tracking ID to the googleAnalyticsID field in config/website.js and the analytics script is included in your built site.
