Imagine building a car without a car factory.
Now imagine building a car, without a car factory, or any written instructions of who’s supposed to do what.
Sounds pretty silly. You’d have 1000 people running around, nobody knowing quite what they’re supposed to be doing. How many cars do you think you’d be able to produce in a day? Maybe one?
Henry Ford figured this out years ago. Automating what makes sense to automate, and giving people clear responsibilities is the difference between shipping every day and never shipping. Today we’re going to look at how we can automate deployments with GitHub actions. Automating deployments is a great way to not only make delivering new features faster and safer, but also allows us to free up engineering time and spend it on even more proactive tasks.
Today I’m going to show you how to use GitHub Actions to release our software for us on every merge to
main. We’ll be focusing on the operations (aka “Ops”) side today and not on the application code, so we’ll be releasing an already made React app. The final result will be a page that looks like this: https://jamsea.github.io/intro-to-github-actions/.
Now, in the past, setting up this flow was a bit tricky. Self-hosting Jenkins and setting up our own test runners has enough of a learning curve that it’s scary for a new engineer to dive into. Nowadays we have GitHub Actions. GitHub Actions are the robots in our software factory. Instead of painting cars and welding bolts though, they allow us to automatically run jobs when pull requests are opened, code is merged, issues are opened, etc. Any event that happens in GitHub has a hook that allows an action to run.
Create a GitHub Account
- Go to https://www.github.com and sign up for an account.
Clone the example repo
- Click fork on the top right corner.
Setup GitHub pages
- Go to https://github.com/jamsea/intro-to-github-actions/settings/pages
- Set the branch to
Create GitHub Action
- Hit the
.button on your keyboard or change
github.dev/YOUR_NAME_HEREin the address bar to open up the code editor.
package.jsonand change the homepage URL on line 5 to your GitHub username.
- "homepage": "https://YOUR_USERNAME_HERE.github.io/intro-to-github-actions", + "homepage": "https://jamsea.github.io/intro-to-github-actions", # Use your GitHub username
- Create a
.github/workflow/ci.ymlfile and paste the following in it:
name: GitHub Actions Build and Deploy Demo on: push: branches: - main jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Install test and build run: | npm install-ci-test npm run build - name: Release 🚀 uses: JamesIvesemail@example.com with: BRANCH: gh-pages FOLDER: build
Now to explain each section:
name: GitHub Actions Build and Deploy Demo on: push: branches: - main
This tells our action to run any time code is
pushed to the
jobs: build-and-deploy: runs-on: ubuntu-latest
Next we add a
jobs block. Here we’re defining a
build-and-deploy job and specifying that this job
runs-on Ubuntu Linux. In general
ubuntu-latest is a good choice for most web based projects.
steps: - name: Checkout uses: actions/checkout@v3
Next we add some steps. We’re going to call the first step “Checkout”, and we’ll use a publicly available action called
actions/checkout@v3 to checkout our code from GitHub and run it in an action.
- name: Install test and build run: | npm install-ci-test npm run build
Here we’re installing, testing, and building our code. This is an example of using bash commands inside a GitHub action. Each new command is on a separate line.
- name: Deploy 🚀 uses: JamesIvesfirstname.lastname@example.org with: BRANCH: gh-pages FOLDER: build
Finally we’re using a third publicly available action to deploy our code. Notice the branch name is the same as we set above in the GitHub UI.