Gatsby Casper theme with added features

This code base closely tracks the latest commits at gatsby-casper, with my own customised flavours.

Changelog

• [x] Fixed Subscribe button styling
• [x] Added Image credit element in post.tsx
• [x] Added Github comments

gatsby-casper

Demo: https://gatsby-casper.netlify.app

This is a static blog generator and starter gatsby repo. A port of Casper v3 a theme from Ghost for GatsbyJS using TypeScript.

Getting Started

Clone this repo.

git clone https://github.com/scttcper/gatsby-casper.git --depth=1

Remove .git folder and setup a new one

rm -rf .git && git init

Edit website-config.ts with your website settings. Either disable subscribe or setup a mailchimp list and add the form action and hidden field input name.

Now push to whatever repo you want!

Progress

• [x] emotion / component styles
• [x] home page
• [x] tag page
• [x] author page
• [x] blog page
  • [x] subscribe form - using mailchimp
  • [ ] full width images in markdown? - not sure if possible
  • [x] multiple post authors
• [x] 404 page
• [x] subscribe modal/overlay
• [x] rss feed (on production build)
• [ ] polish ✨
  • [x] meta tags
  • [x] page titles
  • [ ] pagination

Deploy to Netlify

How to configure Google Analytics

Edit gatsby-config.js and add your tracking ID

{
    resolve: `gatsby-plugin-google-analytics`,
    options: {
      // Here goes your tracking ID
      trackingId: 'UA-XXXX-Y',
      // Puts tracking script in the head instead of the body
      head: true,
      // IP anonymization for GDPR compliance
      anonymize: true,
      // Disable analytics for users with `Do Not Track` enabled
      respectDNT: true,
      // Avoids sending pageview hits from custom paths
      exclude: ['/preview/**'],
      // Specifies what percentage of users should be tracked
      sampleRate: 100,
      // Determines how often site speed tracking beacons will be sent
      siteSpeedSampleRate: 10,
    },
},

How to edit your site title and description

Edit gatsby-config.js section siteMetadata

 siteMetadata: {
    title: 'My awesome site name',
    description: 'This is a description for my site',
    siteUrl: 'https://mysite.com', // full path to blog - no ending slash
  },

How to adjust pagination

In gatsby-node.js, edit the postsPerPage constant. The default value is six posts per page.