@draftbox-co/gatsby-ghost-novela-theme
Version:
A Gatsby theme plugin for creating blogs from headless Ghost CMS.
170 lines (139 loc) • 6.62 kB
Markdown
[](https://draftbox.co)
# gatsby-ghost-novela-theme
A Gatsby theme plugin for creating blogs from headless Ghost CMS.
Turn your Ghost blog into a lightning fast static website. This Gatsby theme is a frontend replacement of the Ghost handlebars engine featuring Novela theme skin and functionality. All content is sourced from a headless Ghost CMS.
> This theme is being used at [Draftbox](https://draftbox.co). Get lightning fast, secure front-end for your WordPress or Ghost blog, in 5 minutes or less, without coding. For our fellow devs, we also provide code export feature.
## Demo
Play with the [Demo](https://ghost-novela-preview.draftbox.co/) to get a first impression.
## Features
- Novela theme by Narrative
- SEO optimized
- Fully responsive
- Gatsby images
- Styled 404 page
- RSS Feed
- AMP Pages
- Sitemap
- Contact Form
- Subscribe Form
- Social Sharing
- Composable and extensible
## Installation
> Head over to the [starter repo](https://github.com/draftbox-co/gatsby-ghost-novela-starter) to get up and running quickly!
If you want to add this blog theme to an existing site, follow these instructions:
1. Install the blog theme
```bash
yarn add @draftbox-co/gatsby-ghost-novela-theme
# or
npm install @draftbox-co/gatsby-ghost-novela-theme --save
```
2. Add the following configuration to your `gatsby-config.js` file
```js
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `@draftbox-co/gatsby-ghost-novela-theme`,
options: {
siteConfig: {
siteUrl: "https://ghost-novela-preview.draftbox.com",
postsPerPage: 12,
siteTitleMeta: "Built with Draftbox",
siteDescriptionMeta:
"Lightning fast, secure front-end for your WordPress or Ghost blog, without coding.",
shareImageWidth: 1000,
shareImageHeight: 523,
shortTitle: "Built with Draftbox",
siteIcon: "favicon.png",
backgroundColor: "#e9e9e9",
themeColor: "#15171A",
apiUrl: "https://ghost.theasdfghjkl.com",
header: {
navigation: [
{
label: "Home",
url: "https://ghost-novela-preview.draftbox.co/",
},
{
label: "Contact",
url: "https://ghost-novela-preview.draftbox.co/contact",
},
],
},
footer: {
copyright: "Built with Draftbox",
navigation: [
{
label: "Home",
url: "https://ghost-novela-preview.draftbox.co/",
},
{
label: "Sitemap",
url: "https://ghost-novela-preview.draftbox.co/sitemap.xml",
},
{
label: "RSS",
url: "https://ghost-novela-preview.draftbox.co/rss.xml",
},
{
label: "Contact",
url: "https://ghost-novela-preview.draftbox.co/contact",
},
{
label: "External Link",
url: "https://spectrum.chat/gatsby-js/themes?tab=posts",
},
],
},
subscribeWidget: {
title: "Subscribe to Built with Draftbox",
helpText: "Get the latest posts delivered right to your inbox.",
successMessage: "Thanks for subscribing to Built with Draftbox.",
},
socialLinks: {
twitter: "https://twitter.com/draftboxhq",
facebook: "https://facebook.com/",
instagram: "https://www.instagram.com/",
linkedin: "https://linkedin.com",
github: "https://github.com/draftbox-co",
},
contactWidget: {
title: "Contact Built with Draftbox",
successMessage: "We’ll get in touch with you soon.",
},
},
ghostConfig: {
development: {
apiUrl: "http://localhost:2368",
contentApiKey: "9fcfdb1e5ea5b472e2e5b92942",
},
production: {
apiUrl: "https://your-ghost-cms.com",
contentApiKey: "9fcfdb1e5ea5b472e2e5b92942",
},
},
},
},
],
};
```
3. Update siteConfig
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. Also make sure your `favicon.png` can be found in folder `static` of your working directory.
4. Ghost Content API Keys
Change the `apiUrl` value to the URL of your Ghost CMS site. Next, update the `contentApiKey` value to a key associated with the Ghost CMS site. A key can be provided by creating an integration within Ghost Admin. Navigate to Integrations and click "Add new integration". Name the integration appropriately and click create.
## Running
Start the development server. You now have a Gatsby site pulling content from headless Ghost.
```bash
gatsby develop
```
## Optimizing
You can disable the default Ghost Handlebars Theme front-end by enabling the `Make this site private` flag within your Ghost 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 source of truth for SEO.
## Authors
- Arun Priyadarshi ([@Gunnerforlife](https://github.com/Gunnerforlife)) – [Draftbox](https://draftbox.co)
- Keyur Raval ([@thandaanda](https://github.com/thandaanda)) – [Draftbox](https://draftbox.co)
- Shyam Lohar ([@shyamlohar](https://github.com/shyamlohar)) – [Draftbox](https://draftbox.co)
- Tanmay Desai ([@tanmaydesai89](https://github.com/tanmaydesai89)) – [Draftbox](https://draftbox.co)
## Contributions
PRs are welcome! Consider contributing to this project if you are missing feature that is also useful for others.
# Copyright & License
Copyright (c) 2020 [Draftbox](https://draftbox.co) - Released under the [MIT license](LICENSE).