Tools I Use to Develop, Edit and Deploy Ghost Themes

In this issue, I would like to share the tools I use to build Ghost themes professionally. I will divide it into four sections. The editor, the command-line tool, producing the zip file to be ready to upload and an alternative way to deploy the theme to your website using GitHub.

Editor

I use Visual Studio Code as my main code editor. It is free, open-source, and runs on all operating systems. A good alternative is Sublime Text.

Command Line

I use iTerm2 as a command-line tool on macOS Monterey. It is an open-source replacement for the macOS Terminal. You are OK to use the built-in Terminal if you don’t want the extra features that iTerm2 provides.

Zip Theme Files

I use gulp.js as an automation toolkit to automate my development workflow. One of the available add-ons is gulp-zip. This plugin aims to compress the theme files into a final zip file ready for upload.

My current gulp zip task is something like that.

gulp.task('zip', function () {
  return gulp.src([
    './**',
    '!node_modules/**',
    '!bower_components/**',
    '!.git/**',
    '!.DS_Store'
  ], { dot: true })
  .pipe(zip('NAME.zip'))
  .pipe(gulp.dest('../'))
  done();
});

So, with the gulp zip command, I can export the final theme file.

Change NAME to your theme directory name.

If you are not using gulp and want a simple command line to zip the theme, you can use something like that.

zip -r NAME.zip NAME -x '*node_modules*' '*bower_components*'

What comes after the -x option is a way to exclude different directories or files. This is useful to exclude development files that are not important in production. We exclude the node_modules and bower_components directories from the final zip file. Not every theme will have these directories. But If you are using nvm, bower, or git to develop your theme, there is no need to include these in the final theme file. In one case, they will be large and not required to install your theme successfully.

If you are not using gulp or don’t have any files to exclude, you can compress the theme by doing the following.

1. Select the theme folder.
2. Right-click to bring up the pop-up menu.
3. Choose Compress “filename”.

The above steps are applied to macOS, but you can find something similar for other operating systems.

Deployment

I use the Deploy Ghost Theme GitHub action. This tool helps with theme deployment. You can now deploy your theme to your website every time you push a new commit to your theme GitHub repository. This means that instead of zipping your theme, upload it to your website every time you make a change.

I wrote a step-by-step guide about it at How to Deploy Your Ghost Theme Using Github Actions

My Current Setup

In case you are wondering what my current environment setup is and which package versions I use, take a look at the following:

$ node -v
v16.14.0

$ npm -v
8.3.1

$ bower -v
1.8.14

$ gulp -v
CLI version: 2.3.0
Local version: 4.0.2

This environment works well for running Ghost and also for theme development.

I’m using a macOS.

That’s it for today, and I hope you find this helpful.