Download the template for this blog from Github

Next.js / Ghost Tutorial: 2 - Setting up the development environment

The publishing workflow

Before we talk about the development environment, it is important to understand how posts are composed and deployed with the frontend website we will create with Next.js.

the_4_steps_of_the_publishing_workflow

Step 1 You will use the Ghost CMS interface to edit and publish the posts and pages of your blog.

Step 2 The Next.js solution will fetch the posts and pages through the Ghost API,create the routing for them and compose the final layout with React components and css styling.

Step 3 Since you are building a static generated site (SSG), Next.js will build and export it for further usage.

Step 4 Finally, you will deploy the generated website to a webserver, either on your own server or to the cloud provider of your preference (Vercel, Netlify, Amazon, Azure, DigitalOcean, only to name a few).


With the architecture in mind, we will now have a look at Ghost.

Ghost CMS: Self-Hosting vs. Cloud Hosting

Availabity, performance, Data Loss Prevention (DLP), security, operation costs.
These are important parameters that should be weighed in every cloud vs. on premise decision. When it comes to Ghost CMS, it's no different.

However, since the topic of this tutorials is the development of a static site (SSG) with Next.js, where the operation of a live Ghost instance will not play any role on the frontend, other considerations may apply.

To be able to code along as we move forward, you'll need a running Ghost server.
With this article I will try to provide you with some guidance on this decision.

Self-hosting

If you're just looking for a headless CMS as a backend to compose posts to export to a static blog site, a self-hosted Ghost instance might be all you need.

Ghost provides a official step-by-step guide on how to install Ghost locally. This fast-track setup saves you a lot of work and is perfect for development or when you don't want to deal with the technical details of the architecture.

However, if you are (like me) interested in understanding the nuts and bolts of the platform and adapt it to your needs, there is also the option of a complete installation on your local computer.
The official documentation provides instructions on How to install Ghost

Ghost version 3.40.2 runs smoothly on my Linux Ubuntu 20.04.1 LTS machine. In contrast to the recommendation, I use apache2 instead of NGINX, but that's only because I am more familiar with it.

Since we are building a Ghost instance for development purposes only, setting up an SSL endpoint is optional.

Warning: It is not recommended to use this setup for productive operation!

Risk of data loss is real. If you decide to setup and run a Ghost server on premise, make sure to backup your data (media, database and configuration files) regularly!


Cloud hosting

If you plan to set up Ghost for production usage but don't want to (or can't) deal with the details of the server implementation, you can find a range of cloud platforms which provide the ability to set up a Ghost instance with only a few clicks.

As of January 2021, Ghost's official documentation "How to Install Ghost" names three of these platforms, being one of them Ghost's own Plattform Ghost(Pro).
Keep in mind that these solutions offer more than just the hosting of a CMS instance, as they provide extended features, which may be worthwhile comparing.

Since I have not delved further into this myself, I will leave it with you to compare the existing plattforms.



Generate sample data

Once you have your Ghost server up and running either locally or on the cloud, go ahead and create two blog posts.
The content can be whatever you want but both articles should be writen in markdown and have the following attributes:

  • feature image
  • excerpt
  • tags (for example "demo", "coding", "general", ...)

sample_data

Additionally, create the following blog pages (again content is not important as for now they serve demonstration purposes only):

  • About
  • Legal
  • Copyright


Git

You'll probably want to work with a code repository (I highly recommend you to do so). Since the instructions all along this tutorial refer to git, Git tools should be installed in the flavor corresponding to your operating system.


Code Editor

In the coming posts you will see screenshots of Visual Studio Code, Microsoft's popular code editor.
While I find it extremely handy due to the enormous number of extensions for every conceivable purpose, you can of course use any other piece of software you like. After all, it's all about editing ascii files…

Hint: Visual Studio Code comes with built-in support for git.

With the next post Next.js / ghost Tutorial: 3 - Creating Next.js project and code repository we will create the Next.js project and start coding.
Stay tuned!

Filipe Matos