Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

mdworld theme "Jackson"

Modern stack for Uses JAMstack with GatsbyJS (PWA traits), React, TypeScript and API calls to Hosting on Github Pages and SSL with Cloudflare.

Naming theme

Adding React components to Markdown posts

Add to render function in src/templates/post.jsx See also


Code Climate Issue Count Codacy Badge


Gatsby Material Starter

A blog starter with Material design in mind for Gatsby.

Demo website.


GatsbyJS V1

This starter is based on GatsbyJS V1, which brings progressive web app features such as automatic code and data splitting (by route), prefetching, with service worker/offline-first support and PRPL pattern.

More information in the announcement.


  • Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
  • React-MD for Material design
    • Integrated FontAwesome support
    • Integrated Material Icons support
  • SASS/SCSS styling
  • Separate components for everything
  • High configurability:
    • User information
    • User social profiles
    • Copyright information
    • More!
  • Author segment
    • Name
    • Location
    • Description
    • Links
    • Follow Me button
  • Posts in Markdown
    • Code syntax highlighting
    • Embedded YouTube videos
    • Embedded Tweets
  • Tags
    • Seprate page for posts under each tag
  • Categories
    • Separate page for posts under each category
  • Suggested posts segment
  • Disqus support
    • Notifications about new disqus comments
  • Google Analytics support
  • Responsive design
    • On mobile, Disqus is loaded only after expanding comments for better performance
  • Social features
    • Twitter tweet button
    • Facebook share/share count
    • Reddit share/share count
    • Google+ share button
    • LinkedIn share button
    • Telegram share button
  • SEO
    • Sitemap generation
    • robots.txt
    • General description tags
    • JSONLD (Google Rich Snippets)
    • OpenGraph Tags (Facebook/Google+/Pinterest)
    • Twitter Tags (Twitter Cards)
  • RSS feeds
  • Loading progress for slow networks
  • Offline support
  • Web App Manifest support
  • Development tools
    • ESLint for linting
    • Prettier for code style
    • Remark-Lint for linting Markdown
    • write-good for linting English prose
    • gh-pages for deploying to GitHub pages
    • CodeClimate configuration file and badge

NOTE: Take a look at gatsby-advanced-starter if you prefer building UI from scratch and/or only interested in fundamental features.

You can also visit my personal blog if you want to see a fully implemented blog based on this starter.

Article Screenshot Mobile Screenshot

Getting Started

Install this starter (assuming Gatsby is installed and updated) by running from your CLI:

gatsby new YourProjectName
npm install # or yarn install
npm run develop # or gatsby develop

Or you can fork the project, make your changes there and merge new features when needed.


git clone YourProjectName # Clone the project
cd YourProjectname
rm -rf .git # So you can have your own changes stored in VCS.
npm install # or yarn install
npm run develop # or gatsby develop


Edit the export object in data/SiteConfig:

module.exports = {
  blogPostDir: "sample-posts", // The name of directory that contains your posts.
  siteTitle: "Gatsby Material Starter", // Site title.
  siteTitleAlt: "GatsbyJS Material Starter", // Alternative site title for SEO.
  siteLogo: "/logos/logo-1024.png", // Logo used for SEO and manifest.
  siteUrl: "", // Domain of your website without pathPrefix.
  pathPrefix: "/gatsby-material-starter", // Prefixes all links. For cases when deployed to
  siteDescription: "A GatsbyJS stater with Material design in mind.", // Website description used for RSS feeds/meta description tag.
  siteRss: "/rss.xml", // Path to the RSS file.
  siteFBAppID: "1825356251115265", // FB Application ID for using app insights
  siteGATrackingID: "UA-47311644-4", // Tracking code ID for google analytics.
  disqusShortname: "https-vagr9k-github-io-gatsby-material-starter", // Disqus shortname.
  postDefaultCategoryID: "Tech", // Default category for posts.
  userName: "Material User", // Username to display in the author segment.
  userTwitter: "", // Optionally renders "Follow Me" in the UserInfo segment.
  userLocation: "North Pole, Earth", // User location to display in the author segment.
  userAvatar: "", // User avatar to display in the author segment.
    "Yeah, I like animals better than people sometimes... Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year. And the good thing about dogs... is they got different dogs for different people.", // User description to display in the author segment.
  // Links to social profiles/projects you want to display in the author segment/navigation bar.
  userLinks: [
      label: "GitHub",
      url: "",
      iconClassName: "fa fa-github"
      label: "Twitter",
      url: "",
      iconClassName: "fa fa-twitter"
      label: "Email",
      url: "",
      iconClassName: "fa fa-envelope"
  copyright: "Copyright © 2017. Material User" // Copyright string for the footer of the website and RSS feed.

You can also optionally set pathPrefix:

module.exports = {
  // Note: it must *not* have a trailing slash.
  pathPrefix: "/gatsby-material-starter" // Prefixes all links. For cases when deployed to

NOTE: user*, disqusShortname and copyright are optional and won't render if omitted.

WARNING: Make sure to edit static/robots.txt to include your domain for the sitemap!


Edit src/layouts/theme.scss to suit your needs. You can use Material color palette provided by React-MD.

@import "~react-md/src/scss/react-md";
$md-primary-color: $md-grey-400;
$md-secondary-color: $md-red-800;
$md-tertiary-color: $md-grey-300;


mdworld theme "Jackson"







No releases published


No packages published