Start Development

Follow this guide if you want to make changes to the source code. If you just want to install the Yuuga theme, go to the theme installation.

Prerequisites

• Node.js v20.x LTS
• NPM to manage packages (usually included in Node.js installation)
• Local Ghost install

First time using a Ghost theme?

Ghost uses a simple templating language called Handlebars for its themes.

We've documented the Yuuga theme pretty heavily so that it should be possible to work out what's going on just by reading the code and the comments. Ghost also have a robust set of resources to help you build awesome themes:

• The official theme documentation is the complete resource for everything you need to know about Ghost theme development
• Tutorials offer a step-by-step guide to building the most common features in Ghost themes

Preparation

After you have purchased the Yuuga theme, you will get a yuuga.zip file. To get started to edit the source code follow the steps below.

1. Extract the yuuga.zip to a folder, let's say yuuga

   WARNING

   Some unzip tools will default extract into the current folder, and others will extract into a new folder. So be careful.

2. Symlink the folder to the local Ghost install, for example: ln -s /path/to/yuuga /ghost/content/themes/yuuga. Or you can directly put the folder into the /ghost/content/themes folder
3. Go to the yuuga folder and run npm install to install all dependencies

Now, you are ready to modify the source code.

Development

Below are useful commands to support your development.

Start development mode

To see the changes you make to the source code automatically in your browser, run the command below.

$ npm run dev

Press ctrl + c in the terminal to exit development mode.

Build the theme

Compile the source code for production.

$ npm run build

ZIP the theme

Create a zip archive, yuuga.zip, so you can upload the theme from the Ghost admin.

$ npm run zip

Test the theme

Test the theme compatibility with the latest Ghost version.

$ npm run test