Akul Srivastava

Automatic deployments for your website

We can write a workflow to automate the deployments of our static website. There are a lot of service providers which we can use to deploy our website, in this example I will be using surge to do the same.

The prerequisite for this are:

• A static website (or build folder). This is the folder where your index.html stays. If you're using any lib/framework, this would be generated after building your project.
• Github Personal Access Token - official documentation for creating a personal access token.
• Surge email id stored in github secrets.
• Surge token stored in github secrets.

Creating surge account and getting token

• Install surge on your system

npm i -g surge

• Logging/Creating an account by entering surge in your terminal. Here's official docs to get started.

surge

• For getting token, enter surge token in your terminal

surge token

• Now, store both your email and token in github secret. You can also go through the official documentation for adding github action secret

Workflow for Automatic Deployments

Once, you are done with the above steps and have surge email and token in your github secret, you can proceed further with the workflow.

name: Website Deployment

on:
  push:
    branches:
      - main

jobs:
  website-deployment:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: Install deps
        run: npm ci

      - name: Build Website
        run: npm run build # your build command here

      - name: Deploy Website
        uses: dswistowski/surge-sh-action@v1
        with:
          domain: "github-action-examples.surge.sh" # your preferred domain (shouldn't be already taken by someone)
          project: "dist" # your path to the build folder
          login: ${{ secrets.GH_ACTION_SURGE_LOGIN }} # your surge email secret key
          token: ${{ secrets.GH_ACTION_SURGE_TOKEN }} # your surge token secret key

Result

Here's the result of above action, you can visit the deployed website - http://github-action-examples.surge.sh/

You can also view the steps and output for the above workflow.