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

**URL:** <https://forum.ghost.org/t/what-would-be-the-best-way-to-get-started-with-the-theme-development/31164>\
**Category:** Themes\
**Created:** [July 6, 2022, 3:36am UTC](https://forum.ghost.org/t/what-would-be-the-best-way-to-get-started-with-the-theme-development/31164 "2022-07-06T03:36:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![zolbayar](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/zolbayar/32/18064_2.png) [@zolbayar](https://forum.ghost.org/u/zolbayar)\
**Post date:** [July 6, 2022, 3:36am UTC](https://forum.ghost.org/t/what-would-be-the-best-way-to-get-started-with-the-theme-development/31164/1 "2022-07-06T03:36:43Z")

</div>

I’d like to modify the [Starter theme](https://github.com/TryGhost/Starter) 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](https://github.com/TryGhost/action-deploy-theme). But how about forking a theme and making that run on a local instance?

[The documentation says](https://github.com/TryGhost/Starter#development):

```auto
# Install
yarn

# Run build & watch for changes
yarn dev

```

And what it does is

```auto
$ 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](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/3/d/3d6af2e463edc205720d8b227a6fb3f4c2729929.png)

Is that expected? 🤔

---

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [July 6, 2022, 4:36pm UTC](https://forum.ghost.org/t/what-would-be-the-best-way-to-get-started-with-the-theme-development/31164/2 "2022-07-06T16:36:13Z")

</div>

> [@zolbayar](#):
>
> Then push them into a production instance as well. Is that possible?

Yes, using the [Deploy Ghost Theme](https://github.com/marketplace/actions/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](https://github.com/TryGhost/Starter/blob/main/members/signup.hbs) page. You will need to fix these errors or just delete that file if this is something you don’t want.

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [July 7, 2022, 2:48am UTC](https://forum.ghost.org/t/what-would-be-the-best-way-to-get-started-with-the-theme-development/31164/3 "2022-07-07T02:48:26Z")

</div>

Hey @zolbayar,

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

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [July 7, 2022, 7:01am UTC](https://forum.ghost.org/t/what-would-be-the-best-way-to-get-started-with-the-theme-development/31164/4 "2022-07-07T07:01:20Z")

</div>

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

> **[How to update CSS in a Ghost theme](https://ghost.org/tutorials/build-css-files/)**
>
> Learn how to build CSS files in a Ghost theme using a development tool called Gulp, so you can make stylistic updates to your theme.

---

<div class="post-metadata">

**Author:** ![zolbayar](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/zolbayar/32/18064_2.png) [@zolbayar](https://forum.ghost.org/u/zolbayar)\
**Post date:** [August 17, 2022, 8:57am UTC](https://forum.ghost.org/t/what-would-be-the-best-way-to-get-started-with-the-theme-development/31164/5 "2022-08-17T08:57:56Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [August 17, 2022, 3:52pm UTC](https://forum.ghost.org/t/what-would-be-the-best-way-to-get-started-with-the-theme-development/31164/6 "2022-08-17T15:52:34Z")

</div>

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](https://ghost.org/docs/install/local/)

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.

---

<div class="post-metadata">

**Author:** ![zolbayar](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/zolbayar/32/18064_2.png) [@zolbayar](https://forum.ghost.org/u/zolbayar)\
**Post date:** [August 18, 2022, 1:19am UTC](https://forum.ghost.org/t/what-would-be-the-best-way-to-get-started-with-the-theme-development/31164/7 "2022-08-18T01:19:04Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![zolbayar](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/zolbayar/32/18064_2.png) [@zolbayar](https://forum.ghost.org/u/zolbayar)\
**Post date:** [August 18, 2022, 7:46am UTC](https://forum.ghost.org/t/what-would-be-the-best-way-to-get-started-with-the-theme-development/31164/8 "2022-08-18T07:46:43Z")

</div>

Yes, that was it. Thanks @RyanF

And thanks @minimaluminium, the error went away 🙂

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [August 18, 2022, 4:23pm UTC](https://forum.ghost.org/t/what-would-be-the-best-way-to-get-started-with-the-theme-development/31164/9 "2022-08-18T16:23:40Z")

</div>

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 🤕

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:

```bash
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.
