Tutorials → Most helpful • 2 min read

How to build CSS files

Learn how to build CSS files in a Ghost theme using a development tool called Gulp, so you can make stylistic updates to your theme.

Have you ever edited a CSS file in your Ghost theme and then wondered why those changes didn't show up on your site? You probably missed the important build step.

In this tutorial, you'll learn how to use the development tool Gulp to build CSS, so that you can make stylistic changes to your theme.

🚧

If you're only looking to make minor updates to a theme, code injection may be enough.

What's Gulp?

Gulp is a tool for streamlining your CSS, which is what determines your theme's style. It's a developer tool that makes your code more consistent and compatible.

Nearly every website has CSS, and Ghost themes are no different – they rely on CSS to provide layout and style.

All of the free and official Ghost themes and many premium themes use Gulp to compile CSS files. By learning just two commands, you'll have the knowledge you need to customize any theme that makes use of Gulp.

🚦

The instructions in this tutorial will work with all official Ghost themes. With custom themes, YMMV.

How to update CSS and JS

Navigate to the theme's folder in your terminal. If you're using VS Code as your code editor, then you can use its built-in terminal.

If you haven't installed Node, you'll need to install it first. Then, install Gulp and any other required software for your theme (dependencies),
typing the following command in the terminal and hit enter.

npm install

Once dependencies are installed, process the CSS to reflect the changes you made by running:

npm run zip

This command tells Gulp to pull together the changes made in your CSS files, optimize them, and add everything to a zip file located in the theme's dist folder.

The video below shows the commands in action.

0:00

Running npm install and npm run zip

You only need to run npm install once to download the necessary dependencies in each theme. After that, just run npm run zip whenever you're making stylistic changes and want to upload a new version of your theme.

All that’s left to do now is to upload the zip file in Ghost Admin. Refresh your site and voilà – your changes are active!

Conclusion

Knowing how to use a development tool like Gulp is essential for more advanced Ghost theme development – and you now have that knowledge!

You are well on your way to creating your own version of an official Ghost theme or even creating a theme entirely from scratch. Come, learn, and discuss the process in our Forum with creators and developers from around the world.