The right web development tools can save time and energy. This tools can also make the work more efficient.

Web development tools have come a long way. We can use powerful tools and libraries to improve our workflow and make life easier. So, here are the most important tools we use in our Ghost theme development workflow.

Ghost

Obviously. Ghost can be installed locally and with the version 1.0.0 it's easier than ever to do this. Of course, you need a supported Node.js version installed on your local machine. We already talked about installing Node.js in a previous article talking about how to customize our themes.

Now we can install Ghost-CLI, which is a tool that helps with installing and managing Ghost. For this run:

npm install -g ghost-cli

Now that we have the Ghost-CLI we can simply run:

ghost install local

This will install Ghost in the folder that the command was ran and setup the blog development mode. To start/stop Ghost the commands are simple:

ghost start
ghost stop

VS Code

Visual Studiu Code combines the simplicity of a source code editor with powerful developer tooling. We changed from Sublime after reading about VS Code and we never looked back. It's really great.

Additionally, there are a lot of plugins that can improve your workflow.

Checkout this list from Shopify with some of the best extensions for VS Code.

Gulp

Gulp is a tool that basically automates several tasks that otherwise would be painful to do every time.

We already mentioned Gulp in a previous article talking about how to customize our themes. There is already explained the installation part, so we will not talk about that here.

Most of the time we use Gulp for the following tasks:

  • Do Sass processing
  • Combining and optimizing assets like CSS, JavaScript
  • Watch for change in your files and act on it
  • Automatically reloading the browser when a file is saved

This is how a basic task looks like:

gulp.task('name', function() {
    //implementation of the task
});

For detecting changes in files we can use the watch method of gulp. This is a standard part of the Gulp so there is no need for loading new module. The method takes as arguments: source to be watched, and a task to be triggered after change. So we can define task like this:

gulp.task('watch', function() {
  gulp.watch('scripts/*.js', ['js']);
  gulp.watch('sass/main.scss', ['sass']);
});

Sass

Sass is a CSS preprocessor, practically it is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster.

Some advantages of preprocessors:

  • variables (even though CSS is catching un in this regards, with CSS custom properties)
  • nesting: it's excellent for reducing the amount of code you need to write, it's a good practice to do not go more than 3 levels deeper
  • importing: @import allows you to import your other sass files into the current file
  • mixins: Mixins are great for simplifying complex code and making it reusable and dynamic

For example, if you need to include the vendor prefixes, you can use a mixin instead. Take a look at this example for border-radius:

Example of sass code:

// Variables
$font-size: 16px;
$brand-color: #343434;

// Mixins
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

// Using mixins
@include border-radius(5px);

// Include other sas files
@import 'some-othere-sass-file';

Cmder

Cmder is an opensource console emulator for windows.

What I like the most about it is it's simplicity and support for unix/linux like bash running on windows.

Bitbucket

Bitbucket is a web-based hosting service for source code and development projects. Not as popular as Github but personally I really like the user interface and one of the main reasons I started using it was because of the unlimited number of private repos.

Digitalocean

DigitalOcean is a cloud computing vendor that offers an Infrastructure as a Service (IaaS) platform for software developers. DigitalOcean is very popular with open source developers and basically this is how we found them.

Their offer is quite good considering the price and quality of services.

Tags:#ghost theme#ghost development#ghost tools