Gatsby SSG x Ghost

Intro

Among all SSGs and their awsome ecosystem: https://github.com/myles/awesome-static-generators

I got recently one of them, Gatsby, to work with GhostCMS.

I was recently tinkering here with Ghost and its API for automatic post creation.

Ghost is one of those OSS Selfhostable CMS aka no code website builder that allow to create very cool websites.

Also, their hosted plan mission is great.

About the Web

You know the drill:

There is also a very important one: https://trends.google.com/trends/

• How is your site doing? https://search.google.com/

Gatsby SSG

I was following this gatsby course:

React based framework (open source JS, Meta). https://github.com/gatsbyjs/gatsby

Load Data From Anywhere. Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API.

Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.

Go Beyond Static Websites.

Get all the benefits of static websites with none of the limitations.

Gatsby sites are fully functional React apps, so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.

1. You need nodejs installed
2. Then see: https://github.com/gatsbyjs/gatsby

About Gatsby plugins

Gatsby plugins are a fundamental part of the Gatsby ecosystem and play a crucial role in extending the functionality of your Gatsby site.

They allow you to add various features, optimize performance, and integrate with external services.

Gatsby’s extensive plugin ecosystem makes it a powerful tool for building modern, performant websites and web applications.

You can easily find and install plugins from the Gatsby plugin library or create your own to extend your site’s capabilities.

You can find Gatsby plugins in the official Gatsby plugin library. Here’s how you can access it:

1. Gatsby Plugin Library Website: You can visit the official Gatsby plugin library website at https://www.gatsbyjs.com/plugins/.

This website provides a searchable and categorized list of plugins that you can use in your Gatsby projects.

• https://www.gatsbyjs.com/plugins/gatsby-source-custom-api/

• https://www.gatsbyjs.com/plugins/gatsby-source-wordpress/

• https://www.gatsbyjs.com/plugins/gatsby-source-stripe/

• https://www.gatsbyjs.com/plugins/@ccalamos/gatsby-source-googlemaps-static/?=google

2. Gatsby GitHub Repository: Another way to discover Gatsby plugins is by visiting the Gatsby GitHub repository, specifically the “plugins” section. The repository is located at https://github.com/gatsbyjs/gatsby, and you can find plugins in the “plugins” directory.

• https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/
• https://ghost.org/docs/jamstack/gatsby/?ref=gatsby.ghost.io#use-cases

Understanding Gatsby

Gatsby is just another SSG based on NodeJS.

Install nodejs, just like we did here

npm install
gatsby develop

If you thought that you were done understanding APIs just with REST, you were wrong.

Gatsby uses GraphQL to fetch data from APIs.

And you could pull data from dancing sites to your dancing referal page.

Deploying Gatsby: Any static hosting will do

• Github Pages
• Firebase
• Cloudflare Pages

Themes for Gatsby

I Have found several cool ones here: https://statichunt.com/

Like https://statichunt.com/themes/nextjs-supastarter or https://statichunt.com/themes/gatsby-starter-flat-magazine

With source codes:

• https://github.com/damnitrahul/gatsby-starter-flat-magazine

• https://github.com/vojtaholik/gatsby-theme-simplecast Yes, Podcasts via Gatsby SSG too!

• https://jamstackthemes.dev/theme/gatsby-starter-ghost/

• https://gatsby.ghost.org/

• https://gatsby-casper.netlify.app/

• https://foundation.stackrole.com/

• https://github.com/stackrole/gatsby-starter-foundation

• https://jamstackthemes.dev/theme/gatsby-casper/

• https://github.com/scttcper/gatsby-casper

• https://github.com/yinkakun/gatsby-starter-glass

• https://github.com/chrisnmorrison/revista-gatsby-blog-magazine

• https://github.com/app-generator/gatsbyjs-starter-tailwindplay

• https://github.com/app-generator/gatsbyjs-starter-tailwindplay

Podcasts in Gatsby

Similarly to the AstroPod project, we have this in Gatsby:

git clone https://github.com/vojtaholik/gatsby-theme-simplecast

#yarn

• HUGO PaperMod
  • MIT ❤️
• https://github.com/baobabKoodaa/gatsby-starter-infinite-scroll
  • MIT ❤️
• HUGO PaperMod
  • Requires Flotiq CMS
  • Also available for NextJS

• https://www.gatsbyjs.com/starters/

• https://github.com/search?q=gatsby+theme&type=repositories

• https://github.com/TryGhost/gatsby-starter-ghost

• https://gatsbytemplates.io/?ref=%22github%22

• https://github.com/vse-volod/gatsby-theme-massively/tree/master

• https://github.com/ImedAdel/gatsby-london

  • https://gatsby-london.netlify.app/

• https://github.com/stackrole/gatsby-starter-foundation

Portoflio Minimal

• https://github.com/konstantinmuenster/gatsby-theme-portfolio-minimal/tree/main

##rm -rf .git && git init

gatsby new portfolio-minimal https://github.com/konstantinmuenster/gatsby-starter-portfolio-minimal-theme
npm install
gatsby develop
gatsby develop -p 8001
gatsby build

If you want to deploy statically towards Google Firebase:

gatsby build

npm install -g firebase-tools
#firebase login
#firebase init

firebase deploy

Gatsby 💗 ghost

