This theme is open source and you are welcome to adapt it to your own needs, or to contribute changes to the main project. See the github project for details:

Making changes to the theme

The first thing to do is to install the version of Node that is recommeded by Ghost.

The easiest way to install Node is to use nvm (the node version manager). Once installed nvm makes it very easy to install and switch between different versions of npm:

 
nvm use 16
>Now using node v16.9.1 (npm v7.21.1)
node -v
>v16.9.1
nvm use 14
>Now using node v14.18.0 (npm v6.14.15)
node -v
>v14.18.0
nvm install 12
>Now using node v12.22.6 (npm v6.14.5)
node -v
>v12.22.6

For instructions on how to install a local Ghost development environment, see the official documentation.

The following guide is aimed at Mac and Linux users and takes you through how to customise the theme and to release the changes to your web site. Note that you will need to amend the file paths to reflect the locations on your machine.

To begin, download the latest release of the theme and unzip it on your local machine or - if you have forked the repository - you can clone your new repository instead.

You then need to install the node modules that are required by the theme. The theme uses the npm package manager, which is installed automatically with Node:

cd ~/dev/themes/transmission

# Install
npm install

... which will install the development and production dependencies listed in package.json into transmission/node_modules.

Finally, create a symbolic link to the themes directory of your local Ghost development installation (this will allow you to select the theme via the Ghost admin interface):

ln -s ~/dev/themes/transmission ~/dev/www/ghost/content/themes

Before making any changes, run the following command in a terminal window

# Run build & watch for changes
npm run dev

The npm run dev command starts up a file watcher that will rebuild the theme assets whenever you make a change to the source code (see scripts/theme-build for details). The command also starts a live reload service.

Live reload is an approach to development where you have your browser open and visible at the same time as your code editor. The browser automatically reloads when you save changes to the source code. This means you don't have to manually switch to your browser, reload, and then switch back to your code editor after every change. If you would rather not use live reload, use npm run watch rather than npm run dev.

You can use any code editor you choose. I use Visual Studio Code which can be used with the handy Ghost VS Code extension.

Installing the changes

The theme is built using a build tool called esbuild - this tool does things link minimising and bundling the css and JavaScript code used by the theme and runs automatically whenever you use the npm run dev command. To create an installable zip file that contains all the built assets needed to run the theme on a external web site, use the npm run zip task. The built files, including your latest changes, will be added a single zip file located at dist/transmission.zip and this can be installed on your site. You can read about automating the release process in the next section.

Release utility

If you have forked the theme to make your own changes, you can automate the deployment of new versions using a combination of therelease utility included with the theme and Github workflows.

The release javascript util is used to create new GitHub releases from the command line. The release note will contain a list of all the changes you have committed since the previous release and a zipped archive of the latest version of the theme assets will be uploaded along with the note. This zip file can be used by others to install the newly released version of the theme manually. If you want to automatically deploy the released changes to your own website you can use the GitHub workflow described below.

Before using the theme-release utility you need to do the following:

create a subdirectory in your local theme repo directory called changelogs
Create a personal access token in your github account: Developer settings> Personal Access Tokens > Tokens (classic). The token needs 'repo' permissions.
Assign the token to a local environment variable called GITHUB_TOKEN (this can be set in your ~/.bashrc file by adding a line that says export GITHUB_TOKEN="your-github-token")
install gscan using npm install -g gscan

The script will create releases in the repository identified in the project's package.json file, so make sure you have the correct GitHub repo listed and that the token created above has the necessary 'repo' permissions:

"repository": {
        "type": "git",
        "url": "https://github.com/your-github-account/transmission.git"
},

Usage

To create a release of all the changes pushed to GitHub since the previous release:

npm run bump-patch # bump the (patch/minor/major) version and commit changes.
npm run full-release

The npm run full-release command does the following:

gscans the theme
creates a changelog based on GitHub commits since the previous release
creates an updated dist/transmission.zip file
creates a github release with a tag based on the version in package.json
uploads the transmission.zip file to the release

use npm run draft-full-release to create a draft release.

if you prefer you can run each of these stages separately using the appropriate npm run scripts:

create-changelog
create-release
create-draft-release
upload-zipfile

use npm run to get a full list of all the npm scripts configured in package.json.

You can automatically deploy your theme to your site using GitHub Actions, as explained below.

Use GitHub Actions to deploy your theme

The transmission theme uses the Ghost GitHub integration to automatically deploy changes.

I use two workflows: the demo workflow deploys the theme to this website whenever a new release is created. The second workflow deploys the modified theme to my personal web site (smallworkshop.co.uk) whenever changes are pushed to the main branch. See the files in .github/workflows for details.

If you want to use similar automation for your sites, you'll need to create a new Ghost integration and load the credentials to github, as explained in the article below. Note the credentials are stored in the repository’s secrets (go to your theme repository on GitHub > settings> Secrets and variables > actions)

Contributing to the project

The main branch always contains the latest changes. Released versions are tagged using semantic versioning.

You should submit your pull requests to main.

Submitting Pull Requests: please provide plenty of context and reasoning around your changes.

Demo mode

The demo mode used on this site - which allows users to experiment with custom settings without having to login and use the admin tool - is built into the theme. You can enable this functionality on your own demo site by using code injection to add this script:

<script>
  /* demo mode not visible when in an iframe (e.g Ghost's marketplace)*/
  if (window.self == window.top) {
    document.documentElement.setAttribute('data-demo-site', 'true');
  }
</script>