Theme Development Setup with Docker

Create a Theme with a Ghost Docker container.

Prerequesites

First make sure to have docker and docker-compose installed. These will be used to run the Ghost instance for the theme development inside of a container.

Installation and Setup

git clone https://github.com/bastigw/gtdd.git theme-name # First of all clone this repository.
cd theme-name

npm install # Install all Dependencies

npm run dev # Start gulp to watch files and build theme into docker-mount directory

docker-compose up -d # Start docker container. Mounts to local docker-mount directory

Default ghost port is 9090. To change it edit docker-compose.yml. If you change the port and do not edit the browser-sync initialization in the gulpfile hot reloading will not work.

Changes that you now make in the source directory should be updated. The default port for hot reloading is 3000.

Go to http://localhost:3000/ghost/. Follow the instructions until you are on the admin page. Now go to http://localhost:3000/ghost/#/settings/design and at the bottom activate your theme.

Configuration

Make sure to edit the package.json.

This theme comes with tailwind.css. If you do not want to use tailwind remove all tailwind specific lines from gulpfile.js

Casper Theme

The default theme files are from the official Casper Theme.

A few files were modified:

• gulpfile.js: Added serveDocker function. This function builds the theme and stores it in the docker-mount directory

• package.json: Livereload dependency was swapped for browser-sync. Tailwind was added.

For more information about developing a theme check out the Ghost Theme API documentation

Contributors

• Maximilian Ehlers: with his gotede repository
• Casper Theme Contributors

Copyright & License

Copyright (c) S. Bauer - Released under the MIT license.