💻 Build with Ghost: Themes made easy

💻 Build with Ghost: Themes made easy

Speed up your theme development process with the latest updates to the Starter theme. A peek inside the latest features and developer tools in the Ghost ecosystem. Explore the world of generative art with this week’s featured publication, Gorilla Sun.

Issue #4 of the Build with Ghost newsletter has sprung. Welcome back!

In this month’s issue:

  • Speed up your theme development process with the latest updates to the Starter theme.
  • A peek inside the latest features and developer tools in the Ghost ecosystem.
  • Explore the world of generative art with this week’s featured publication, Gorilla Sun.
Pro tip: Navigate Ghost Admin more quickly with cmd/ctrl + [ and cmd/ctrl + ].
Code in the rollup configuration file

Building a custom theme just got easier

If you’ve been thinking about creating a custom Ghost theme, now is a great time, as we’ve just made the process a little bit easier and a whole lot more fun by updating the Starter theme.

The fundamental idea behind the Starter theme is to accelerate your theme development by taking care of the basics, offering some guidance, and providing the under-the-hood machinery. We’ve taken care of the mise en place, so you can get right to cooking the meal. Here’s an overview of everything that’s new:

🧑‍🏫 A master class in itself
Learn the syntax and structure of a theme from the theme itself. Annotations throughout the code explain what each part of the theme is doing. Paired with our VS Code extension, you can learn everything almost all you need to know without ever leaving your editor.

🔁 Live reloading
Out of the box, you can make changes to your CSS, JS, and Handlebars files and see your changes reflected on your local site in real time. Having continuous feedback while you build out your Ghost theme makes the development process much quicker and makes testing a breeze.

🚀 Modern syntax
The Starter theme makes it possible to use cutting-edge JS and CSS syntax and features. Under the hood, Rollup, Babel, and PostCSS transpile your code so it runs everywhere. Long story short, coding your theme is a lot more convenient without sacrificing compatibility.

👟 Fast everywhere
Rollup builds your assets quickly so your development flow is never interrupted. Once your theme is shipped, your visitors will benefit from fast site speeds, because your CSS and JS are optimized and minified automatically.

The theme build process is powered by Rollup and PostCSS. This means that you can easily add any of the plugins from their rich ecosystem into your theme. Lookout Tailwind, Three.js, and Chart.js.

👻 Tuned for Ghost
All of the tools you need are included, like using gscan to test your theme’s compatibility and Ghost’s GitHub Deploy Action to automatically update your site with new versions of your theme.

GitHub - TryGhost/Starter: A development starter theme for Ghost
A development starter theme for Ghost. Contribute to TryGhost/Starter development by creating an account on GitHub.

Just shipped 🚢

Ideas and tools 🛠️

  • Keen to start building your custom theme? Brush up on your CSS with some excellent videos by Kevin Powell
  • Glyphy is a great resource when you’re looking for that obscure symbol  𓆱 or cͦͮr̲a̓̕z̪̍y̎ f̵̉o̷̘̼nt̸ͬ͘
  • A whole host of new features around color just dropped. Adam Argyle walks through some of the highlights in the “High Definition CSS Color Guide

Exploring the possibilities of code-based art

Sun Gorilla article page

Gorilla Sun is a publication run by Ahmad Moussa featuring deep dives into creative coding and generative art. Ahmad showcases, teaches, and shares how to use interesting algorithms to create art. It seems the artist isn’t safe from learning math after all!

Having recently migrated to Ghost from a static-site generator, Ahmad shares some details about the decision to switch to Ghost and what the migration entailed:

Goodbye Jekyll
I’ve been thinking about moving away from Jekyll for a while now. Don’t get me wrong, I love the static site generator, I really do, it’s served me well for over two years, but certain aspects of my workflow have become very clunky, and overall I haven’t been able to be as efficient…

One of Ahmad’s most popular articles, “An Algorithm for Polygon Intersections”, details the method for determining the intersection between polygons for the purpose of generative art.

An Algorithm for Polygon Intersections
In this post we’ll work our way towards an algorithm that can compute convex polygon intersections. We’ll also a method for intersections between axis-aligned rectangles, a function that can determine the intersection of two line segments, as well as a point in polygon test.

Gorilla Sun’s publication is beautifully designed and graphically lush. The artworks keep you glued to the screen. Here are two of Ahmad’s faves:

Sites featured in the Build with Ghost newsletter are discovered through our creator network, Ghost Explore. It’s a way for creators and readers alike to discover their favorite new publications. Anyone running a Ghost site can add themselves to Explore to be featured throughout the wider Ghost ecosystem. If you’d like to be featured in this newsletter, add your site to Explore and reply to this email.

Thanks for building with us

Have an idea for a Ghost tutorial? Reply to this email and let us know ❤️

Looking for other creators and developers working with Ghost? Join the official Ghost Forum, where we talk about all things Ghost!

On this page Introduction

How was the tutorial?

Be the first to know.

Join the Ghost developer community — sign up to get early access to the latest features, developer tools, and tutorials.

No spam. Once a month. Unsubscribe any time.