Deploying the static website on surge using GitHub actions

In this post, I will guide you through setting up GitHub actions to deploy any static site to surge. Before we begin, let’s talk about GitHub action and surge. What are they?

Github action

GitHub Actions is a continuous integration and delivery (CI/CD) tool for the GitHub flow. It is capable of integrating and deploying code changes to a third-party cloud application platform, as well as testing, tracking, and managing code changes. Third-party CI/CD technologies, the container platform Docker, and other automation platforms are also supported by GitHub Actions.

Surge.sh

Surge is a free static website host which you interact with from your command line. It makes it quick and easy to get new sites and apps online, either manually or as part of your CI build process.

Prerequisites

1. You should have a GitHub account.
2. You should have a surge account. step by step guide
3. You should have a static website.

Create a new surge account

If you don’t have a surge account, you can create one by following the steps below. It can be done from your command line.

1. Install surge by running the following command in your terminal.

npm install --global surge

1. Run the following command to login to surge.

surge login

1. Enter your email address and password when prompted.
2. You will receive a verification email. Click on the link in the email to verify your email address.
3. You are now logged in to surge.

Generating a surge token

1. In a command line, run the following command to generate a surge token.

surge token

Setting up the GitHub action

1. Go to the GitHub repository where you want to set up the GitHub action.
2. Add a new file to the repository. Name the file deploy.yml on the path .github/workflows/.
3. Add the following code to the file.

name: Deploy to surge

on:
  push:
    branches:
      - master # Set a branch to deploy

jobs:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 14.x
      uses: actions/setup-node@v1
      with:
        node-version: 14.x
    # Install dependencies
    - name: Install dependencies
      run: npm install
    # Build the project
    - name: Build
      run: npm run build

    # Deploy to surge
    - name: Deploy
      run: npm install --global surge
      run: surge  ./build <your_url_to_deploy> --token <your_surge_token>

Reading token from GitHub secrets

You can also read the surge token from GitHub secrets. This is a more secure way to store the token. To do this, follow the steps below.

1. Go to the GitHub repository where you want to set up the GitHub action.

2. Go to the settings of the repository.

3. Go to the secrets section.

4. Add a new secret. Name the secret SURGE_TOKEN. Paste the surge token in the value field.

Image Source: Photo by David Pupaza on Unsplash