Make your blog using Next.js & Ghost
Recently I started creating a blog using WordPress. However, as a developer, I was frustrated about not being able to customize the theme I installed easily. As a React developer, I asked myself if it was possible to use my favorite framework.
That is how I discovered headless CMS and Ghost.
What is a headless CMS?
CMS stands for Content Management System. It is a system that provides you with an interface to edit and manage content. This interface communicates directly with the server (where your content is stored).
However, it is possible to use a CMS without the interface. It is what we call a headless CMS, basically a server managing content.
Headless CMS allows you to create your front end and choose how it is built. It will only manage, and organize your content and serve it to your custom front end.
Ghost a soft CMS
After having discovered headless CMS, I tried to find something more contemporary and elegant than WordPress. That is how I found Ghost.
Ghost is an open-source blogging platform allowing editing, management, publishing, and SEO Optimisation, …
You can self-host it as well as you can use their offers.
What about Next.js?
Although Ghost provides a theme installer, you may want to create your front end. As a React developer, I chose Next.js, a server-side renderer framework.
Ghost is providing a JavaScript SDK usable with Next.js. We’ll see how to set up and use it.
Setting up Ghost with Next.js
After having installed the SDK using Yarn or NPM, you will be able to create a configuration file dedicated to Ghost. You can reuse the code above, here I am using environment variables.
To retrieve the Ghost key, you will have to create an integration as below:
Fetch some posts
Now that everything is ready it is time to retrieve some data. You can use the code below on the page you want to fetch posts:
This bunch of code will use the ghost instance we previously created, and call the browse method that will return every post. Once we get the posts, we just have to pass them through props .
The response data we got is an array containing PostOrPage objects. They are the same objects as when you fetch a single post.
Fetch a post
Fetching a single post will be the same as fetching a list of posts. Here is the corresponding bunch of code:
The main difference is that you have to pass a slug to retrieve your post. We are retrieving it using Next.js’s getStaticPaths method:
Many more features
Reading posts is not the only feature that the Javascript SDK provides. You can find every method in the documentation here. All you have to do is use them and build your front-end around them.
I have also developed a boilerplate that you can find on GitLab. And also a live version here.
Wrap up
We are now able to use our content created in Ghost directly into our Next.js code base. We can do much more, such as self-host a Ghost instance.
GIT Repository: https://gitlab.com/dommangetnicolas/Blog-ghost
Live version: https://blog-ghost-five.vercel.app/
You can find my other articles and follow me here. Thanks for reading, I hope you learned something new today 🚀
