npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-starter-try-ghost

v2.0.0

Published

Turn your Ghost blog into a flaring fast static site with Gatsby

Downloads

49

Readme

Released under MIT license. gatsby-starter-try-ghost npm package version.

A Gatsby starter for creating blogs from headless Ghost CMS.

Turn your Ghost blog into a flaring fast static website. This Gatsby theme is a front-end replacement of the Ghost Handlebars engine featuring an enhanced Ghost Casper look and feel. All content is sourced from a headless Ghost CMS.

 

🔥 Variants

Favor Next.js over Gatsby? Head over to next-cms-ghost!

 

🎓 Tutorials

Check out the Tutorials for practical guides on using this project.

 

🎉 Demo

Play with the Demo to get a first impression.

gatsby-starter-try-ghost

 

✨ Features

  • Ghost Casper look and feel
  • Images with lazy-loading and blur-up effect 🚀 🆕
  • Infinite Scroll ✨
  • Featured posts pinned on top 🆕
  • Sticky navigation headers
  • Hover on author avatar
  • Styled 404 page
  • SEO optimized
  • Fully responsive
  • Advanced routing 🆕
  • Composable and extensible
  • Incremental build enabled 🚀 🆕

 

📦 Included Plugins

The following plugins have been included for convenience:

| Name | Version | Description | | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | | gatsby-theme-ghost-dark-mode | version | Dark mode toggle 🌗 | | gatsby-rehype-ghost-links | version | Rewrite CMS links from absolute to relative | | gatsby-rehype-prismjs | version | Syntax highlighting with PrismJS | | gatsby-theme-ghost-members 🆕 | version | Member Subscriptions |

If you don't need them, you can take them out in gatsby-config.js and package.json which may save you some time during the build process.

 

🎁 More Plugins

Additional features can be integrated by installing Gatsby themes or plugins. The following plugins have been tested to work with gatsby-starter-try-ghost:

| Name | Version | Description | | -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | gatsby-rehype-inline-images 🆕 | version | Lazy-loading inline images with blur-up | | gatsby-theme-ghost-contact | version | Contact page | | gatsby-theme-ghost-commento | version | Commenting system with Commento | | gatsby-theme-ghost-toc 🆕 | version | Table of Contents | | gatsby-plugin-ackee-tracker | version | Site tracking with Ackee | | gatsby-plugin-google-analytics | version | Site tracking with Google Analytics |

 

🏁 Getting Started

  1. Install this starter by running

    gatsby new try-ghost https://github.com/styxlab/gatsby-starter-try-ghost
  2. Change directory

    cd try-ghost
  3. Run

    yarn develop

    and visit your site at http://localhost:8000.

 

💡 Configure

//siteConfig.js
module.exports = {
    // Do not include a trailing slash!
    siteUrl: `https://your-blog.com`,

    // Maximum number of post shown per page
    // Infinite Scroll: Initial chunk of posts, subsequent posts are fetched one by one
    postsPerPage: 3,

    // This allows an alternative site title for meta data for pages.
    siteTitleMeta: `Gatsby Starter Ghost CMS`,

    // This allows an site description for meta data for pages.
    siteDescriptionMeta: `Turn your Ghost blog into a flaring fast static site with Gatsby`,

    // Used for App and Offline manifest e.g. Mobile Home Screen
    shortTitle: `Ghost`,
    siteIcon: `favicon.png`,
    backgroundColor: `#e9e9e9`,
    themeColor: `#15171A`,

    // Include Gatsby images for lazy loading and image optimizations (default: true)
    gatsbyImages: true,

    // Overwrite navigation menu (default: []), label is case sensitive
    // overwriteGhostNavigation: [{ label: `Home`, url: `/` }],
};

In the configuration shown above, the most important fields to be changed are siteUrl, siteTitleMeta and siteDescriptionMeta. Update at least those to fit your needs.

 

🔑 Ghost Content API keys

All content is sourced from a Ghost CMS. By default, content is fetched from the demo location at https://cms.gotsby.org. Surely you want to source your own content. There are two ways to make your content keys available. Choose the method according to your build scenario.

Building with cloud providers

If you build your project with a cloud provider (e.g. Gatsby, Netlify, Vercel), the best option is to provide the keys with environment variables:

| Key | Value (example) | | --------------------- | -------------------------- | | GHOST_API_URL | http://localhost:2368 | | GHOST_CONTENT_API_KEY | 9fccdb0e4ea5b572e2e5b92942 |

The place where you can define them depends on the provider, but you usually find the option under the site settings. This avoids publishing keys in a public repository and is most secure.

Building locally

If you build locally or on a private network where the build directory is not accessible to the world, you can safely add a new .ghost.json file in your base directory with the following JSON structure:


    {
        "development": {
            "apiUrl": "http://localhost:2368",
            "contentApiKey": "9fccdb0e4ea5b572e2e5b92942"
        },
        "production": {
            "apiUrl": "http://localhost:2368",
            "contentApiKey": "9fccdb0e4ea5b572e2e5b92942"
        }
    }

This file is part of .gitignore to avoid accidentally publishing it to your public repository. Change the apiUrl and contentApiKey to match your own Ghost CMS Content API keys.

 

🤯 Ensure headless mode of Ghost CMS

For best SEO results it is strongly recommended to disable the default Ghost Handlebars theme front-end by selecting the Make this site private flag within your Ghost admin settings. This enables password protection in front of the Ghost install and sets <meta name="robots" content="noindex" /> so your Gatsby front-end becomes the authoritative source for search engines.

 

💫 Deploy

Deploy to Netlify

Deploy with Vercel

 

🔧 Update

It is recommended to install npm-upgrade with sudo npm install npm-upgrade -g. Change into the base directory and update all packages with:

    npm-upgrade

You will be prompted to update all packages within your package.json file. Next, download the new packages:

    yarn
    yarn clean

The update process is now complete and you can start a new build with yarn build (or yarn develop).

 

💣 Reporting issues

Please report all bugs and issues at gatsby-theme-try-ghost/issues as all development is happening there.

 

🧐 Disclaimer

This project is not affiliated with Gatsby or Ghost.

 

Copyright & License

Copyright (c) 2020 styxlab - Released under the MIT license.