Develop casper theme on linux / npm/node/grunt/gulp/local/global nightmare

Themes
11

Ghost theme dev is a little different from React/Gatsby, since you have a server running.

When you run ghost start, your local Ghost blog will run (it will tell you where, usually http://localhost:2368), and when you run yarn dev, your theme watcher will run. The default Casper theme doesn’t have LR, but it’s not too hard to add - here’s a code snippet from Gulp I’m using on a non-ghost project:

const {task, watch,  series} = require('gulp');
task('dev', series('default', function devServer() {
	const liveReload = require('browser-sync');
	watch('./src/**/*.css', series('css')).on('change', liveReload.reload);
	watch('./src/**/*.html', series('html')).on('change', liveReload.reload);

	liveReload.init({
		server: {
			baseDir: './dist/',
			directory: true,
		}
	})
}));

You’re going to have to make a few changes to get that to integrate with the default casper css, but it’s a start.

In response to How should I theme dev, here’s what I do:

  1. Fork starter or casper.

  2. Set up a local installation of Ghost

  3. Navigate to the themes folder - cd content/themes

  4. Clone your forked them git clone {git-url} my-awesome-theme

  5. Make the theme yours (don’t forget to commit!)

  6. When you’re ready for automated deployments to your site, add the secrets to your Github Repo (since both Starter and Casper use action-deploy-theme)

    GHOST_ADMIN_API_URL
    GHOST_ADMIN_API_KEY

1 Like