How to run Ghost CMS on Vercel

Hosting Ghost CMS directly on Vercel is challenging because Ghost requires a backend server (it’s built on Node.js), while Vercel is designed primarily for frontend applications, static websites, and serverless functions. However, a common approach is to use Ghost as a headless CMS and fetch content via its API, then display this content using a framework like Next.js, which can be hosted on Vercel.

Here’s a detailed step-by-step tutorial to set up Ghost CMS as a headless CMS with a Next.js frontend hosted on Vercel:

Step 1: Setting Up Ghost CMS

1. Host Ghost on a server like DigitalOcean, or use a managed platform like Ghost(Pro). After setting it up, make note of your Content API URL and key.

Step 2: Setting Up Your Next.js Application

1. Create a new Next.js application:

   npx create-next-app ghost-next-vercel
   cd ghost-next-vercel
   

2. Install the Ghost Content API package:

   npm install @tryghost/content-api
   

3. Set up the Ghost API in your Next.js application. In the root of your project, create a new file named ghost.js. This will be your Ghost client.

   const GhostContentAPI = require('@tryghost/content-api');
   
   const api = new GhostContentAPI({
     url: 'YOUR_GHOST_API_URL',
     key: 'YOUR_GHOST_CONTENT_API_KEY',
     version: 'v4',
   });
   
   export default api;
   

   Replace 'YOUR_GHOST_API_URL' and 'YOUR_GHOST_CONTENT_API_KEY' with your Ghost installation’s details.

4. Now, you can fetch and display content from Ghost in your Next.js pages. As an example, create a simple page to display all posts:

   In pages/posts.js:

   import api from '../ghost';
   
   export async function getStaticProps() {
     const posts = await api.posts.browse();
   
     return {
       props: { posts }
     };
   }
   
   function Posts({ posts }) {
     return (
       <div>
         {posts.map(post => (
           <div key={post.id}>
             <h2>{post.title}</h2>
             <div dangerouslySetInnerHTML={{ __html: post.html }} />
           </div>
         ))}
       </div>
     );
   }
   
   export default Posts;
   

Step 3: Hosting on Vercel via GitHub

1. Push your Next.js project to a GitHub repository.

2. Sign up or log in to Vercel and link your GitHub account.

3. Import the repository into Vercel. Vercel will automatically detect it’s a Next.js project and set up build configurations.

4. Deploy your project. Every push to the main branch of your GitHub repository will trigger a deploy on Vercel.

Now, your Next.js frontend is set up to fetch content from Ghost CMS and is hosted on Vercel. Make sure to regularly rebuild your Vercel project to reflect changes made in your Ghost CMS. You can use Vercel’s webhook system combined with Ghost’s webhook feature to automate this process.