When I was a kid, about 4-5 years old, I saw a ghost, a man without a head. I just noticed after a few moments. He was in the crowd with about 5-7 guys. He wore a white shirt, put his back on me, and did nothing while the others were talking, playing guitar, and having fun.
We were in the night. He was about 8 meters from me. Those made me unsure about what I saw. So I asked my father that sit next to me, "Dad, why does that guy have no head?", twice. But he kept repeating the answer, "Which one?", then continued his dinner.
It seems like there is no one notice him except me. That made me curious. So I got up from my chair then came closer to see him more clearly.
It was clear that he had no head and made me a little scared. It was the first time I saw a ghost even if until today I still hard to believe or unsure about that experience. It would be a long story if I tell the details. At the most important, that is not the primary topic that I want to cover here. It is about Ghost CMS, some people call it Ghost.js.
Ghost is the most popular headless CMS. Technically, Ghost Admin UI (User Interface) is built on Ember.js, the desktop apps on Electron, and the Android app natively on Java. It ships data to the databases using Bookshelf.js ORM (Object-relational mapping) and theme layers to Express.js (back-end) using Handlebars.js (template language).
The only one we can create for Ghost is themes. It comes with a pre-installed theme called Casper. That can be your reference for theme development. Click here for more references.
You can read the official documentation of Handlebars Themes and check the Casper theme for references. Anyway, here are my tips:
- Make sure that you are okay with themes or Front-End development. What you do is slicing. It is converting a design from Adobe XD, Photoshop, or Sketch to HTML, CSS, and JS.
- At least a theme requires three files;
- Create a file for your default layout called
layout.hbs. It is a base template that contains header and footer.
- Create some partials for repetition pieces such as postcard, navigation, form, etc.
- Put Gulp on your theme development for compiling Sass, combining, and minifying CSS and JS.
- Create responsive images to optimize the performance of your site.
- Create the AMP version of your site to optimize mobile experiences.
- You can use GScan to check issues of your theme. You can use the CLI version by installing the npm package,
npm install -g gscan.
- Check these tutorials for more.
Ghost vs WordPress
Because Ghost is open-source, let's compare it with the famous open-source blog powering tool, WordPress.
|Google AMP||Native||Third party|
Both platforms are modern, popular, easy to use, easy to develop, easy to deploy, providing managed hostings and custom domains. There are a lot of themes for both of them in the market. Their communities are growing and development is still happening.
No wonder that Ghost is faster because it runs on Node.js. But you can convert your WordPress to static HTML site that can make it faster.
Ghost provides many features natively. But WordPress provides full custom. To extend WP, you can use other public plugins, buy them, or create your own. In WP, you can create custom fields for posts, custom post types, or even custom fields or tables in the database which are not available in Ghost.
Both platforms are easy to learn and fully documented. They have a lot of communities that can help. There is a lot of free and premium tutorials for WordPress. My friends who are non-developers were pushing themselves to learn WP because they found out that it was fascinating.