Ghost Themes Local Development Setup

Getting up Ghost locally

1. Install Ghost-CLI with npm install ghost-cli@latest -g
2. Install Ghost: cd to an empty folder, then run ghost install local
   • Once the install is finished you’ll be able to access your new site on http://localhost:2368 and http://localhost:2368/ghost to access Ghost Admin
   • ghost stop to stop Ghost
   • ghost start to start Ghost
   • ghost log views logs
   • ghost ls to list all running Ghost blogs
   • ghost help for help

:::link-preview
url="https://ghost.org/docs/install/local/"
title="How to install Ghost locally on Mac, PC or Linux"
description="A detailed local install guide for how to install the Ghost publishing platform on your computer running Mac, PC or Linux. Ideal for Ghost theme development."
author="Ghost - The Professional Publishing Platform"
thumbnail="https://ghost.org/images/meta/Ghost-Docs.jpg"

Set up theme dev server

1. Go to local Ghost Admin > Design(http://localhost:2368/ghost/#/settings/design) and upload the theme you want to start with.
2. The theme should then shows up in the folder /content/themes/<your_theme>
   • Optionally, you can version control this. You probably should.
3. In this folder, do yarn install to install all the dependencies, then yarn dev to start the dev server (auto compiles /assets/css/ to /assets/built.

Making changes to the theme

To test everything is working at this point. Let's make a simple but obvious change - let's remove the banner on the home page:

1. In the default theme (Casper) in /content/themes/casper.
2. In index.hbs, add class .home-header-hide to the site-header div element (see here)
3. Then add .home-header-hide { display: none; } to the bottom of assets/css/screen.css. (see here)

The before (left) and after (right) of the edits look like the following

:::gallery
images=[{"src": "/images/blog/ghost-dev/1_image-3-1.png", "alt": ""}, {"src": "/images/blog/ghost-dev/2_b31ed8b6-6602-4e2d-b373-4eb22c1c7961.png", "alt": ""}]
caption="Before (left) and after (right) of the edits"

Now you can continue to make changes to the css and hbs files and see the changes life in the local dev site.

Deploy

Once you finished changing things, in the theme folder /content/themes/<your_theme>

• git commit to version control your theme
• yarn zip to create /dist/<your_theme>.zip and upload it to your production site.

Pro-top: Github Actions for auto deployment

You can use Github Action to automatically deploy your theme on commit. See instructions here

:::link-preview
url="https://github.com/marketplace/actions/deploy-ghost-theme"
title="Deploy Ghost Theme - GitHub Marketplace"
description="Build & deploy a theme to your Ghost site"
author="GitHub"
icon="/images/blog/ghost-dev/3_favicon.svg"
thumbnail="/images/blog/ghost-dev/4_506edf00-edce-11e9-8fc8-675230eeb8fb"

See here for more Ghost editing tips: 👇

:::link-preview
url="https://rd.me/tag/using-ghost/"
title="Using Ghost - Ran Ding"
description="Notes on using Ghost platform."
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/ghost-dev/5_favicon.png"
thumbnail="/images/blog/ghost-dev/6_jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg"