gatsby-theme-blog-starter

    2.0.1 • Public • Published

    gatsby-theme-blog-starter

    gatsby-theme-blog-starter is released under the MIT license. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome! Follow @atechguide

    Gatsby theme for creating super fast, SEO optimized blog powered by MDX and Material UI. See the Live demo

    Personal Tech Blog

    Performance

    Desktop (Home)

    Gatsby Theme

    Desktop (Blog Page)

    Gatsby Theme

    Mobile (Home)

    Gatsby Theme

    Mobile (Blog Page)

    Gatsby Theme

    ✨Features

    It provides following functionality out of box

    • Fully optimized for Lighthouse audit
    • Responsive
    • Pagination for blog posts
    • Tags for browsing the content
    • Subscription box (Powered by Mailchimp)
    • Google Structured Data
    • Disqus React for commenting
    • Feed
    • Google Analytics
    • Sitemap

    🚀Getting Started

    Install

    Manually add to you site

    npm install --save gatsby-theme-blog-starter

    Theme options

    Key Default value Description
    basePath "/" Root url for the blog
    trackingId "UA-11111XXX-1" Google Analytics Tracking ID
    postsPath "posts" Name of the directory from where the posts should be picked
    imagesPath "images" Name of the directory from where the images should be picked
    postsPerPage "2" Maximum number of posts displayed on each pagination page
    mailchimpURL "" Form action URL for MailChimp subscription form. If not provided, subscription box will not be displayed

    Example usage

    // gatsby-config.js
    module.exports = {
      plugins: [
            {
          resolve: "gatsby-theme-blog-starter",
          options: {
            basePath: "/",
            trackingId: "UA-11111XXX-1",
            postsPath: "posts",
            imagesPath: "images",
            postsPerPage: "2",
            mailchimpURL: ""
          },
        },
      ],
    }

    Additional configuration

    In 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

    // gatsby-config.js
    module.exports = {
      siteMetadata: {
        title: `Blog Title`,
        description: `Blog Description`,
        author: `Author Name`,
        twitterId: `@twitterHandle`,
        siteUrl: `site domain name`,
        genre: 'Genre', // Used for Google Structured Data
        keywords: [`Technology Blog`], // Used for SEO and Google Structured Data
        email: `admin@blog.com`, // Contact email Used for Google Structured Data
        social: [
          'https://www.facebook.com/aTechGuide/'  // Social link used in site schema for Google Structured Data
        ],
        contactSupport: 'https://www.site.com/support/', // Contact link used in site schema for Google Structured Data
        bingId: '', // Support for Bing 
        menuLinks: [{name: 'Projects', link: '/page/1'}], // Adding Menu bar links
        footerLinks: [{name: 'Projects', link: '/page/1'}], // Adding footer links
        displayFooterMessage: true, // Enable footer message
        comments: 'true' // Enable disable comments
      },
    }
    

    Folder, Icon and Environment Variables

    • Create posts directory (name of this directory is as per options) and add posts into it
    • Create images directory (name of this directory is as per options) and images into it to be used by queries directly
      • Add icon under images by the name icon.png (name has to be icon)
    • Add .env.* providing disqus shortname as value for key GATSBY_DISQUS_NAME

    📝Theme

    To override the theme of entire site. You may shadow the theme.js file under example-site/src/gatsby-theme-blog-starter/theme.js

    Default Theme

    import {deepPurple, red, indigo, yellow, cyan, lightGreen} from '@material-ui/core/colors/';
    
    const theme = {
      palette: {
        primary: deepPurple,
        secondary: red
      },
      typography: {
        fontSize: 16,
        h1 : {
          fontSize: "3rem",
          fontWeight: 500,
          color: deepPurple[700]
        }
      },
      button: {
        color: "primary",
        variant: "contained"
      },
      postGridItemPadding: '16px',
      headingColor: indigo,
      highlightOne: yellow,
      highlightTwo: cyan,
      highlightThree: lightGreen
    }
    
    export default theme
    

    Header

    Header is customizable with configurations in gatsby-config.js which looks like,

    menuLinks: [{name: 'Tags', link: '/tags/'}], // Array of top Navigation bar items. Make sure you have pages corresponding to the value of `link`
    

    You may also completely shadow the header.js inside src/components

    Footer

    Footer is customizable with configurations in gatsby-config.js which looks like,

    footerLinks: [{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`
    displayFooterMessage: true, // <- This controls the display of "Powered by Gatsby, Material UI and Netlify"
    

    You may also completely shadow the Footer.js inside src/components

    FrontMatter

    Frontmatter for pages powered by Mdx looks like

    ---
    title: SEO friendly Title which will be used in <title> HTML Tag
    description: SEO friendly Description which will be used in <meta name="description"> HTML Tag
    pagetitle: Title of the Post
    summary: Description of the post used in snippet in index page
    date: Published Date
    update_date: Updated Date
    tags:
      - technology
    label:
      - tech
    slug: seo-friendly-url
    published: true
    image: ./path-to-image-used-in-featured-snippet-and-structured-snippet.png
    ---
    
    

    Install

    npm i gatsby-theme-blog-starter

    DownloadsWeekly Downloads

    203

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    79.3 kB

    Total Files

    41

    Last publish

    Collaborators

    • kamranalinitb