Gatsby Material Business


Simple and elegant blog template for Gatsby.

Gatsby Material Business

Netlify Status


  • MDC React Components
  • MDC Theming
  • Modern Design
  • Home Page
  • About Page
  • Contact Page
  • Blog
    • Featured images for blog posts
    • Markdown post format
  • SEO
    • Open Graph Tags
    • Dynamic Titles and Descriptions
    • Sitemap.xml
  • Prettier code formatting
  • CSS Fluid Typography
  • PWA Support
  • Google Analytics Support

Performance Test

View Lighthouse Test Results

Deploy to Netlify

Deploy to Netlify


Website Data

Edit config/website.js

module.exports = {
// SEO
title: "Gatsby Starter #1 | ANOUN | Markdown", // Navigation and Site Title
titleTemplate: "%s · Gatsby Starter #1", // Template for Page Titles
description: "This is Gatsby Starter #1 by ANOUN with content sourcing from Markdown files. Don't be shy, clone it on Github if you'd like!",
siteUrl: "", // Domain of your site. No trailing slash!
image: "/images/anoun-share-image.png", // Used for SEO Share Image
// Manifest
icon: "src/favicon.png", // Used for manifest favicon generation
short_name: "ANOUN", // shortname for manifest. MUST be shorter than 12 characters
owner: "ANOUN", // Author
theme_color: "#663399",
background_color: "#ffffff",
// Social and Analytics
twitterUsername: "@anouncompany", // Twitter Username
googleAnalyticsID: "", // Google Analytics Tag ID


Edit src/styles/theme.scss

:root {
--mdc-theme-primary: #663399;
--mdc-theme-on-primary: #ffffff;
--mdc-theme-secondary: #000000;
--mdc-theme-on-secondary: #ffffff;
--mdc-theme-surface: #fefefe;
--mdc-theme-background: #ffffff;
--mdc-theme-on-background: #000000;


Edit config/typography.js

import Typography from "typography"
const typography = new Typography({
title: "Gatsby Starter Material Business",
baseFontSize: "18px",
baseLineHeight: 1.666,
headerFontFamily: [
"Segoe UI",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
bodyFontFamily: [
"Segoe UI",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
scaleRatio: 3.157,
headerWeight: 400,
overrideStyles: () => ({
img: {
marginBottom: 0,
export default typography

About Page

Edit content/pages/

# About
Welcome to the Material Business Starter by <span class="anoun-title">[ANOUN](</span>! This is the first in our series of Gatsby Starters inspired by Google's [Material Design]( The Material Business starter features all the basics for a typical business' website such as a home page, about page, contact page with an email form, and a fully featured blog. This one is sourced from Markdown but we'll have others that use a headless CMS (stay tuned). So don't be shy, feel free to clone the [Github Repo]( and get started!

Contact Form

Create a form at

Replace "YOUR-FORM-ID" with your formspark form's ID in src/components/ContactForm/ContactForm.js

handleSubmit = event => {
fetch('', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
body: JSON.stringify(this.state)
.catch(function(error) {


Designed by ANOUN

Made in Idaho

MIT License

Deploy theme in one click

Deploy to netlify

Gatsby template

  • Compatible with Gatsby v2
  • It is a Gatsby starter

Compatible with Markdown

  • This template uses only local files