gatsby-starter-material-ui-blog-theme

gatsby-starter-material-ui-blog-theme is a Gatsby starter for a Material-UI based blog, built on the @greatgatsbyjs/gatsby-theme-ggt-material-ui-blog theme to turn markdown/MDX files into a fully featured static blog.

What is gatsby-starter-material-ui-blog-theme?

The starter is a preconfigured Gatsby project that installs @greatgatsbyjs/gatsby-theme-ggt-material-ui-blog as a plugin and includes a content/blog directory with three sample markdown posts. Its core function is to let you create a Material-UI themed blog by supplying a gatsby-config.js with siteMetadata options and writing posts as .md or .mdx files. The starter runs on Gatsby.js and builds to a static site that can be deployed anywhere Gatsby supports, including Netlify. It was created by Kaleb McKelvey and distributed under KMK Studios LLC.

Key Features

• Material UI theming — Colors such as primary and secondary are passed through theme options and translated by the Material-UI plugin into a full MUI theme.
• Plugin-based architecture — The theme is a Gatsby plugin, so configuration lives in gatsby-config.js and component shadowing lets you override any theme file.
• Extensive siteMetadata — Options cover author, avatar image, bio lines, copyright, Google Analytics tracking ID, manifest colors, pathPrefix, RSS URL, sitemap URL, SEO keywords, tagline, and title.
• Markdown/MDX content — Writing a new post is as simple as creating a .md or .mdx file in the content/blog directory.
• Built-in integrations — The theme generates an RSS feed, sitemap, SEO metadata, and Google Analytics tracking without extra plugins.
• Component shadowing — Override any theme component by placing a file in src/@greatgatsbyjs/gatsby-theme-ggt-material-ui-blog/, for example a custom Bio component.
• Profile image flexibility — Set an avatar via a remote URL or add a local image to a static folder and reference it in siteMetadata.

Who should use gatsby-starter-material-ui-blog-theme?

Developers who want a Gatsby blog with a Material Design look without starting from scratch. Designers who want to customize a blog theme through a central color palette. Content writers who are comfortable writing markdown and want a static site with RSS and sitemap built in. It is also a learning resource for anyone who wants to see how a Gatsby theme can be installed and configured through a starter.

What can you do with gatsby-starter-material-ui-blog-theme?

• Developers: Scaffold a new blog with gatsby new my-blog <starter-url> and immediately get a working MUI-styled site.
• Bloggers: Write posts as markdown files; they appear on the home page with a post card and "Read More" button.
• Site owners: Configure SEO keywords, RSS, sitemap, Google Analytics, and PWA manifest through a single config file.

How does gatsby-starter-material-ui-blog-theme work?

After installing the Gatsby CLI, you run gatsby new my-new-blog [email protected]:greatgatsbyjsthemes/gatsby-starter-ggt-material-ui-blog.git, then cd my-new-blog and gatsby develop. The site runs at http://localhost:8000 with the GraphQL explorer at http://localhost:8000/___graphql. To publish a post, add a markdown file to content/blog and restart the dev server to see it.

FAQ

How do I add a new post to the blog?

Create a new .md or .mdx file inside the content/blog directory. The starter includes sample posts as examples. The new file appears on the home page automatically.

How can I change the theme colors?

Edit the theme object in the siteMetadata option in gatsby-config.js. Set primary and secondary to any Material UI color hex values, using the Material UI color palette as a guide.

How do I override a theme component?

Use component shadowing by creating a folder path src/@greatgatsbyjs/gatsby-theme-ggt-material-ui-blog/ and adding a file with the same name as the component you want to replace. For example, adding a Bio/index.js file overrides the default bio.

Can I use my own profile image?

Yes. Either provide a remote URL in the avatarImgSrc siteMetadata field, or add an image to a static folder and reference its filename in the same field.

Is there an example site I can see?

Yes, the starter links to an example site at https://gatsby-theme-material-ui-blog.netlify.com/ to demonstrate the design.