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 root
.
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 .css
and .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 deploy.rb
# 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.