Using Bower with Ghost


Bower is a great tool to install and manage package updates. If you don't want to use a CDN for assets like bootstrap or other tools, bower can help save you from constantly having to download new files to keep your code up to date. Here is how you can install and use bower with Ghost.

  1. Open up a terminal or command line window
  2. cd to your theme directory Ex:

    cd /var/www/ghost/content/themes/casper
    
  3. Install bower (might need sudo in front of the following command):

    npm install -g bower
    
  4. Now, you can install individual packages by using the command, bower install [whatever], but it is much easier to manage in the long run to create a bower.json file that you add all your packages to. So, now using either the command line, or a text editor create a bower.json file in your themes root folder.

  5. Add the packages you want to install and manage in json format. The names you put in this file, you can find either by searching on their website (http://bower.io/search/), or by using the command bower search [whatever].

    Here is an example bower.json file:

    Instead of latest for all the dependencies, you can specify which version, or version tree you want to download. Here is more information on packages and version numbers (http://bower.io/docs/creating-packages/#bowerjson)

  6. Now that we have the bower.json all setup, we need to specify to bower where we want all of these packages sent. In order to do that, we need to create a file named .bowerrc (yes, the name of the file does need to start with a period).

    In this file, we are going to tell bower where to install the packages. Usually it is a good idea to have all of these files located in /assets/bower_components, so make your .bowerrc file look like this:

  7. Now that all the files are in place, lets run bower to install those dependencies:

    bower install
    
  8. bower install will install all of the packages in your bower.json file into the directory you specified. Since we placed the files inside our assets/bower_components folder, we can now link to these files using Ghost's asset helper.

    So, in your theme, to add bootstrap, the line of HTML would look like this:

  9. And thats it! If you add more packages, just run bower install again, or if you want to update your assets, just run bower update.

Again, this is a very handy tool for keeping your dependencies up to date and helping to automate deployment. Hope that helps! Good luck!

Instead of `latest` for all the dependencies, you can specify which version, or version tree you want to download. Here is more information on packages and version numbers (http://bower.io/docs/creating-packages/#bowerjson) 6. Now that we have the `bower.json` all setup, we need to specify to bower where we want all of these packages sent. In order to do that, we need to create a file named `.bowerrc` (yes, the name of the file does need to start with a period). In this file, we are going to tell bower where to install the packages. Usually it is a good idea to have all of these files located in `/assets/bower_components`, so make your `.bowerrc` file look like this: 7. Now that all the files are in place, lets run bower to install those dependencies: bower install 8. `bower install` will install all of the packages in your `bower.json` file into the directory you specified. Since we placed the files inside our `assets/bower_components` folder, we can now link to these files using Ghost's asset helper. So, in your theme, to add bootstrap, the line of HTML would look like this: 9. And thats it! If you add more packages, just run `bower install` again, or if you want to update your assets, just run `bower update`. Again, this is a very handy tool for keeping your dependencies up to date and helping to automate deployment. Hope that helps! Good luck!