Skip to content

How to Deploy a Theme From GitHub to Your Ghost Blog (With Secrets)

This article shows you how to use a public fork from Casper without exposing your private information to deploy your version of Casper to your blog with a comments plugin.

Oren Cohen
Oren Cohen
3 min read
How to Deploy a Theme From GitHub to Your Ghost Blog (With Secrets)
Photo by Luca Bravo / Unsplash

Before I discovered GitHub Actions, I created many zip files on my computer, including my comment plugins and such. Now that I'm using GitHub actions, I have forked Casper - Ghost's default theme and made the changes there, too.

Automation makes life easier! And now, with GitHub actions, I can get the latest and greatest from Casper directly to all of my sites running it.

In this article, I'll showcase the process so you can replicate it. At the end of the article, I'll also show you how to use my theme and save development time. Let's dive right in!

First, Fork Casper (or your theme of choice)

You can find Ghost's official default theme here.

Fork it as a local repo on your profile, and let's start working on it!

Create a Custom Integration on Your Ghost Site

By going to Settings -> Integrations.

At the bottom of the page, you'll see a button that says Add Custom Integration.

Author Screenshot

Create a new integration and name it however you like (preferably GitHub Actions or Github Integration, so you know what purpose this integration serves a month from now).

You'll see Admin API URL and Admin API Key on that page.

You'll need those next.

It's Time to Create Secrets

On your Repository on GitHub, you can create secrets to use in GitHub actions. Go to Settings -> Secrets on the left menu -> Add Repository Secret.

Create a secret for the Admin API URL and the Admin API Key you wrote down in the last step.

Do You Have Other Sensitive Information?

I use Hyvor Talk on my websites. It's for the comments plugin you see below this article. So, since my forked repo is public, I changed my website's ID to a placeholder so people don't accidentally use it.

The way to do so is by adding a preceding step in your GitHub Actions to replace text in your repo before deploying it to your website. In my case, I put my Hyvor Website ID in a Secret and used that secret in the workflow to replace the text with the actual ID before deploying the theme to my site.

Create The GitHub Action Workflow

Here's the actual workflow code:

name: Deploy Theme Oren Codes
on:
  push:
    branches:
      - master
      - main
jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@master
      - name: Find and Replace
        uses: jacobtomlinson/gha-find-replace@v2
        with:
          find: "HYVOR_TALK_WEBSITE_CODE"
          replace: ${{ secrets.OREN_CODES_HYVOR_WEBSITE_KEY }}
          regex: false
      - uses: TryGhost/action-deploy-theme@v1.4.1
        with:
          api-url: ${{ secrets.OREN_CODES_GHOST_ADMIN_API_URL }}
          api-key: ${{ secrets.OREN_CODES_GHOST_ADMIN_API_KEY }}
          theme-name: "casper-by-oren"
yml workflow example from author

This code says that this flow will run whenever you commit to the main branch. It will find and replace my Hyvor code in all of the relevant hbs files, and then it will use Ghost's own GitHub action to deploy the theme to my blog.

⚠️
One thing to note here is that you must provide the theme-name property when you fork Casper, as the action will not override the original theme.

Use it for Multiple sites!

I created two yml files in the repo for now: one for this very blog you're reading this on (if you're not reading it on Medium) and one for a different blog.

The only things I need to change between the files are the Secrets to ensure different sites have different themes with different comment configs!

Watch it work

If everything went smoothly, you should now see a new theme in your "Design" menu on your ghost admin. Before Activating it, download it to your computer and check that the find and replace action worked correctly and your HBS files contain the correct code for your comments.

Want to use mine?

You can fork my repo on GitHub and add the necessary secrets to make it your own. Find my Casper fork here.

Then create a workflow file just like mine and only replace the secrets with your generated ones.

Have any questions?

Write a comment below! And I'll make sure to answer to the best of my ability. Thanks for reading!

Ghost Theme DevelopmentSoftware EngineeringProgrammingGhost Blog

Comments


Related Posts

Members Public

How to Write a Switch Case in Python

Python introduced a new feature called the Match case that introduced a switch case behavior to Python code since version 3.10.6 - let's talk about it.

How to Write a Switch Case in Python
Members Public

How to Add a Comments Plugin to Your Ghost Blog?

In this guide, I'll show you how to install Hyvor Talk on your Ghost Blog, but you can replace that with any comment plugin you like.

How to Add a Comments Plugin to Your Ghost Blog?