Creating a blog on DigitalOcean using Ghost and Next.js is a great way to have control over your content and design.

 Creating a blog on DigitalOcean using Ghost and Next.js is a great way to have control over your content and design. In this tutorial, we'll walk you through the steps to build your blog. 


### Prerequisites


Before you get started, make sure you have the following in place:


- A DigitalOcean account and a Droplet (Virtual Private Server) with a fresh installation of Ubuntu 20.04.

- A domain name that points to your DigitalOcean Droplet.

- Basic knowledge of the command line.


### Step 1 — Publishing Posts on Ghost


1. **Install Ghost**: SSH into your DigitalOcean Droplet and install Ghost. You can use the official Ghost-CLI tool for this. Follow the instructions on the Ghost website to set up your blog.


2. **Publish Posts**: Using the Ghost admin panel, create and publish your blog posts. Make sure your blog is up and running with some content.


### Step 2 — Creating a Next.js Project


1. **SSH into Your Droplet**: Connect to your Droplet using SSH.


2. **Install Node.js and npm**: If you haven't already, install Node.js and npm on your Droplet. You can use the following commands:

   ```shell

   sudo apt update

   sudo apt install nodejs

   sudo apt install npm

   ```


3. **Create a New Directory for Your Project**: Navigate to the directory where you want to create your Next.js project and run:

   ```shell

   mkdir my-blog

   cd my-blog

   ```


4. **Initialize a New Next.js Project**: Run the following command to create a new Next.js project:

   ```shell

   npx create-next-app .

   ```


### Step 3 — Fetching All Blog Posts from Ghost


1. **Install Required Packages**: To fetch data from your Ghost blog, you'll need the `ghost-sdk` package. Install it using npm:

   ```shell

   npm install ghost-sdk

   ```


2. **Create a Ghost API Client**: In your Next.js project, create a JavaScript file (e.g., `ghost-api.js`) to configure your Ghost API client:


   ```javascript

   // ghost-api.js

   import GhostContentAPI from '@tryghost/content-api';


   const api = new GhostContentAPI({

     url: 'https://your-ghost-blog-url.com',

     key: 'your-ghost-api-key',

     version: 'v4',

   });


   export default api;

   ```


   Replace `'https://your-ghost-blog-url.com'` with your Ghost blog's URL and `'your-ghost-api-key'` with your Ghost API key.


3. **Fetch Blog Posts**: In your Next.js pages or components, you can use this Ghost API client to fetch your blog posts:


   ```javascript

   // pages/index.js

   import React, { useEffect, useState } from 'react';

   import api from '../path/to/ghost-api';


   function Home() {

     const [posts, setPosts] = useState([]);


     useEffect(() => {

       async function fetchPosts() {

         const posts = await api.posts.browse({ limit: 10 });

         setPosts(posts);

       }


       fetchPosts();

     }, []);


     return (

       <div>

         <h1>Welcome to My Blog</h1>

         <ul>

           {posts.map((post) => (

             <li key={post.id}>

               <a href={`/post/${post.slug}`}>{post.title}</a>

             </li>

           ))}

         </ul>

       </div>

     );

   }


   export default Home;

   ```


### Step 4 — Rendering Each Individual Post


1. **Create Individual Post Pages**: To render individual blog posts, create a folder named `post` in your `pages` directory and add a file with brackets (`[]`) to catch dynamic routes:


   ```javascript

   // pages/post/[slug].js

   import React from 'react';

   import api from '../../path/to/ghost-api';


   export async function getServerSideProps(context) {

     const { slug } = context.query;

     const post = await api.posts.read({ slug });


     return {

       props: {

         post,

       },

     };

   }


   function Post({ post }) {

     return (

       <div>

         <h1>{post.title}</h1>

         <div dangerouslySetInnerHTML={{ __html: post.html }} />

       </div>

     );

   }


   export default Post;

   ```


2. **Styling and Customization**: Customize the styling and layout of your blog using CSS, a UI framework, or your preferred method.


3. **Deploy Your Next.js App**: Deploy your Next.js app on your DigitalOcean Droplet. You can use NGINX or another web server to proxy requests to your app.


### Conclusion


You've now built a blog on DigitalOcean using Ghost and Next.js. You can further enhance your blog by adding features like comments, a contact page, and more. Don't forget to configure SSL for secure access and regularly update your blog with new content to engage your readers.

Post a Comment

Previous Post Next Post