How to make ghost Headless (AWS S3+Cloudfront)

Turning Ghost into a headless CMS means you’ll use Ghost primarily for content management while using another system (e.g., a static site generator, a different web framework, etc.) to handle the presentation layer. Ghost provides a Content API that makes this process relatively straightforward.

Here’s how you can set up Ghost as a headless CMS:

1. Setting up Ghost

If you haven’t set up Ghost locally or on a server:

1. Local Installation
   Install Ghost locally for development purposes:

   npm install ghost-cli -g
   ghost install local
   

   This will guide you through the setup for a local development version of Ghost.

2. Server Installation

   If you want to host Ghost on a server, follow the official server setup instructions: Ghost on Ubuntu.

2. Accessing the Ghost Admin Panel

1. Navigate to the Ghost admin panel. If you’re running locally, it will typically be: http://localhost:2368/ghost/.

2. Complete the setup by creating an account and setting up your site.

3. Setting up Ghost Content API

1. Once inside the Ghost Admin panel, go to the Integrations section.

2. Click on "Add custom integration." Give it a name relevant to your project (e.g., "Headless").

3. After creating the integration, you’ll see two keys:

   • Content API Key
   • Admin API Key

   The Content API Key is what you’ll use to fetch content from Ghost in your front-end application.

4. Note down the API URL and the Content API Key.

4. Fetching Content from Ghost

Now, wherever you decide to present your content, you’ll use the API URL and the Content API Key to fetch data.

For example, if you’re building a site with JavaScript, you can use the official Ghost Content API JavaScript client:

1. Install the client:

   npm install @tryghost/content-api
   

2. Use the client in your code:

   const GhostContentAPI = require('@tryghost/content-api');
   
   const api = new GhostContentAPI({
     url: 'YOUR_GHOST_API_URL',  // replace with your Ghost site's URL
     key: 'YOUR_CONTENT_API_KEY', // replace with the Content API Key
     version: 'v4'
   });
   
   // Fetching posts
   api.posts.browse()
     .then(posts => {
       console.log(posts);
     })
     .catch(err => {
       console.error(err);
     });
   

This is a basic example to fetch posts, but the Ghost Content API provides endpoints for tags, authors, pages, and more.

5. Disabling Ghost Front-end

While running Ghost as a headless CMS, you might want to disable its default front-end to avoid confusion and potential SEO issues. Here’s how you do that:

1. Navigate to your Ghost installation directory.

2. Edit the config.*.json file (e.g., config.development.json for local development).

3. Inside the config JSON object, set the headless property to true:

   {
     "url": "http://localhost:2368",
     "server": {
       "port": 2368,
       "host": "127.0.0.1"
     },
     "headless": true,
     ...
   }
   

4. Restart Ghost to apply the changes.

Now, if you try to navigate to your Ghost’s public URL, you’ll see that the default Ghost front-end is disabled, and you can use Ghost purely as a headless CMS.

That’s it! Now you have Ghost set up as a headless CMS, and you can pull content from it into whatever front-end you wish to use.

How to make Ghost headless with AWS S3 and Cloudfront

Turning Ghost into a headless CMS and serving your site using AWS S3 and CloudFront involves several steps. In this guide, you’ll use Ghost to manage your content and a static site generator (e.g., Gatsby) to fetch this content and generate static files, which will then be hosted on AWS S3 and distributed using CloudFront.

Step 1: Set Up Ghost as Headless

Follow the steps from the previous answer to turn Ghost into a headless CMS. In essence:

1. Set up Ghost (either locally or on a server).
2. Create a custom integration to get your Content API Key.
3. (Optional) Set Ghost to headless mode by modifying the config file.

Step 2: Set Up Your Static Site Generator

For this example, we’ll use Gatsby:

1. Install Gatsby CLI:

   npm install -g gatsby-cli
   

2. Create a new Gatsby site:

   gatsby new my-static-site
   cd my-static-site
   

3. Install the Ghost source plugin:

   npm install gatsby-source-ghost
   

4. Configure the Gatsby source plugin. Edit gatsby-config.js:

   module.exports = {
     plugins: [
       {
         resolve: `gatsby-source-ghost`,
         options: {
           apiUrl: `YOUR_GHOST_API_URL`,
           contentApiKey: `YOUR_CONTENT_API_KEY`
         }
       }
     ]
   };
   

5. Build your Gatsby site:

   gatsby build
   

This will generate static files in the public/ directory.

Step 3: Setting Up AWS S3

1. Create an S3 bucket:
   Navigate to the S3 dashboard in your AWS Console and click "Create Bucket". Name it, e.g., "my-static-site".

2. Configure the S3 bucket for static website hosting:

   • Select the bucket, go to the "Properties" tab.
   • Click on "Static website hosting".
   • Choose "Use this bucket to host a website".
   • Enter index.html for the Index document.

3. Upload your static files:
   Make sure you have the AWS CLI installed. Sync your public/ directory to your S3 bucket:

   aws s3 sync public/ s3://my-static-site
   

Step 4: Setting Up CloudFront

1. Create a CloudFront distribution:

   • Navigate to the CloudFront dashboard in your AWS Console and click "Create Distribution".
   • Choose "Web" and then select your S3 bucket from the "Origin Domain Name".
   • Set the "Default Root Object" to index.html.
   • Follow through the rest of the setup with default settings or adjust as needed.

2. Get your CloudFront distribution URL:
   After creating your distribution, you’ll be provided with a domain name looking like d12345abcdefg.cloudfront.net. This is where you can access your statically hosted website.

Step 5: (Optional) Set Up a Custom Domain

If you have a custom domain and you want to use it instead of the default CloudFront domain:

1. Use Route 53 to set up your domain and create an alias record that points to your CloudFront distribution.

2. Update your CloudFront distribution settings to include your custom domain in the "Alternate Domain Names (CNAMEs)" section.

3. Use AWS Certificate Manager (ACM) to request a certificate for your domain, and assign that certificate to your CloudFront distribution.

That’s it! Now you have Ghost set up as a headless CMS, Gatsby as your static site generator, and your site is being served from AWS S3 and distributed via CloudFront. Whenever you update content in Ghost, you’d regenerate the Gatsby site and sync it to S3.