Loading
/post

Building presentation website with Ghost CMS

Building a new website of the company required the choice of Content Management System. Shortlisted were the most popular CMS, like WordPress, Drupal, Ghost, and ButterCms. Since the original intention was to select a "headless" CMS, a CMS that would use only its API, while content would be made "from scratch", comparing the above CMS, the final choice fell to Ghost. It should be noted that I was looking for a "lightweight" CMS version written in Node.js for the purpose of building a website. For that reason, I dropped WordPress and Drupal from the selection. Ghost proved to be the first choice, unlike ButterCMS, primarily because of its wide use and popularity (2nd headless CMS, according to GitHub statistics github.com/topics/cms), good community support, simple "content" editor and integration with UI.

Comparison with WordPress

Comparing it with popular  WordPress, it should be noted that: Ghost has SEO and "social built it" support, which means that no extra plugins and / or extensions are required.

As it is written in Node.js, it is much faster than WordPress. Using www.pingdom.com, we compared the speed of our new and old site made in WordPress. (Although, number of request and page size isn't only thing that affect performance of CMS).

Old website written in WordPress
New website written in Ghost

Comparing it with Gutenberg text editor, I should mention that Ghost also offers the option of writing content in MarkDown.

Also, there's a need to be pointed out that Ghost is primary targeting bloggers when WordPress is more "multipurpose" CMS who's targeting business, commerce, bloggers...

Advantages of Ghost

Some advantages of using Ghost that I noticed while creating a website are easy integration with the API. Consuming the API from a specific context is predefined, "default", for example, post data is consumed in the "post" template, authors in the "authors", etc. The use of "context" is carried out using the "templating" system "Handlebars".

Secondly, through the editor can be easily done "code injection" into a header or footer of HTML file, resulting in easier and faster integration with services such as Google Analytics, etc. Similar is with built-in integration such as Slack, Youtube, Unsplash, etc. Also, it is useful for writing Metadata directly and creating social media cards when writing content and "sharing" it.

To summary, the main advantages are speed, built-in SEO and social sharing, easy content creating.

Disadvantages

On the other hand, the negative side of Ghost when building a website was:

1) Unable to customize components

I'll take pagination for example, although Ghost comes with default pagination component, it attributes are quite modest. There can be accessed current page, previous/next page and number of pages.

"pagination":{
   "page":number,
   "limit":number,
   "pages":number,
   "total":number,
   "next":null,
   "prev":null
}

In order to achieve the desired look, using "querySelectors" I retrieved total number of page {{pagination.pages}} and current page {{pagination.page}}. Need to point out that retrieved numbers of pages was declared inside HTML tags, which were later hidden display: none. To keep an interval of 4 displayed pages (n = 4), I determine variables "start" and "limit" and within them was created new elements with current page number.

   let limit = 4;
   let start = 1;
   
   if (totalPages <= 4) {
       start = 1;
       limit = totalPages;
   } else if (currentPage <= 2) {
       start = 1
   } else if (currentPage === totalPages) {
       start = totalPages - 3;
   } else {
       start = (currentPage - 2)
   }
   for (let i = start; i <= (start + limit - 1); i++) {
       if (i === currentPage) {
           let el = document.createElement("div");
           el.innerHTML = i;
           pagination.appendChild(el);
       } else {
           let el = document.createElement("a");
           let otherPages = document.createElement("div");
           el.appendChild(otherPages);
           otherPages.innerHTML = i;
           pagination.appendChild(el);
       }
   }

Generally, to make some custom stuff in your Ghost project, you always need to take way(s) around. In our example, retrieving numbers in HTML tags, then hiding its not recommended practice. In other words, it's not "developer-friendly".

2) "Only blog" approach

As the original purpose of Ghost is to create blogs, the use of APIs outside the mentioned context is also limited. Regarding, endpoints provide retrieval of information like a post, authors, tag, and settings. When making a page, there's a great chance that you'll need to use "other" data outside specific data set, in our e.g., projects. The only solution here is to fetch all data from specific endpoint and then filter data through tag or primary_tag. The result of such an approach is the need to put tags on every post inside Ghost Admin. In other words, all your data will always be posts.

When is it "smart" to use Ghost CMS?

1) You need a platform for writing blogs only.

2) Don't need to use lots of plugins.

3) You don't want to spend more time configuring performance related plugins.

To summarize, even though it's possible to build a website using Ghost, there are still lots of workarounds to achieve the desired functionality. Customizing components it's main disadvantage in the mentioned process. Until that, Ghost is a great option for making, separate,  blogging platform on your website.

/Let's talk/

Let's build something great together. Reach out today.