Gotede - quickly create a ghost theme development environment
When setting up a new theme for this blog, I ran into the issue of quickly setting up a development environment on my local machine to test out ideas.
So I went on to duckduckgo.com and quickly found this blog article.
Taking it as an inspiration I wrote a small script to publish on npm to make it easier for future themes and other people as well. You can find it at https://github.com/b-m-f/gotede.
This blog post will summarize how to get started with it.
The first thing you will need to do is to install the script with
npm install -g gotede.
Now all you need to do is to switch to a folder in which the theme folder should be created. For example your home directory with
gotede will ask you for the name of your new theme and which port the Ghost developemt instance should run under on your localhost (4000 f.e.).
Once youve entered your answers a new folder will be in that directory, with the name of the theme you entered. Go into that folder with
cd THEME_NAME_YOU_ENTERED and start up the instance with
docker-compose up -d.
For this example I am going to continue with a supplied port number of 4000.
To make sure that everthing worked correctly open your browser and go to
http://localhost:PORT_YOU_PROVIDED, so in my case
You should be greeted with the familiar skeleton instance of ghost, looking like this:
Setting up the Ghost instance
If everything worked, you should head over to
http://localhost:4000/ghost to set up your admin account. Just follow the steps shown on the website. You can just use a test account here, since it will only be running locally.
Creating the theme and activating it
For this step make sure that you are still in the folder that gotede created for you and where all your files for the theme are located in.
This will be where you do the actual work.
To get everything running you will first need to install all the required npm dependencies. Do this with
Once it is completed we can start the local development server that will take care of compiling our css and supplying the ghost instance with our theme with
npm run start.
Since the theme is newly added to the instance, we will have to restart it with either
docker restart THEME_NAME_YOU_PROVIDED or
docker-compose restart so that it becomes available.
As a last step head over to
http://localhost:4000/ghost/#/settings/design and activate your theme at the bottom of the page:
Developing the theme
npm run start running in the terminal you can now start editing your theme according to the official docs.
Have fun, and feel free to improve the script and the skeleton theme from gotede by submitting a Pull Request to the Repo.