https://github.com/jaydanurwin/gatsby-starter-material-business-markdown
View Live Demo:
https://github.com/jaydanurwin/gatsby-starter-material-business-markdown
blog gatsby gatsby-blog gatsby-starter gatsbyjs markdown material-components material-design mdc-web minimal netlify react static-site-generator
Last synced: about 2 months ago
JSON representation
View Live Demo:
- Host: GitHub
- URL: https://github.com/jaydanurwin/gatsby-starter-material-business-markdown
- Owner: jaydanurwin
- License: mit
- Created: 2019-05-02T16:21:45.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T20:40:12.000Z (over 2 years ago)
- Last Synced: 2025-04-04T18:22:13.202Z (3 months ago)
- Topics: blog, gatsby, gatsby-blog, gatsby-starter, gatsbyjs, markdown, material-components, material-design, mdc-web, minimal, netlify, react, static-site-generator
- Language: JavaScript
- Homepage: https://gatsby-starter-material-business-markdown.netlify.com
- Size: 10.6 MB
- Stars: 12
- Watchers: 0
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://app.netlify.com/sites/gatsby-starter-material-business-markdown/deploys)
# Gatsby Starter by ANOUN | Material Business - Markdown
## Features
* [MDC React Components](https://github.com/material-components/material-components-web-react)
* [MDC Theming](https://material.io/develop/web/docs/theming/)
* Modern Design
* Home Page
* About Page
* Contact Page
* [Formspark](https://formspark.io/) contact form
* 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](https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https://gatsby-starter-material-business-markdown.netlify.com/)
## Deploy to Netlify
[](https://app.netlify.com/start/deploy?repository=https://github.com/ANOUN/gatsby-starter-material-business-markdown)
## Customization
### 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: "https://gatsby-starter-anoun-1-markdown.netlify.com", // 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
}
```
### Theme
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;
}
```
### Typography
Edit `config/typography.js`
```
import Typography from "typography"
const typography = new Typography({
title: "Gatsby Starter Material Business",
baseFontSize: "18px",
baseLineHeight: 1.666,
headerFontFamily: [
"Lora",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Helvetica",
"Arial",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
],
bodyFontFamily: [
"Lato",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Helvetica",
"Arial",
"sans-serif",
"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.md`
```
# About
Welcome to the Material Business Starter by [ANOUN](https://anoun.company)! This is the first in our series of Gatsby Starters inspired by Google's [Material Design](https://material.io). 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](https://github.com/ANOUN/gatsby-starter-material-business-markdown) and get started!
...
```
### Contact Form
Create a form at [Formspark.io](https://formspark.io)
Replace "YOUR-FORM-ID" with your formspark form's ID in `src/components/ContactForm/ContactForm.js`
```
...
handleSubmit = event => {
event.preventDefault()
fetch('https://submit-form.com/YOUR-FORM-ID', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},
body: JSON.stringify(this.state)
})
.then(this.handleSuccess)
.catch(function(error) {
console.error(error)
})
}
...
```
## Credits
Designed by [Jaydan Urwin](https://jaydanurwin.com)
Made in Idaho