{"id":18885386,"url":"https://github.com/atechguide/gatsby-theme-blog-starter","last_synced_at":"2025-04-14T21:30:57.482Z","repository":{"id":57156694,"uuid":"196234743","full_name":"aTechGuide/gatsby-theme-blog-starter","owner":"aTechGuide","description":"Gatsby Blog theme powered by MDX and Material UI","archived":false,"fork":false,"pushed_at":"2023-05-06T06:31:38.000Z","size":5010,"stargazers_count":12,"open_issues_count":4,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T03:42:58.775Z","etag":null,"topics":["gatsby","material-ui","netlify-deployment","open-source"],"latest_commit_sha":null,"homepage":"https://gatsby-theme-blog-starter.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aTechGuide.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-10T15:53:19.000Z","updated_at":"2023-05-12T16:55:30.000Z","dependencies_parsed_at":"2024-06-21T20:24:19.120Z","dependency_job_id":"501e1c31-1e4d-4de3-94aa-319888ea7835","html_url":"https://github.com/aTechGuide/gatsby-theme-blog-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aTechGuide%2Fgatsby-theme-blog-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aTechGuide%2Fgatsby-theme-blog-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aTechGuide%2Fgatsby-theme-blog-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aTechGuide%2Fgatsby-theme-blog-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aTechGuide","download_url":"https://codeload.github.com/aTechGuide/gatsby-theme-blog-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223644905,"owners_count":17178819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","material-ui","netlify-deployment","open-source"],"created_at":"2024-11-08T07:18:19.784Z","updated_at":"2024-11-08T07:18:20.370Z","avatar_url":"https://github.com/aTechGuide.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-theme-blog-starter\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/aTechGuide/gatsby-theme-blog-starter/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"gatsby-theme-blog-starter is released under the MIT license.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/gatsby-theme-blog-starter\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/gatsby-theme-blog-starter.svg\" alt=\"Current npm package version.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/gatsby-theme-blog-starter?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/gatsby-theme-blog-starter.svg?color=blue\" alt=\"Downloads per month on npm.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/gatsby-theme-blog-starter?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/gatsby-theme-blog-starter.svg?color=blue\" alt=\"Total downloads on npm.\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome!\" /\u003e\n  \u003ca href=\"https://twitter.com/intent/follow?screen_name=atechguide\"\u003e\n      \u003cimg src=\"https://img.shields.io/twitter/follow/atechguide.svg?label=Follow%20@atechguide\" alt=\"Follow @atechguide\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\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\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://atech.guide\"\u003e\n    \u003cimg alt=\"Gatsby Theme\" src=\"https://gatsby-theme-blog-starter.netlify.com/desktop-home-100.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Desktop (Blog Page)\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://atech.guide\"\u003e\n    \u003cimg alt=\"Gatsby Theme\" src=\"https://gatsby-theme-blog-starter.netlify.com/desktop-page-100.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Mobile (Home)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://atech.guide\"\u003e\n    \u003cimg alt=\"Gatsby Theme\" src=\"https://gatsby-theme-blog-starter.netlify.com/mobile-home-100.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Mobile (Blog Page)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://atech.guide\"\u003e\n    \u003cimg alt=\"Gatsby Theme\" src=\"https://gatsby-theme-blog-starter.netlify.com/mobile-page-100.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\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/'}], //\u003c- Make sure you have pages corresponding to the value of `link`\ndisplayFooterMessage: true, // \u003c- 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 \u003ctitle\u003e HTML Tag\ndescription: SEO friendly Description which will be used in \u003cmeta name=\"description\"\u003e 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```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatechguide%2Fgatsby-theme-blog-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatechguide%2Fgatsby-theme-blog-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatechguide%2Fgatsby-theme-blog-starter/lists"}