This post is a follow-on from How to Use Capistrano 3 for Ghost Theme Deployment, so please read that first.
The aim of this post is to introduce SASS to the workflow instead of vanilla CSS.
I followed this excellent blog post here but I will describe what specific changes I made to my local project.
First off, as the post points out, you need to install the SASS gem both to your local machine and your production server.
gem install sass
When installing on production, the main thing to watch out for is to install it as the
deploy_user and not
The problem I had is that my specific deploy user didn't have permission to write to the location where rbenv installs its gems so if you are using rbenv or rvm then that is something to watch out for.
I simply did
sudo gem install sass
and that solved the problem.
The next thing was to follow the steps from the blog post to create the
.scss files and also untracking the existing
screen.css and deleting the local copy once we have everything we need in the sass stylesheets.
The problem we will have now is that git doesn't track empty directories so we will need to update the
deploy.rb to create the
assets/css directory when we deploy.
To build it locally if you are doing local development you can do the following from your theme root directory:
sass assets/sass/input.scss:assets/css/screen.css --style compressed
You can add the
--watch option to continually monitor for changes.
We then need to update the
.gitignore file so that
.map files can't accidentally be committed:
Capfile config/ .sass-cache/ *.css *.map
The last thing to do is then update the
execute statements in
# symlink REVISION file execute 'sudo ln -sf /var/www/path_to_ghost_install/content/themes/theme_name/current/REVISION /var/www/path_to_ghost_install/content/themes/theme_name/REVISION' # create css directory for our compiled stylesheet to go in execute 'sudo mkdir /var/www/path_to_ghost_install/content/themes/theme_name/current/assets/css' # symlink all the files from the current release to the theme root execute 'sudo ln -sf /var/www/path_to_ghost_install/content/themes/theme_name/current/* /var/www/path_to_ghost_install/content/themes/theme_name' # chown everything to be owned by our ghost user and not the deploy user execute 'sudo chown -R ghost_user:ghost_user /var/www/path_to_ghost_install/content/themes/theme_name' # compile the css stylesheet from our sass files execute 'sudo sass /var/www/path_to_ghost_install/content/themes/theme_name/current/assets/sass/input.scss:/var/www/path_to_ghost_install/content/themes/theme_name/current/assets/css/screen.css --style compressed' # restart the forever process execute 'sudo forever restart /var/www/path_to_ghost_install/index.js'
Don't forget to push your changes to your git repo before deploying.