Git Product home page Git Product logo

gatsby-theme-ghost's Introduction

Ghost Gatsby Theme

gatsby-theme-ghost is released under the MIT license. Current npm package version. PRs welcome! Follow @akanshgulati Netlify Status


Minimalistic Gatsby theme, mobile and SEO friendly and supports author, tag and static pages

Ghost Chrome mockup

Live Preview

๐Ÿ“ฆ Installation

Gatsby

gatsby new gatsby-blog akanshgulati/gatsby-theme-ghost
This will generate a new site (with the folder name "gatsby-blog") that pre-configures use of the theme including example content.

๐Ÿ’ฅ Features

  • Code Snippet Support - Integration with remark-prismjs for beautifying code snippets on posts
  • 100% performance optimisation - It has 98+ for both mobile and desktop as per Google lighthouse benchmarks
    • Responsive lazy loading of images for desktop and mobile
    • Preloading of important resource to improve Critical Rendering Path of page load
    • Retina-rich images for iOS devices to prevent any blur images.
    • Async loading of non-essential scripts like Google Analytics, etc.
  • RSS Generator - Creates RSS for posts to be easily accessible by any RSS reader
  • SEO Friendly - SEO score of the posts and entire website is 98+
    • Sitemap - Generates sitemap for the posts, author page, tag page and static pages.
    • Structured data - Contains JSON-LD format information about the content
    • Alt info - All the images itself has alt attribute as per title of the image.
    • Title info - Links has title attributes for better understanding of link
  • Social Ready - All essential meta-tags added for sharing posts and website over Facebook, Twitter, Instagram, etc. websites
  • Analytics - Integration of Google Analytics for analyses purposes.
  • Mobile Friendly - Posts and rest of the pages are mobile friendly to be easily readable.
  • Accessibility - Scores 98+ for the posts and home page.
  • Deploy Ready - Contains configuration netlify.toml for deploying on Netlify directly.
  • Customisations - Easy to customise home page, posts and other elements of website.
  • Comment System - Integration of the Disqus commenting system

๐Ÿ‘จโ€๐Ÿ’ป Development

yarn dev
  • Runs local website with hot reloading by default at 8000 port
  • Runs GraphQL for debugging at localhost:8000/__graphql path

โš™๏ธ Configuration

Change the website configuration at utils/siteConfig.js file.

  1. Add Disqus short name for enabling comments on posts
  2. Update the navigation links shown in header of website
  3. Update username of the Twitter and Facebook for icons shown in header of website
module.exports = {  
  siteUrl: `https://gatsby-theme-ghost.netlify.com`, // Site domain. Do not include a trailing slash!  
  
  postsPerPage: 12, // Number of posts shown on paginated pages (changes this requires sometimes to delete the cache)  
  
  siteTitleMeta: `Gatsby Theme Ghost`, // This allows an alternative site title for meta data for pages.  
  siteDescriptionMeta: `Minimalistic Gatsby theme for blogs`, // This allows an alternative site description for meta data for pages.  
  siteTwitterHandle: `@akanshgulati`,  
  siteFacebookHandle: `akanshgulati`,  
  language: `en`
  // ...

๐Ÿ“ Adding Content

New Post

  1. Create a directory for every post under src/posts directory, having a markdown file (.md extension)
  2. Add following meta information:
    • title*: The title of the post
    • date*: The creation date of the markdown file
    • slug*: Url of the post
    • draft*: Accepts true/false as value for visibility of the post
    • tags*: Add tag_id of different tags in yaml format
    • author*: Add author_id of author
    • comment*: To show comment on the page bottom
    • feature_image*: The URL of the image shown at the top of the article
    • created_at*: Date of the creation of the post (same as date above)
    • published_at*: The date of the publishing of the post
    • updated_at*: The date of the updating of the post
      1. Add all images and other media content in the same directory as markdown file.

Note: Create all tags and authors markdown files before adding it in post.

New Tag

  1. Create a markdown file by the new tag name under src/tags directory.
  2. Add following meta information:
    • tag_id*: The id which is mapped with post's tags
    • name*: Name as shown on posts if added
    • slug*: Url of the tag page
    • description: Description shown on the tag pages before the list of posts

New Author

  1. Create a markdown file by the new tag name under src/authors directory.
  2. Add following meta information:
    • author_id*: The id which is mapped with post's author name
    • name*: Name as shown on posts if added
    • slug*: Url of the author page
    • profile_image*: Url of the author image for each post on home page and author page.
    • description: Description shown on the author pages before the list of posts
    • twitter: Username of the Twitter for author page
    • facebook: Username of the Facebook for author page
    • website: URL of the personal website of the author

New Page

  1. Create a markdown file by the new tag name under src/pages directory.
  2. Add following meta information:
    • title*: The title shown at the top of the page
    • date*: Date of creation of the page
    • draft*: Decides if the page is to be shown to public, can have true/false value
    • slug*: URL of the page
    • created_at*: Date of the creation of the page (same as date above)
    • published_at*: The date of the publishing of the page
    • updated_at*: The date of the updating of the page
  3. Add body content of the page after the meta information

*Required


๐Ÿ”ญ Directory Structure

.    
โ”œโ”€โ”€ plugins    
โ”‚   โ””โ”€โ”€ gatsby-plugin-ghost-manifest    
โ”œโ”€โ”€ public    
โ”œโ”€โ”€ src  
โ”‚   โ”œโ”€โ”€ authors  
โ”‚   โ”‚   โ”œโ”€โ”€ akansh.md  
โ”‚   โ”œโ”€โ”€ pages    
โ”‚   โ”‚   โ””โ”€โ”€ about    
โ”‚   โ”œโ”€โ”€ posts    
โ”‚   โ”‚   โ”œโ”€โ”€ best-practises-to-select-cdn  
โ”‚   โ”‚   โ”œโ”€โ”€ ...    
โ”‚   โ”‚   โ””โ”€โ”€ ...   
โ”‚   โ”œโ”€โ”€ tags  
โ”‚   โ”‚   โ”œโ”€โ”€ javascript.md  
โ”‚   โ”œโ”€โ”€ components    
โ”‚   โ”‚   โ””โ”€โ”€ common    
โ”‚   โ”‚       โ””โ”€โ”€ meta  
โ”‚   โ”œโ”€โ”€ styles   
โ”‚   โ”œโ”€โ”€ templates    
โ”‚   โ””โ”€โ”€ utils    
โ”‚       โ””โ”€โ”€ rss    
โ””โ”€โ”€ static    
    
  • plugins: Contains custom plugins created for Gatsby
  • public: Contains build files accessible over web
  • src: Contains React components as well as content of blog as followed
    • authors: Has markdown files for each author specifying social links, image, name, etc.
    • pages: Has directory for each static page in markdown format
    • posts: Has directory for each blog post having images and markdown format post content
    • tags: Has file for each tag having description, slug, featured image, etc. information
    • components: Has React components for different sections of the website
    • styles: Has CSS(stylesheet) file for the blog
    • templates: Has template in React for post, static page, author page and tag page.
    • utils: Has RSS generator script and site configuration.
  • static: All the content is copied directly in the public folder on build, stores website favicon, robots.txt file and other files required at root of publicly accessible directory.

โ˜‘๏ธ Todo

  • Previous and Next post widget
  • Add subscription widget
  • Netlify CMS integration

๐Ÿ’ช Maintainer

Akansh Gulati

gatsby-theme-ghost's People

Contributors

akansh-ixigo avatar akanshgulati avatar yunkii avatar

Stargazers

Hadj H. avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.