As we saw, its not hard to get started with Ghost.

Consider these for adding to GhostCMS:

• http://localhost:8000/

• http://localhost:8000/___graphql

• https://www.gatsbyjs.com/docs/how-to/querying-data/running-queries-with-graphiql/

Starter Ghost

node -v
npm -v

npm install -g gatsby-cli

gatsby --version

##rm -rf .git && git init

gatsby new my-blog https://github.com/TryGhost/gatsby-starter-ghost
#gatsby new portfolio-minimal https://github.com/konstantinmuenster/gatsby-starter-portfolio-minimal-theme

cd my-blog

gatsby develop
gatsby develop -p 8001
gatsby build

This will start a development server, and you can view your blog at http://localhost:8000.

Conclusions

Responsive Images can seem like a small thing, but it can make a big difference in the performance of your website.

See what Mozilla thinks about them.

Other Websites I’ve Built

1. With an option to plug adsense to each of this websites

Content Creator Blog

For an instagramer who loves knitting

Real Estate Official Site

A Real Estate Business Site for Spain

Personal Business Landing

Landing Page for a well Known English Teacher

All your Links

Sleek collection of important Links

Blog / Adventures

I can write and also create interesting photo galleries about my travel experiences

Mental Health Care Site

Because the brain is as important as the body

Photo centered blogs:

Content Creator Blog

For an instagramer who loves knitting

Punto Photo Gallery

A Photo centered Web for Punto

Travel Adict Photo Gallery

Because Photo & Travel lovers need something more than instagram

Photo Gallery Blog

Made with HUGO and Photo centered

Business Sites:

Business Website

A Website for Agency - AI & IoT Consulting Services

IoT SaaS Site

One Pager with FAQ and Pricing

Doctor Consultation

Landing for Scheduling Doctor Appointments

IoT SaaS Site

One Pager with FAQ, Pricing and MultiLang

• For IOTECH I used https://github.com/themefisher/bigspring-light-astro

• For IORACING - https://github.com/zankhq/astros and before https://github.com/creativetimofficial/astro-launch-ui

• For IODOCTOR - https://github.com/mickasmt/astro-nomy

• For IOT IOTECHCRAFTS - https://github.com/matt765/Tailcast - Also MIT Licensed

Also, business landing pages for small creators:

Business Website

A Website for Agency - AI & IoT Consulting Services

FAQ

We can find broken links with Python

How to monitor my Website Status?

You can with tools like UptimeKuma

How to see if a web was changed

• https://docs.linuxserver.io/images/docker-changedetection.io/#user-group-identifiers Apache v2 ✅

Free stock photo sites

If you need high‑quality, royalty‑free images, these sources offer excellent free collections (always double‑check the specific license for each image):

• Adobe Stock – Free Collection https://stock.adobe.com/free

• StockSnap https://stocksnap.io/

• Pexels https://www.pexels.com/

• Burst by Shopify https://www.shopify.com/stock-photos

• Freerange https://freerangestock.com/

• Unsplash https://unsplash.com/

• Kaboompics https://kaboompics.com/

• Stockvault https://www.stockvault.net/

• Wikimedia Commons https://commons.wikimedia.org/wiki/Main_Page

• Pixabay https://pixabay.com/

what it is a CDN?

A CDN (Content Delivery Network) is:

• A distributed network of servers placed in many data centers around the world.
• Goal: deliver web content (images, CSS/JS files, videos, HTML, APIs, etc.) to users faster and more reliably.

How a CDN works:

• You request a file (e.g. an image on a blog).
• Instead of always coming from your origin server, the file is cached on edge servers of the CDN.
• The CDN serves the file from the closest edge location to the user (geographically / network‑wise).
• If it’s not cached yet, the CDN fetches it from the origin once, then caches it for future users.

Why people use a CDN

• Speed: lower latency, faster page load (better for UX and SEO).
• Offload origin: fewer direct hits to your main server, saving bandwidth and CPU.
• Scalability: easier to handle traffic spikes.
• Resilience: many CDNs provide DDoS protection and failover.

Cloudflare started as a CDN, but today it’s more like a full edge platform: a CDN plus DNS, security (DDoS/WAF), and even compute and storage, all sitting in front of your origin server

There are F/OSS CDNs if you need one.

• https://trafficcontrol.apache.org/

• https://github.com/apache/trafficcontrol

  • https://github.com/apache/trafficcontrol?tab=Apache-2.0-1-ov-file#readme

Apache Traffic Control is an Open Source implementation of a Content Delivery Network

Apache Traffic Control allows you to build a large scale content delivery network using open source. Built around Apache Traffic Server as the caching software, Traffic Control implements all the core functions of a modern CDN.

CDNjs

• https://cdnjs.com/
• https://github.com/cdnjs/cdnjs

MIT | 🤖 CDN assets - The #1 free and open source CDN built to make life easier for developers.

cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare.

They have a F/OSS Static Website where we can find the packages to use via CDNjs - https://github.com/cdnjs/static-website

JSDelivr

• https://www.jsdelivr.com/
  • https://github.com/jsdelivr/jsdelivr
  • https://github.com/jsdelivr/jsdelivr?tab=MIT-1-ov-file#readme

A free, fast, and reliable Open Source CDN for npm, GitHub, Javascript, and ESM