Tools I Use to Develop, Edit and Deploy Ghost Themes

Ahmad Ajmi — Fri, 05 Mar 2021 13:52:03 +0000

In this issue, I would like to share the tools I use to build Ghost themes professionally at Aspire Themes.

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.

1) 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.

2) Command Line

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

3) Zip

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.

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.

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. In this case, we are excluding 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 at all 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.

Select the theme folder.
Right-click to bring up the pop-up menu.
Choose Compress "filename".

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

4) Deployment

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

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 set up is and which package versions I use, take a look at the following:

$ node -v
v10.16.0

$ npm -v
6.14.8

$ bower -v
1.8.8

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

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

I'm using a macOS Big Sur.