{"componentChunkName":"component---src-templates-post-js","path":"/about/","webpackCompilationHash":"37dd0aeccb0e80bb38c0","result":{"data":{"ghostPost":{"id":"Ghost__Post__5c360e513ad4e300bf4cbeb0","title":"About Ghost + Gatsby","slug":"about","featured":false,"feature_image":"https://gatsby.ghost.io/content/images/2019/01/ghost-headless-feature-image.png","excerpt":"Build an API driven static-site with Gatsby.js and use Ghost as a completely decoupled headless CMS.  Read more about how it works and how to use this starter theme here!","custom_excerpt":"Build an API driven static-site with Gatsby.js and use Ghost as a completely decoupled headless CMS.  Read more about how it works and how to use this starter theme here!","created_at_pretty":"09 January, 2019","published_at_pretty":"09 January, 2019","updated_at_pretty":"09 January, 2019","created_at":"2019-01-09T15:08:01.000+00:00","published_at":"2019-01-09T15:08:14.000+00:00","updated_at":"2019-01-09T17:43:09.000+00:00","meta_title":"Using Gatsby + Ghost","meta_description":"Use Ghost as a completely decoupled headless CMS and bring your own front-end written in Gatsby.js.","og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Ghost","slug":"ghost","bio":"You can delete this user to remove all the welcome posts","profile_image":"https://static.ghost.org/v2.0.0/images/ghost.png","twitter":"@tryghost","facebook":"ghost","website":"https://ghost.org"}],"primary_author":{"name":"Ghost","slug":"ghost","bio":"You can delete this user to remove all the welcome posts","profile_image":"https://static.ghost.org/v2.0.0/images/ghost.png","twitter":"@tryghost","facebook":"ghost","website":"https://ghost.org"},"primary_tag":null,"tags":[],"plaintext":"Use Ghost as a completely decoupled headless CMS and bring your own front-end\nwritten in Gatsby.js [https://gatsbyjs.org]\n\nBuild an API driven static-site\nThere has been a lot of progress around static site generators, front end\nframeworks and API-centric infrastructure in recent years, which has generated\nsome very cool products, like Gatsby. Since Ghost allows you to completely\nreplace its default Handlebars theme layer in favour of a front-end framework,\nyou can use Gatsby to build your site statically from the Ghost API.\n\nThe headless-cms revolution\nUsing a static site generator usually involves storing Markdown files locally in\nthe code repository. This would involve using a code editor to write content and\na GIT workflow to publish - which works fine for small sites or developers.\nHowever, it's not ideal for professional publishers that need to scale. This is\nwhere a headless CMS comes in!\n\nInstead, you can use Ghost for authoring, and then build out your front-end in\nGatsby to pull content from the Ghost API. This provides several benefits for\npublishers: \n\n * Developers can use their preferred stack\n * Writers have their preferred editor & content management\n * Performance is the maximum possible \n * Security is the maximum possible \n * Your site will be extremely scalable \n\nBuilding sites in this way has become known as the JAMstack\n[https://jamstack.org]  - (as in JavaScript, APIs, Markup). When you look at the\nbigger picture of the content mesh\n[https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh/], it\nreally starts to feel like an inevitable future for building websites. \n\nOfficial Gatsby.js Source Plugin + Starter\nWe rebuilt our entire Ghost Docs [https://docs.ghost.org]  site with a front-end\nwritten in Gatsby.js [https://gatsbyjs.org]  - which is a great example of what\ncan be achieved with Ghost and Gatsby in the wild. We also shipped a few things\nto help others build their own sites using the same stack: \n\n⚡ gatsby-source-ghost [https://github.com/tryghost/gatsby-source-ghost]  plugin\nA straightforward Gatsby source plugin which wraps the Ghost API and makes it\ncompatible with Gatsby and GraphQL, so it's quick and easy to load all your\nGhost data into any Gatsby project.\n\n⚡ gatsby-starter-ghost [https://github.com/tryghost/gatsby-starter-ghost]  \nAn official Gatsby starter repository\n[https://github.com/tryghost/gatsby-starter-ghost]  which is pre-configured to\nget content from Ghost and output it in a clean, blog-style design. The fastest\nway to get up and running with Gatsby and Ghost is to fork this repository, and\ncheck out our Gatsby docs [https://docs.ghost.org/api/gatsby/].\n\nOfficial Netlify Support\nDeploying a static site with Gatsby and Ghost should be easy - so we've\npartnered with Netlify, which we also use for Ghost Docs: \n\n⚡Netlify integration for Ghost [https://docs.ghost.org/integrations/netlify/]  \nThe official integration guide for Netlify  explains how to set up outgoing\nwebhooks in Ghost to trigger a site rebuild on Netlify. This means that any time\nyou publish, update or remove any content in Ghost, the front end will update.\n\nFuture-proof publishing\nConverging disparate technologies under a single front-end centralises otherwise\ndecentralised services in a way which caters predominantly to the needs of the\nsite owner, rather than the platform and fosters flexibility and scalability. \n\n\n\nNo more platform-specific plugins and extensions. Just one front-end, and many\nAPIs; all connected together and served as a single site or application with\nGatsby!","html":"<p>Use Ghost as a completely decoupled headless CMS and bring your own front-end written in <a href=\"https://gatsbyjs.org\">Gatsby.js</a></p><h2 id=\"build-an-api-driven-static-site\">Build an API driven static-site</h2><p>There has been a lot of progress around static site generators, front end frameworks and API-centric infrastructure in recent years, which has generated some very cool products, like Gatsby. Since Ghost allows you to completely replace its default Handlebars theme layer in favour of a front-end framework, you can use Gatsby to build your site statically from the Ghost API.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://gatsby.ghost.io/content/images/2019/01/headless-ghost.png\" class=\"kg-image\"></figure><h2 id=\"the-headless-cms-revolution\">The headless-cms revolution</h2><p>Using a static site generator usually involves storing Markdown files locally in the code repository. This would involve using a code editor to write content and a GIT workflow to publish - which works fine for small sites or developers. However, it's not ideal for professional publishers that need to scale. This is where a headless CMS comes in!</p><p>Instead, you can use Ghost for authoring, and then build out your front-end in Gatsby to pull content from the Ghost API. This provides several benefits for publishers: </p><ul><li>Developers can use their preferred stack</li><li>Writers have their preferred editor &amp; content management</li><li>Performance is the maximum possible </li><li>Security is the maximum possible </li><li>Your site will be extremely scalable </li></ul><p>Building sites in this way has become known as the <a href=\"https://jamstack.org\">JAMstack</a> - (as in <strong>J</strong>avaScript, <strong>A</strong>PIs, <strong>M</strong>arkup). When you look at the bigger picture of <a href=\"https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh/\">the content mesh</a>, it really starts to feel like an inevitable future for building websites. </p><h2 id=\"official-gatsby-js-source-plugin-starter\">Official Gatsby.js Source Plugin + Starter</h2><p>We rebuilt our entire <a href=\"https://docs.ghost.org\">Ghost Docs</a> site with a front-end written in <a href=\"https://gatsbyjs.org\">Gatsby.js</a> - which is a great example of what can be achieved with Ghost and Gatsby in the wild. We also shipped a few things to help others build their own sites using the same stack: </p><h3 id=\"-gatsby-source-ghost-plugin\">⚡ <a href=\"https://github.com/tryghost/gatsby-source-ghost\">gatsby-source-ghost</a> plugin</h3><p>A straightforward Gatsby source plugin which wraps the Ghost API and makes it compatible with Gatsby and GraphQL, so it's quick and easy to load all your Ghost data into any Gatsby project.</p><h3 id=\"-gatsby-starter-ghost\">⚡ <a href=\"https://github.com/tryghost/gatsby-starter-ghost\">gatsby-starter-ghost</a> </h3><p>An official <a href=\"https://github.com/tryghost/gatsby-starter-ghost\">Gatsby starter repository</a> which is pre-configured to get content from Ghost and output it in a clean, blog-style design. The fastest way to get up and running with Gatsby and Ghost is to fork this repository, and check out our <a href=\"https://docs.ghost.org/api/gatsby/\">Gatsby docs</a>.</p><h2 id=\"official-netlify-support\">Official Netlify Support</h2><p>Deploying a static site with Gatsby and Ghost should be easy - so we've partnered with Netlify, which we also use for Ghost Docs: </p><h3 id=\"-netlify-integration-for-ghost\">⚡<a href=\"https://docs.ghost.org/integrations/netlify/\">Netlify integration for Ghost</a> </h3><p>The official integration guide for Netlify  explains how to set up outgoing webhooks in Ghost to trigger a site rebuild on Netlify. This means that any time you publish, update or remove any content in Ghost, the front end will update.</p><h2 id=\"future-proof-publishing\">Future-proof publishing</h2><p>Converging disparate technologies under a single front-end centralises otherwise decentralised services in a way which caters predominantly to the needs of the site owner, rather than the platform and fosters flexibility and scalability. </p><figure class=\"kg-card kg-image-card\"><img src=\"https://gatsby.ghost.io/content/images/2019/01/ghost-jamstack.png\" class=\"kg-image\"></figure><p></p><p>No more platform-specific plugins and extensions. Just one front-end, and many APIs; all connected together and served as a single site or application with Gatsby!</p><p></p><p></p><p></p>","url":"https://gatsby.ghost.io/about/","uuid":"b5ffcf61-0bc1-41cb-8334-24cd876e7cb1","page":false,"codeinjection_foot":"","codeinjection_head":"","codeinjection_styles":null,"comment_id":"5c360e513ad4e300bf4cbeb0"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"about"}}}