To edit and compile a ghost theme you need a few things.

  • An suitable operating system. Either Ubuntu or macOS
  • A text editor. I use Atom
  • Node.js
  • Gulp.js
  • Yarn

Step One
If you are operating out a Windows 10 then you need to do a few things.

The first thing is you should do is set up a dualboot Windows 10/Ubuntu 18.0 enviroment on your machine. There are a number of help guides online on how to do this and I will not go into any detail on how to set up a dual boot.

Once inside Ubuntu you need to install the Atom text editior. This is possible through the Ubuntu Software store. In the top right corner click the magnifing glass and search Atom.


Step Two
Now want to edit some CSS in the Casper theme. To do that you need to download the the file from your website. Once you download it you need to extract the file either on file on your desktop or a file of your choice. I called my file "casper-j".

Now that its extracted you can add the project folder to you Atom text editor. You can right click folder pane and select "Add Project Folder" or you can use the shortcut Ctrl-Shift-A.

Select the folder you just extracted the Casper theme files to.
It should look like this.

Now you can edit the style of the Casper theme!!!

Most of the important CSS is located in the assets/css/style.css text file.
The big catch is that if you edit the style.css and then zip and upload back to the server. You will not see any changes.

This is because the style.css is complied using the Yarn package manager.

You can find this in the file.

Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node, Yarn and Gulp installed globally. After that, from the theme's root directory:

$ yarn install
$ yarn dev

Now you can edit /assets/css/ files, which will be compiled to /assets/built/ automatically.

The zip Gulp task packages the theme files into dist/<theme-name>.zip, which you can then upload to your site.

$ yarn zip

Step Three

Install on your website