How to customize our Ghost Themes

How to customize our Ghost Themes

Nowadays there are a lot of tools that help a developer in creating great products easier. We also use such tools, to be more productive and to offer better products.

In order to customize our themes you will have to use some of these tools. So let’s take a look at them.

npm/Node.js

What is npm? npm makes it easy for JavaScript developers to share and reuse code, and makes it easy to update and maintain code.

npm is installed and distributed with Node.js, which basically means if you download Node.js, you automatically get npm installed on your computer.

npm is a separate project from Node.js, and it could be more frequently updated. To update your npm, type this into your terminal:

npm install npm@latest -g

This is the most important thing you have to install.

Gulp

gulp is a tool for automating tasks in development workflow, so developers can focus on building something.

Gulp can be used to automate tasks such as:

  • Bundling and minifying libraries and stylesheets.
  • Refreshing your browser when you save a file.
  • Running code analysis
  • Less/Sass to CSS compilation
  • Copying modified files to an output directory
  • and much more..

To install gulp globally (so the gulp command can be run from any project), run the following command:

npm install gulp-cli -g

Then to install gulp locally to a specific project, go to the project folder and run the following command:

npm install gulp --save-dev

This installs Gulp as a development dependency and the “devDependencies” section of package.json is updated accordingly.

Customizing

We assume you have Ghost installed locally already and the theme folder is copied to the Ghost\content\themes folder. Now to customize the theme, go into the theme folder and run the command:

npm install

This command will install all necessary dependencies, like different gulp tools and open source code snippets used in the theme.

Within the theme gulp.js file there are different gulp commands defined, such as:

gulp.task('sass', function () {
  ...
});

gulp.task('scripts', function() {
  ...
});

gulp.task('watch', function() {
  ...
});

Each gulp task fullfills a specific function. Ex. gulp sass will compile all the sass files into one minified css file. To run one of the gulp commands you just write gulp and the task name into the command line and run it.

gulp sass
gulp scripts

The watch task is a bit more special. This will look for any changes in sass, js and other files and rebuild the assets when changes are saved.

// Watch for changes in files
gulp.task('watch', function() {
  // Watch .js files
  gulp.watch(asset_src + 'js/scripts/*.js', ['scripts']);
  // Watch .scss files
  gulp.watch(asset_src + 'sass/*/*.scss', ['sass']);
  // Watch app.min.css
  gulp.watch(asset_src + 'css/app.min.css', ['browsersync:reload']);
  // Watch app.min.js
  gulp.watch(asset_src + 'js/app.min.js', ['browsersync:reload']);
  // Watch .hbs files
  gulp.watch('**/*.hbs', ['browsersync:reload']);
});

Browsersync will refresh the page once the changes are done.

From this point when you change any file and save it, you should see the changes in the browser.