\n\nGatsby theme for creating super fast, SEO optimized blog powered by [MDX](https://mdxjs.com/getting-started/gatsby) and [Material UI](https://material-ui.com/). See the [Live demo](https://gatsby-theme-blog-starter.netlify.com/)\n\n[Personal Tech Blog](https://atech.guide/)\n\n## Performance\n### Desktop (Home)\n\n
\n\n## ✨Features\nIt provides following functionality out of box\n- Fully optimized for Lighthouse audit\n- Responsive\n- Pagination for blog posts\n- Tags for browsing the content\n- Subscription box (Powered by Mailchimp)\n- Google Structured Data\n- Disqus React for commenting\n- Feed\n- Google Analytics \n- Sitemap\n\n## 🚀Getting Started\n\n### Install\nManually add to you site\n\n`npm install --save gatsby-theme-blog-starter`\n\n### Theme options\n\n| Key | Default value | Description |\n| ---------------- | ---------------- | --------------------------------------------------------------------------------------------------------- |\n| `basePath` | \"/\" | Root url for the blog |\n| `trackingId` | \"UA-11111XXX-1\" | Google Analytics Tracking ID |\n| `postsPath` | \"posts\" | Name of the directory from where the posts should be picked |\n| `imagesPath` | \"images\" | Name of the directory from where the images should be picked |\n| `postsPerPage` | \"2\" | Maximum number of posts displayed on each pagination page |\n| `mailchimpURL` | \"\" | Form `action` URL for MailChimp subscription form. If not provided, subscription box will not be displayed |\n\n### Example usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n plugins: [\n {\n resolve: \"gatsby-theme-blog-starter\",\n options: {\n basePath: \"/\",\n trackingId: \"UA-11111XXX-1\",\n postsPath: \"posts\",\n imagesPath: \"images\",\n postsPerPage: \"2\",\n mailchimpURL: \"\"\n },\n },\n ],\n}\n```\n### Additional configuration\nIn addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site's gatsby-config.js\n```\n// gatsby-config.js\nmodule.exports = {\n siteMetadata: {\n title: `Blog Title`,\n description: `Blog Description`,\n author: `Author Name`,\n twitterId: `@twitterHandle`,\n siteUrl: `site domain name`,\n genre: 'Genre', // Used for Google Structured Data\n keywords: [`Technology Blog`], // Used for SEO and Google Structured Data\n email: `admin@blog.com`, // Contact email Used for Google Structured Data\n social: [\n 'https://www.facebook.com/aTechGuide/' // Social link used in site schema for Google Structured Data\n ],\n contactSupport: 'https://www.site.com/support/', // Contact link used in site schema for Google Structured Data\n bingId: '', // Support for Bing \n menuLinks: [{name: 'Projects', link: '/page/1'}], // Adding Menu bar links\n footerLinks: [{name: 'Projects', link: '/page/1'}], // Adding footer links\n displayFooterMessage: true, // Enable footer message\n comments: 'true' // Enable disable comments\n },\n}\n```\n\n## Folder, Icon and Environment Variables\n- Create `posts` directory (name of this directory is as per options) and add posts into it\n- Create `images` directory (name of this directory is as per options) and images into it to be used by queries directly\n - Add icon under `images` by the name `icon.png` (name has to be icon)\n- Add .env.* providing `disqus shortname` as value for key `GATSBY_DISQUS_NAME` \n\n## 📝Theme\nTo override the theme of entire site. You may shadow the `theme.js` file under `example-site/src/gatsby-theme-blog-starter/theme.js`\n\n### Default Theme \n```\nimport {deepPurple, red, indigo, yellow, cyan, lightGreen} from '@material-ui/core/colors/';\n\nconst theme = {\n palette: {\n primary: deepPurple,\n secondary: red\n },\n typography: {\n fontSize: 16,\n h1 : {\n fontSize: \"3rem\",\n fontWeight: 500,\n color: deepPurple[700]\n }\n },\n button: {\n color: \"primary\",\n variant: \"contained\"\n },\n postGridItemPadding: '16px',\n headingColor: indigo,\n highlightOne: yellow,\n highlightTwo: cyan,\n highlightThree: lightGreen\n}\n\nexport default theme\n```\n\n## Header\n\nHeader is customizable with configurations in gatsby-config.js which looks like, \n\n```\nmenuLinks: [{name: 'Tags', link: '/tags/'}], // Array of top Navigation bar items. Make sure you have pages corresponding to the value of `link`\n```\n\nYou may also completely shadow the `header.js` inside `src/components`\n\n## Footer\n\nFooter is customizable with configurations in gatsby-config.js which looks like, \n\n```\nfooterLinks: [{name: 'About', link: '/about/'}, {name: 'Terms of Use', link: '/terms-of-use/'}, {name: 'Privacy Policy', link: '/privacy-policy/'}], //<- Make sure you have pages corresponding to the value of `link`\ndisplayFooterMessage: true, // <- This controls the display of \"Powered by Gatsby, Material UI and Netlify\"\n```\n\nYou may also completely shadow the `Footer.js` inside `src/components`\n\n## FrontMatter\nFrontmatter for pages powered by Mdx looks like\n\n```\n---\ntitle: SEO friendly Title which will be used in HTML Tag\ndescription: SEO friendly Description which will be used in <meta name=\"description\"> HTML Tag\npagetitle: Title of the Post\nsummary: Description of the post used in snippet in index page\ndate: Published Date\nupdate_date: Updated Date\ntags:\n - technology\nlabel:\n - tech\nslug: seo-friendly-url\npublished: true\nimage: ./path-to-image-used-in-featured-snippet-and-structured-snippet.png\n---\n\n```","readmeFilename":"README.md"}
![\"gatsby-theme-blog-starter](\"https://img.shields.io/badge/license-MIT-blue.svg\"){kind=icon}
\n \n \n ![\"Current](\"https://img.shields.io/npm/v/gatsby-theme-blog-starter.svg\")
\n \n \n ![\"Downloads](\"https://img.shields.io/npm/dm/gatsby-theme-blog-starter.svg?color=blue\")
\n \n \n ![\"Total](\"https://img.shields.io/npm/dt/gatsby-theme-blog-starter.svg?color=blue\")
\n \n ![\"PRs](\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\"){kind=icon}
\n \n ![\"Follow](\"https://img.shields.io/twitter/follow/atechguide.svg?label=Follow%20@atechguide\")
\n \n![\"Gatsby](\"https://gatsby-theme-blog-starter.netlify.com/desktop-home-100.png\")
\n \n![\"Gatsby](\"https://gatsby-theme-blog-starter.netlify.com/desktop-page-100.png\")
\n \n![\"Gatsby](\"https://gatsby-theme-blog-starter.netlify.com/mobile-home-100.png\")
\n \n![\"Gatsby](\"https://gatsby-theme-blog-starter.netlify.com/mobile-page-100.png\")
\n \n