What would be the best way to get started with the theme development?

Themes
1

I’d like to modify the Starter theme and see the changes on my local ghost instance. Then push them into a production instance as well. Is that possible? I think the last step is possible with the Github Actions integration. But how about forking a theme and making that run on a local instance?

The documentation says:

# Install
yarn

# Run build & watch for changes
yarn dev

And what it does is

$ gulp
[11:31:17] Using gulpfile ~/.../content/themes/cms-template/gulpfile.js
[11:31:17] Starting 'default'...
[11:31:17] Starting 'css'...
[11:31:17] Finished 'css' after 398 ms
[11:31:17] Starting 'js'...
[11:31:18] Finished 'js' after 1.35 s
[11:31:18] Starting 'serve'...
[11:31:18] Finished 'serve' after 1.85 ms
[11:31:18] Starting 'cssWatcher'...
[11:31:18] Starting 'hbsWatcher'...

But how shall I see the changes I made on my local instance? Do I have to clone the theme repo inside ../content/themes and run yarn dev there? I actually tried that and ended up with:

image
image668×698 31 KB

Is that expected? :thinking:

2

Yes, using the Deploy Ghost Theme GitHub action.

The Starter theme seems not yet compatible with Ghost 5.0; that’s why you have these activation errors. The errors come from the signup.hbs page. You will need to fix these errors or just delete that file if this is something you don’t want.

2 Likes
3

Hey @zolbayar,

The errors are now fixed. Would you be able to pull the changes and try again?

2 Likes
4

Our Tutorials site is also a great place to go for resources for building a Ghost theme :smile: In particular, I’d check out this one:

5

Thanks @RyanF,

But it requires zipping the theme files and uploading it on Ghost admin panel. What I wanna do is to see the changes immediately on my local Ghost instance without uploading the zip :slightly_smiling_face:

6

That’s totally possible.

What you’ll want to do is run a local copy of Ghost with your development theme. How to install Ghost locally on Mac, PC or Linux

Then, in your Ghost theme, you can run npm run dev to start a dev server.

When you make changes to theme theme, you can then see those changes locally in your browser after a refresh.

7

So that means I can git clone a theme repository inside /content/themes and use that command to see the theme on local ghost instance?

8

Yes, that was it. Thanks @RyanF

And thanks @minimaluminium, the error went away :slightly_smiling_face:

9

That will work.

You have to be careful not to upload a copy of your theme, because it will overwrite your development copy, and you could lose unsaved work. I know this because I’ve done it more than once :face_with_head_bandage:

To avoid this possibility, I’ve started symlinking from a projects directory to contet/themes. That way, the theme can’t be overwritten and is separate from the Ghost instance.

To do this, navigate to content/themes and run this command, which links your theme folder to the Ghost one:

ln -s ~/themes/theme-folder .

If you output the contents of the themes folder, you should now see symlinked version of your theme. Restart Ghost and the theme will be available for activation.

2 Likes