Context
A few weeks ago, I updated my Ghost instances and noticed that new features were added to the application. Unfortunately, I couldn't immediately start using them because they weren't implemented in my Jamstack version. 🙈
This incident made me wonder if it was worth having a Jamstack site. Should I go back and use Ghost as my frontend as well? I could just use the latest release and have new features in seconds. I could have a newsletter already integrated for me. What else am I missing? 😍
Don't get me wrong, I love Jamstack. It's amazing to own every piece of my stack. I've been able to try a lot of new technologies since I started my blog. But, in recent months, I haven't had time to add new features to my website. I managed to write one article by week, but that's it. 😑
How do I know if it's time to ditch my Jamstack version? 🤔
I choose to make a comparison between them and write this article to help me see more clearly. 🤓
In the screenshots below, you might notice some visual differences I implemented for myself (see my Ghost articles), but I don't think their absence would have made a difference.
Let's see if there is a clear winner. 😎
Features
Since the first time I created my blog with Eleventy, many features have been added or improved in Ghost. Since I haven't implemented them yet, my blog won't look good if I try to use them. 🤕
But exactly how many features am I missing? I published an orphan page to see some of them and I estimated it would take a few weeks to implement them all.
Let's list all the functionalities that my Jamstack version currently lacks:
- Bookmark cards
- Twitter embeds
- Inline code
- A lot of integrations
- Image gallery
- YouTube links
- Buttons
- Collapsible content
- File uploads
- Product cards
- Audio cards
- Video cards
- Header cards
- RSS for authors and tags
- Lazy loading on homepage
- Newsletter
- Membership integration with Stripe
- Menu 🙊
And now, let's see what features I've implemented that the Casper theme doesn't currently have:
- Atom feeds
- JSON feeds
- A page that lists all tags
- AVIF and WebP support for images
- Button to toggle the dark theme
- Minification of many files: HTML, JavaScript, CSS, JSON and XML
- Automatic image compression
- Cumulative data for tags and authors
- Multiples images in sitemap.xml
- Breadcrumbs in JSON+LD schema
- Reading progress indicator
- Application manifest
- Accessibility
By modifying the default Casper theme, I'm sure I could easily implement some of the features that my blog currently has. But not all. 😶
Ghost is therefore the big winner in terms of functionality. 👏
Performance
Most website owners already know this: every website should be performant. The user may leave your website if it takes too long to load. 🙈
Often, an optimized website uses fewer resources, so it's more environmentally friendly! For these reasons, website performance is critical for me. 🍃
Google Lighthouse
Let's see how the famous Lighthouse tool audits certain pages of my website. 😚
Well, there is a lot of measurements, right? Overall, my current version seems to do better than the Casper version. I tried to optimize it as much as possible and it seems to have paid off. 🤑
The Casper version lost a few points on SEO because I have a meta tag to disallow crawlers from indexing this website.
<meta name="robots" content="noindex, nofollow" />The only page that the Casper theme seems to do better than mine is the front page. Although it only loads a few posts, my version loads them all. 🙈
GTmetrix
Both versions seem to have an excellent score. Each of them currently has some issues that could be improved, unfortunately. 😥
Website Carbon Calculator
By optimizing images and other resources, I was able to reduce CO2 emissions by a factor of 3.125! Imagine how many trees I helped save with a few optimizations! 🌲
webhint
Oh man! The default Casper theme doesn't look very good on webhint! It has 3 times more hints than my Jamstack version! 😯
Security
Even though my website doesn't have interactive features, it's still important for me to keep an eye on security. Indeed, it is possible to use external scripts (like the Casper theme) and these can quickly become attack vectors. 😲
HTTP Observatory
For this test, both versions have currently a good score. The Ghost version lost 5 points as I didn't implement the Content Security Policy. It lost an additional 5 points because it uses resources from other domains and doesn't use Subresource Integrity. 😮
Security Headers
Again, you can see that Ghost doesn't provide these headers. I guess it wouldn't really make sense because it's something very technical for the common blogger. 😋
webbkoll
Using Nginx to deliver files of my frontend, it was easy to add headers to further secure my website.
Social media
One feature that wasn't easy to implement in my current stack in Web Components was the social media preview. You know, the way social media choose to display one of your links inside a post or a Tweet? 🕊
This is now something I want to make sure everything is okay if I choose to fully embrace Ghost. 😝
For Twitter, the two sites have the same preview, but there is a really small difference between the two screenshots: the title of the page. On my current stack, I add my full name in the title of each article, unlike the default Casper theme. 😣
This will be something that I'll need to fix if I choose to go back to Ghost. 🤭
Except for the different titles again, Facebook sees my pages the same way. With the default Casper theme, Facebook warns that fb:app_id is missing, but this is something that could easily be fixed again. 🤗
There are no real differences again for LinkedIn, except it looks like I implemented more JSON+LD because it found the post author.
Development
I haven't counted the number of hours I used to program my solution, but the answer is probably too many! 😅
It can take a long time to implement a frontend on a different stack as I did with Web Components. I learned a lot doing it and I have to say that I'm proud of the result. 😎
But if I had chosen to use Ghost as my frontend, I wouldn't have needed to have such a complex setup. 🙊
For example, it can take more than 8 minutes to regenerate my entire site! My GitLab pipelines fetch data from the Ghost Content API, process it and most importantly, generate next-gen images, which can take a few minutes. Once that's done, I can start generating each component with Eleventy. 😴
Conclusion
In conclusion, you could see like me that there are two sides of the coin to create a Jamstack version of a Ghost site. 🥉
Depending on what features your site needs, I still think it may be beneficial to detach from the Ghost interface. But this requires having adequate resources (temporal ⏲, monetary 💰 and human 👴).
But that doesn't answer my original question: do I keep my Jamstack version of Jamstack? 🤔
The answer may surprise you, but I decided not to. 😨
I want to explore Ghost's native features more and it's hard to scale everything for multiple sites. So, in the next few weeks, I will start working on the fourth version of my website. 🤗
Would you have made the same choice? 😉
