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
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
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