Gatsby London

Gatsby London is a free, MIT-licensed Gatsby starter from Jamstack Studio that turns Markdown content into a responsive, image-centric blog or portfolio site, porting the popular London theme from Ghost to the Gatsby static site generator.

What is Gatsby London?

Gatsby London is a free and open-source starter project for Gatsby, the React-based static site generator. It provides a pre-built theme tuned for publishers and portfolio sites with plenty of graphics to display. The starter takes Markdown files as content input and outputs a static HTML site that can be deployed to any web host. It was created by Jamstack Studio and is based on the London theme originally made for Ghost. The project is released under the MIT license, so it can be used freely for personal or commercial purposes without restriction.

Key Features

• Image-centric layout — The design prioritizes large visuals and whitespace, giving galleries and photo-heavy articles a polished, editorial look.
• Fully responsive — The theme adapts to screen sizes from mobile phones to desktop monitors out of the box.
• MIT licensed — The code is free to use, modify, and redistribute, including in commercial projects.
• Ghost theme port — The visual style is a faithful port of the London theme from Ghost, bringing a familiar editorial aesthetic to Gatsby.
• PurgeCSS integration — Unused CSS is automatically stripped during the build, keeping the production stylesheet lightweight.
• GraphiQL built in — During development, you can access Gatsby's GraphQL playground at localhost:8000/___graphql to inspect and test your data queries.
• One-click Netlify deployment — A Deploy to Netlify button is included in the README, so you can publish the site without installing the Netlify CLI.
• Customizable React components — The main page component is at src/pages/index.js, and the rest of the source is a standard Gatsby structure that developers can extend.

Who is it for?

• Photographers and visual artists — They can quickly build a portfolio site that puts their images at the center of the page.
• Independent publishers and bloggers — The editorial layout suits long-form articles with supporting visuals.
• Gatsby developers — The starter offers a clean base for client projects, letting them override components and styles rather than starting from scratch.

What can you do with Gatsby London?

• Create a portfolio site: Display project galleries and case studies with a strong visual hierarchy and minimal effort.
• Publish a personal blog: Write posts in Markdown and have them rendered with a clean, image-first reading experience.
• Foundation for custom builds: Use the starter as a jumping-off point for client work, then add new pages, components, and data sources as needed.

How does Gatsby London work?

Start by running npx gatsby new my-awesome-portfolio https://github.com/ImedAdel/gatsby-london to create a new project. Then run gatsby develop to start a local server at http://localhost:8000, and edit the source files to customize the site. Content is stored in Markdown files, and to apply CSS classes to images you need to write raw HTML in those Markdown files. The production build can be generated with gatsby build and deployed anywhere, including Netlify via the provided deploy button.

Known limitations

The README notes that the starter ships without JavaScript animations, and while PurgeCSS removes unused CSS automatically, the author has not manually optimized the stylesheet. Additionally, applying custom CSS classes to images requires writing HTML in Markdown rather than using pure Markdown syntax.

Pricing

Gatsby London is free to download and use. There are no paid tiers or subscription fees; the MIT license permits both personal and commercial use without payment.

FAQ

Is Gatsby London free?

Yes, the starter is completely free and open source. It is released under the MIT license, so you can use it in personal and commercial projects without paying anything.

Does Gatsby London support Tailwind CSS?

No, the starter does not include Tailwind CSS. It uses Gatsby's default styling approach, and the README does not mention any CSS framework beyond the built-in styles and PurgeCSS.

Can I deploy Gatsby London to Netlify?

Yes, the README includes a Deploy to Netlify button that takes you to app.netlify.com to connect a repository and deploy the site directly. You can also deploy manually with the Netlify CLI or the dashboard.

How do I add custom styling to images?

Because the theme uses CSS classes for image layouts, you need to add images as raw HTML inside your Markdown files. The README explicitly states that you will need HTML in your Markdown in order to add CSS classes to images.

What is the difference between Gatsby London and the Ghost London theme?

Gatsby London is a port of the Ghost theme, meaning it recreates the same visual design using Gatsby's React components and the Gatsby build system. Instead of running on the Ghost publishing platform, it compiles Markdown content into static files.