Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Theme Casper

Demo: https://gatsby-casper-theme.netlify.com/

This is a Gatsby theme that, when installed, creates a static blog. A port of Casper v2 a theme from Ghost for GatsbyJS using TypeScript. This repo and theme was based on the gatsby starter theme gatsby-casper.

🚀 Quick start

  1. Create a Gatsby site

    Use the Gatsby CLI to create a new site

    gatsby new my-bog
  2. Install theme

    Navigate into your new site’s directory and start it up.

    cd my-blog/
    npm install gatsby-theme-casper
  3. Configure gatsby theme

    edit gatsby-config.js

    module.exports = {
      // add plugin gatsby-theme-casper
      plugins: ['gatsby-theme-casper'],
    
      // setup your siteMetadata, further described below
      siteMetadata: {
        title: 'Ghost',
        description: 'The professional publishing platform',
        coverImage: 'img/blog-cover.jpg',
        logo: 'img/ghost-logo.png',
        lang: 'en',
        siteUrl: 'https://gatsby-casper.netlify.com',
        facebook: 'https://www.facebook.com/ghost',
        twitter: 'https://twitter.com/tryghost',
        showSubscribe: true,
        mailchimpAction:
          'https://twitter.us19.list-manage.com/subscribe/post?u=a89b6987ac248c81b0b7f3a0f&id=7d777b7d75',
        mailchimpName: 'b_a89b6987ac248c81b0b7f3a0f_7d777b7d75',
        mailchimpEmailFieldName: 'MERGE0',
        googleSiteVerification: 'GoogleCode',
        footer: 'is based on Gatsby Casper',
        postsPerPage: 6,
      },
    }
  4. Create content directory

    Create a content directory, this will be used to store your markdown blog.

    Create a author.yaml

    - id: Ghost
      # relative path to image
      avatar: avatars/ghost.png
      bio: The professional publishing platform
      twitter: TryGhost
      facebook: ghost
      website: https://ghost.org/
      location: On a plane
      # relative path to profile image for author
      profile_image: avatars/ghost.png

    Create a tag.yaml to describe your tags (optional)

    - id: speeches
      description: Some of the greatest words ever spoken.
      image: img/speeches-cover.jpg

    Create a blog post

    ---
    layout: post
    title: Github Source
    image: avatars/ghost.png
    author: Ghost
    date: 2019-03-10T10:00:00.000Z
    draft: false
    tags:
      - Source
    ---
    
    my blog post content

    Create a content/img directory with the following files blog-cover.jpg used on the home page ghost-logo.png used as the logo on the homepage

  5. Start development

    start it up

    gatsby develop

Configuration

module.exports = {
  siteMetadata: {
    title: 'Ghost',
    description: 'The professional publishing platform',
    coverImage: 'img/blog-cover.jpg',
    logo: 'img/ghost-logo.png',
    /**
     * Specifying a valid BCP 47 language helps screen readers announce text properly.
     * See: https://dequeuniversity.com/rules/axe/2.2/valid-lang
     */
    lang: 'en',
    /**
     * blog full path, no ending slash!
     */
    siteUrl: 'https://gatsby-casper.netlify.com',
    /**
     * full url, no username, optional
     */
    facebook: 'https://www.facebook.com/ghost',
    /**
     * full url, no username, optional
     */
    twitter: 'https://twitter.com/tryghost'
    /**
     * hide or show all email subscribe boxes
     */
    showSubscribe: true
    /**
     * create a list on mailchimp and then create an embeddable signup form. this is the form action
     */
    mailchimpAction: 'https://twitter.us19.list-manage.com/subscribe/post?u=a89b6987ac248c81b0b7f3a0f&id=7d777b7d75',
    /**
     * this is the hidden input field name
     */
    mailchimpName: 'b_a89b6987ac248c81b0b7f3a0f_7d777b7d75',
    /**
     * name and id of the mailchimp email field
     */
    mailchimpEmailFieldName: 'MERGE0',
    /**
    /**
     * Meta tag for Google Webmaster Tools
     */
    googleSiteVerification: 'GoogleCode',
    /**
    /**
     * Appears alongside the footer, after the credits
     */
    footer: 'is based on Gatsby Casper',
    /**
     * adjust posts per page in pagination
     */
    postsPerPage: 6,
  },
}

Progress

  • emotion / component styles
  • home page
  • tag page
  • author page
  • blog page
    • subscribe form - using mailchimp
    • full width images in markdown? - not sure if possible
    • multiple post authors
    • floating reading progress bar
  • 404 page
  • subscribe modal/overlay
  • rss feed
  • polish ✨
    • meta tags
    • page titles
    • pagination
© 2023 Gatsby, Inc.