Make your blog using Next.js & Ghost
Recently I started creating a blog using WordPress. But 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 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, 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.
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 got the posts, we just have to pass them through
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
Many more features
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: http://go.nicolas-dmg.fr/MRUggb
Live version: http://go.nicolas-dmg.fr/aHMKSm
You can find my other articles and follow me here. Thanks for reading, I hope you learned something new today 🚀