Use GitHub Actions to Automate Your Static Site Deploys

Mark Catalano

Co-Founder, TakeShape

GitHub Actions make it easy to deploy your TakeShape SSG projects

To better integrate TakeShape's Static Site Generator into your git workflow we’ve created a “Deploy to TakeShape” GitHub action.

This action makes it easy to use GitHub’s built-in CI/CD features to trigger a tsg deploy command for events on GitHub, like whenever you push changes to a branch or create a new versioned release.

To set up this action follow these steps:

  1. Your repo must contain a TakeShape SSG project and your package.json file must include @takeshape/cli in its dependencies.
  2. In your TakeShape project set up a “Static Site” and add an API key with CI permissions.
  3. Take note of your project ID, the static site ID, the static site name, and the API key. The project ID and static site ID can be found in the URL of your newly created Static Site, e.g. https://app.takeshape.io/projects/[project-id]/sites/[site-id]/
  4. Visit the “Deploy to TakeShape” action in the GitHub Marketplace.
  5. Follow the instructions in the action listing page to add the TakeShape project secrets to the repo settings and add the ci.yml file to the repo.
  6. When your actions are green you’ve got everything successfully set up!

The Actions Workflow page let's you see all of your action runs.

The action detail page let's you see exactly what's going on in your action.

Finally, confirm that your changes have been published to the desired static site host!

Now that your action is set up following our example, whenever you push commits to your project's master branch, your template changes will automatically be published! Action are just a simple .yml,  so feel free to experiment and modify it to meet your specific needs.

This project came about from our own experience using GitHub Actions to automate the deployment of the TakeShape marketing site. When you first get started with the TakeShape SSG, the only way to deploy changes to your code is by running the tsg deploy command in your terminal. Our marketing site was deployed the same way—every time we would update a template file, we’d manually redeploy our templates. 

While the main TakeShape web application uses CircleCI for CI/CD, we weren’t using any kind of automation to deploy marketing site template changes. As our marketing needs and team grew we needed to be more rigorous in our marketing site development process, especially around deployments.

We believe that continuous improvement and experimentation is important, so we decided to try out GitHub’s Actions feature. The success of that experiment made it easy to create and share a TakeShape SSG deployment action that works for everyone.