In this example we are going to create a production server using Github pages and Github actions.

We will start from 03-github-branch.

npm install to install previous sample packages:

npm install

We will use same approach as gh-pages example, but we will use Github Actions for automatic deploys.

Create new repository and upload files:

git init
git remote add origin [email protected]...
git add .
git commit -m "initial commit"
git push -u origin main

Install gh-pages as dev dependency to deploy to Github pages:

npm install gh-pages --save-dev

Add deploy command:

./package.json

  "scripts": {
    "start": "run-p -l type-check:watch start:dev",
    "start:dev": "vite --port 8080",
    "build": "npm run type-check && npm run clean && npm run build:prod",
    "build:prod": "vite build",
+   "build:dev": "vite build --mode development",
+   "deploy": "gh-pages -d dist",
    ...
  },

Run dev build and deploy it:

npm run build:dev
npm run deploy

NOTE: We can run deploy because we have access to repository

since we are logged in Github

Add GitHub actions CD workflow:

./.github/workflows/cd.yml

name: CD workflow

on:
  push:
    branches:
      - main

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

      - name: Install
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy
        run: npm run deploy

Add commit with changes:

git add .
git commit -m "add continuos deployment"
git push

As we saw, the workflow was failed. Why? Because each time a Github job is executed, it's a new and clean machine outside repository. That is, we need to allow job's git push. The best approach is creating a new ssh key on local:

ssh-keygen -m PEM -t rsa -C "[email protected]"

> Enter file in which to save the key (/c/Users/nasda/.ssh/id_rsa): `./id_rsa`
> Enter passphrase (empty for no passphrase): `Pulse Enter for empty`
> Enter same passphrase again: `Pulse Enter for empty`

NOTES -m PEM: Format to apply. PEM is a common public/private key certificate format. rsa: RSA is the crypto algorithm. Enter ./id_rsa to save files in currect directory You can leave empty the passphrasse field.

Copy id_rsa.pub content to Github Settings > Deploy keys section:

Delete id_rsa.pub file.

Copy id_rsa content to Github Settings > Secrets section:

Delete id_rsa file.

Now, we can use this shh private key to do a commit/push in Github's job:

./.github/workflows/cd.yml

name: CD workflow

on:
  push:
    branches:
      - main

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

+     - name: Use SSH key
+       run: |
+         mkdir -p ~/.ssh/
+         echo "${{secrets.SSH_PRIVATE_KEY}}" > ~/.ssh/id_rsa
+         sudo chmod 600 ~/.ssh/id_rsa

+     - name: Git config
+       run: |
+         git config --global user.email "[email protected]"
+         git config --global user.name "cd-user"

      - name: Install
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy
-       run: npm run deploy
+       run: npm run deploy -- -r [email protected]:<your-repo>

NOTES: "Use SSH key" step: create id_rsa with ssh private key in default ssh folder and add write permits.

"Deploy" step: update deploy command with repository's SSH URL.

gh-pages -r flag

git add .
git commit -m "configure git cd-user permits"
git push

We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.

Basefactor, consultancy by Lemoncode provides consultancy and coaching services.

Lemoncode provides training services.

For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend