Sign in Subscribe
Using Ghost

Ghost Themes Local Development Setup

Local development setup for Ghost themes.

Ran Ding

• 3 min read

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
How to install Ghost locally on Mac, PC or Linux
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.
Ghost - The Professional Publishing Platform


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

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

Deploy Ghost Theme - GitHub Marketplace
Build & deploy a theme to your Ghost site
GitHub
See here for more Ghost editing tips: 👇
Using Ghost - Ran Ding
Notes on using Ghost platform.
Ran DingRan Ding