Ghost Tips & Tricks #7 / Tools I Use to Develop, Edit and Deploy Ghost Themes

Marketplace
1

Hello everyone,

This is the seventh issue of Ghost Tips & Tricks. I will be happy to share with you some practical Ghost tips that I find useful. Brought to you by Aspire Themes .

In this issue, I would like to share the tools I use to build Ghost themes professionally. I will divide it into 4 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. 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. The purpose of this plugin is 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 theses 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 in size 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.

  1. Select the theme folder.
  2. Right-click to bring up the pop-up menu.
  3. 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 did 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 Ghost Tips & Tricks #3 / Deploy Your Ghost Theme Using Github Actions

My Current Setup

In case you are wondering what my current environment set up is. The packages version I use, check 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 macOS.

That’s it for today and I hope you find this useful. Feel free to share what tools you are using to edit and develop your theme which makes your life easier.

Checkout previous parts of the Ghost Tips & Tricks series:

Also, I started a Ghost Websites Inspiration series share inspiring websites created with Ghost. I hope you can find it inspiring and useful too.

Stay safe!

Ahmad

5 Likes