Running Ghost in development

I’m new to Ghost and building a Gatsby project that includes a Ghost blog. I’ve downloaded and configured a Ghost theme from the store and now I want to customize the CSS of the theme. I have the source folder opened in VS Code and want to make changes to the CSS. How do I run Ghost locally so I can work on the CSS and preview the changes in the browser?

In Gatsby I can use gatsby develop or npm run dev. My Ghost theme has a package.json but no scripts. What’s the normal way to run your theme locally while working on the CSS?

Which theme are you using? Theme development is less structured than something like Gatsby since themes can choose their own build system (if any), so the answer to your question depends on the theme :slight_smile:

Just realized there is a ghost start development command. I’m using that but I don’t see my CSS changes taking effect locally.

I’m using Breek as a theme. I don’t see any documentation pertaining to styling the theme.

ghost start only starts Ghost; if the theme has a build step, that won’t be invoked by ghost start

Can you guess what build system the theme is using by looking at the dependencies? Some common build systems for themes are gulp and grunt

Inside my project’s /current/content directory there is a Gruntfile. My theme is not inside that directory, the theme is located at /content/themes/. Is that part of my problem?

Don’t worry about the current folder, that’s your installation of ghost; you don’t want to touch that :slight_smile:

Typically how would you run a Ghost theme locally with Grunt?

I’ve never set up theme development w/ grunt, but running commands is similar to gulp. You just run yarn grunt {task} or npx grunt {task} after installing dependencies