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.

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!

Mục Lục

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/[email protected]
        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.