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.