gatsby-theme-ghost-casper
Ghost Casper theme for Gatsby blog.
Usage
- Install the theme using
npm
oryarn
npm i --save gatsby react react-dom gatsby-theme-ghost-casper
or
yarn add gatsby react react-dom gatsby-theme-ghost-casper
- Create the following project structure for your website.
your-awesome-website
├── src
│ ├── assets
│ │ ├── featured-image.jpg
│ │ └── icon.png
│ ├── data
│ │ ├── authors.yml
│ │ ├── navigation.yml
│ │ └── tags.yml
│ ├── gatsby-theme-ghost-casper
│ │ ├── assets
│ │ │ └── logo.png
│ │ ├── src
│ │ └── style
│ │ └── override.css
│ ├── pages
│ │ ├── blog
│ │ │ ├── your-awesome-blog-post-title
│ │ │ │ ├── featured-image.jpg
│ │ │ │ └── index.md
│ │ └── about.js
├── static
│ └── CNAME
├── gatsby-browser.js
├── gatsby-config.js
├── package.json
└── README.MD
- In the
gatsby-config.js
file add the following changes
moduleexports = siteMetadata: title: '' // Site Title author: '' // Author of the website description: '' // Description for the website siteUrl: 'https://example.com' // Base URL of the website (No trailing slash) social: // Social URLs of the website. Will be used to show in footer if provided twitter: '' facebook: '' instagram: '' github: '' config: postsPerPage: 10 // Number of posts to show per page disqus: '' // Disqus username. If provided, disqus comments section will be added on each posts page plugins: resolve: 'gatsby-theme-ghost-casper' options: title: 'Your Site Title' // Required: used for the title of RSS feed pathPrefix: '' // path prefix for the website URL // Other plugins comes here ;
- Add the following content in
src/data/authors.yml
file to add the author information.
- id: username # unique username for the author. This will be used in the URL for the author page name: Name # Name of the author bio: Bio # Bio of the author location: Location # Location of the author website: https://authorswebsite.com # Website of the author twitter: twitter_username facebook: faceboon_username profileImage: https://avatars0.githubusercontent.com/u/AUTHOR # URL containing the author profile Image coverImage: # Cover Image to show in authors page
- The links shown in the header can be customized by adding them in
src/data/navigation.yml
file
- label: Home url: / - label: About url: /about
- The theme supports creating blog posts using markdown files. You can start adding your first page by creating a file at
src/pages/<YOUR-AWESOME-PATH>/index.md
with the following content.
--- title: Your Awesome Title <!-- Title of the post -->date: '2019-07-07' <!-- Date of the post in which it is published -->tags: ['tag1', 'tag2'] <!-- A new page will be created for each tag listing all the posts associated with that tags -->author: username <!-- id of the author that we defined in authors.yaml file -->featuredImage: ./welcome.jpg <!-- relative path of the image that used to show as featured Image -->draft: false <!-- Set it as true to skip this page during the production build. --> --- Your Awesome Blog Content
- To set sitewide featured image, place a file named
featured-image.jpeg
and the theme will pick it up. - To change the site logo, place your logo file as PNG named as
logo.png
in thesrc/gatsby-theme-ghost-casper/assets/
directory. - Now run
npm run develop
oryarn run develop
to start development. Happy Blogging. 😇
Example Site
For detailed usage of gatsby themes, refer themes documentation of Gatsby.
Copyright & License
Copyright (c) 2013-2019 Ghost Foundation / Sasivarnan R - Released under the MIT license.