Shodami Dev

Why I Choose Strapi Over Ghost

This is a disclaimer that I’m not going to go in-depth why I choose Strapi over Ghost. In this post, I am going to mostly talk about the editor used by Ghost and why Strapi allows me to use a better editor. You have been warned.

For Shodami my goal was to use the site to document new things I learn as a developer or as a designer. With that in mind, I had a simple requirement for the frontend: it has to run Gatsby. And for the backend, it must use JavaScript as the primary programming language.

The worst thing about JavaScript right now is the limited ecosystem that I could potentially use for the backend. Not all of them were mature or had all of the features possible to make things work most of the time.

Ghost

What Ghost promised me was a headless CMS built on a modern stack with performance and security in mind-but they forgotten the most important ingredient in making a blog site: the editor.

The editor is the most important puzzle piece in generating content. It determines how you can structure a blog post and even what elements you can insert into your post. In Ghost the editor is called Koenig. And the type of toolbar Koenig uses is an inline toolbar which will only show up when you select text for transformation.

The transformations that you can do on the selected text is the following:

  1. Bold
  2. Italics
  3. Heading
  4. Block Quote
  5. Link

Besides transformations, Ghost provides the secret ability to insert numbered lists and unordered lists into your post. However, to insert a list you have to trust the editor will understand your intentions.

For example, to insert an unordered list you have to type in * followed by a space. Now the editor will treat the current line you are working on as part of a list. You can then press enter to add another item as part of the list or type in enter twice to exit out of the list.

The ordered list steps are practically the same steps but instead of the *, you type in a number such as 1. Then you can either add another item to the list or exit out of it.

Apart from transformations and lists, there is a feature called Cards. With Cards you can insert a unique content type such as images, Markdown, HTML, and etc.

At this time of writing, the following is currently available as cards:

  1. Images
  2. Markdown
  3. HTML
  4. Gallery (an Image Gallery)
  5. Divider
  6. Bookmark
  7. Email

Embed third party content:

  1. Youtube
  2. Twitter
  3. Instagram
  4. Unsplash
  5. CodePen
  6. Spotify
  7. SoundCloud

With all of those features available from Ghost, you would think that would be enough for me. But you are wrong. What I wanted from Ghost was to be able to create at table, highlight text, underline text, and much more. And to my surprise, Ghost doesn’t provide a way to create your own custom cards nor a way to extend the editor to add these missing features.

Strapi

Here is where Strapi comes in: a backend built on several different pieces of technology made using JavaScript. If you know Python, then you are most likely aware of Django. Strapi is pretty much the exact same thing as Django but does not come with a template system. Instead, you have to handle the frontend yourself by consuming the REST API or GraphQL endpoints made automatically by Strapi.

So compared to Ghost, Strapi has to build practically everything from the ground up.  This means creating a separate table for authors, a separate table for categories, or whatever else you might need a post to relate to and possibly contain in terms of data.

I won’t go over all the details on what I created but let’s just say its good enough for now.

Editor

In Strapi, each table is considered a model which models the structure of your table. The model itself contains attributes which are the fields of your table. The most important attribute for a blog site would be the richtext attribute.

This attribute allows you to have a text box in your admin panel that displays a WYSIWYG editor for generating rich-text content. By default, the WYSIWYG editor was built by the Strapi Team leveraging draftjs. The rich-text stored in your database would be written in markdown. So, when you consume the API, you will have to translate the markdown into plain HTML for your post.

Unlike Ghost, Strapi offers you the opportunity to replace the default editor with any editor of your choosing. However, the editor must be compatible with REACT because the admin interface uses REACT.

Personally, I choose TinyMCE to replace the text editor. It has pretty much everything built into it and I can customize it further by creating my own plugins. Thus, I don’t have to create anything further with it to do the things I want.

The text content created by TinyMCE is plain HTML with nothing too fancy attached to it. So, I just have to consume it from Strapi.

The plugins that I am currently are the following (in no particular order):

  1. Highlight color text
  2. Background Color
  3. Bullet List
  4. Ordered List
  5. Alignment
  6. Tables
  7. Strikethrough
  8. Underline
  9. Block Quote
  10. Link
  11. Insert Images
  12. Template
  13. Format Text
  14. Remove Format
  15. Hr
  16. Undo
  17. Redo
  18. Wordcount
  19. Character Map

Please note these are not their actual names instead they represent what the plugins can do.

As a bonus Strapi offers a simple technique to upload images by using the url "uploads/". This will upload any images you have to your local storage or your cloud storage.

Summary

In conclusion, I choose Strapi because it allowed me to use the best editor I can think of for creating meaningful content while Ghost cannot do this for me.

Shodami Dev © 2020