Deploying Your WordPress Theme with Github Actions

I’ve been on a couple of quests recently to use my iPad as my daily driver and to explore FSE theme building.

Both of those quests collided for me as I’ve been having trouble using the code editor apps that are available for iPadOS. Thankfully, the folks over at VSCode/Microsoft/GitHub have made a way for VS Code to work in browser at vscode.dev.

Want a video version? Here you go!

https://youtu.be/WyH2UXQpTMQ

Moving to VS Code first

On my Mac, I love using VS Code, so the thought of being able to use that on the iPad was a no-brainer decision. The only problem? It currently doesn’t support the iPadOS file system.

I totally get that. It’s a bit complicated and Apple doesn’t seem to allow the type of access I would expect VS Code to need. However, VS Code does work with Github repos, so the in many cases this actually could solve two issues I was encountering.

The first, being that I was cowboy coding with Code Editor by Panic (no longer available) and saving the files via SFTP on the server. I hated this option, one I didn’t see as being a long-term viable option. But something I was willing to work through as I got myself more accustomed to writing code again and learning the ins and outs of FSE theme building.

The second issue I was trying to solve was actually around the theme.json file. I was finding issues with Code Editor by Panic not validating the json format. This meant that I was struggling with extra commas or commented-out code that would cause the entire theme.json file to not be loaded by the block editor. I was left trying to troubleshoot what was going on with little to no help from the editor. With VS Code, I expect those issues to be resolved.

I was quickly able to get up and running with Github and VS Code by adding my theme to version control and then giving VS Code access to that repo.

The next part was trying to figure out how to automate getting the repo to the server. That’s where Github Actions come in.

Getting Started with Github Actions

What I knew of GH actions was pretty simple. It’s basically a way to automate some workflows. So if you are doing any type of CI/CD or building/testing, you can use actions to automate that type of work. But you can also use Actions to deploy your code directly from Github.

That’s what intrigued me to dig further into it.

I think it’s worth mentioning that I’m not an expert in any part of this. I am only going to show you what worked for me. It took a little bit of trial and error but got something working that allows me to continue learning FSE theme building, which is what I’m focused on.

I’m sure there is more that I could do with GH Actions, but for now, I’m getting back into my somewhat familiar comfort zone of learning the theme.json file and new templating structure.

For my use case, I’m not doing any type of building. I’m literally writing to a few files, including some fonts, and that’s it. I’m not needing to do any type of NPM or submodule process. Just saving files and committing them.

If that sounds like what you might want to do, follow along. If you are doing more advanced deployments, I’m not sure if this will help you. Maybe it will though.

Ok. So the first thing you need to do is create an SSH key you can use for deployments. There’s plenty of articles that you can find about how to create this. I ended up doing this on my computer and not my iPad (something I should also blog about at another date). Github actually has a pretty great help article that you can follow along with.

Once you have your SSH key, you need to add it to your Repo’s Settings.secrets. You can do this by navigating to Settings > Secrets. Add your secret and call it DEPLOY_KEY. You’ll need to use this in your workflow file.

Alright, with that all set, let’s move to your workflow file. You next need to navigate to Actions on your repo and then choose the option to ”set up a workflow file yourself” instead of choosing one of the options they give you.

This opens up a new workflow file with some basic information and documentation around it so you are able to start writing a basic script to deploy the files.

The Script

I’m going to save you some time without needing to do some google searches. You can definitely look for other scripts and such that might help you along the way.

But as I mentioned, I wanted something simple. Grab the repo, copy the files to the server. Don’t do anything else.

I’m including the full workflow file I am using. I’ve made it into a gist for you so you could copy it into yours. I’ve tried to make the necessary comments inline of the script, so you can replace as you see fit.

Wrapping Up

Once you save your workflow file, Github will run your first action. You will want to make sure that your theme is not on the server (I forgot about that the first time) and that the SSH key is on the server so it will log in correctly.

Assuming those two things are good, you should be off to the races and able to deploy your WordPress theme to your site every time you push to your main or master branch.