Blog 6-SP21

Github Workflows: Continous Deployment to Github Pages

So this week, I worked on two major items for my group’s Class Companion web application. Those two major items would be, our continous deployment to Github Pages, and our AWS RDB. This week’s blog will be going over the workflow :)

Like explained in previous blogs, continous deployment is part of the CI/CD pipeline. Whereas, CI is the software development practice of regularly integrating code changes into a shared code repository. CD allows you to automatically deploy live, every changes that pass the CI.

Github Pages

There’s alot of different ways to deploy our site, but we used Github pages so the the setup time is faster. It’s faster because it’s already built into our platform. In fancier context, Github Pages is a static site hosting service that takes all your HTML, CSS, and js files from your repository on Github, and runs the files through a build process, and publishes a website.

Process of Building the Workflow

Well initially, like usual I had no idea what I was doing. I looked up a community Github Action and found the crazy-max/ghaction-github-pages workflow.

   name: Deploy to GitHub Pages
    if: success()
    uses: crazy-max/ghaction-github-pages@v2
    with:
      target_branch: gh-pages
      build_dir: public
    env:
      GITHUB_TOKEN: $

But it would continously fail and put out this error “error: src refspec prod does not match any”. After debuging fo a few hours, we never figured it out. Documentation wasn’t as explanative as I had hoped. All we needed to do was point the Github pages to a specific branch, then on every push to a certain branch, specified files in our “dev” branch, will be moved to the our Github pages specified branch.

jobs:   build-deploy:
runs-on: ubuntu-latest
steps:
  - name: Checkout
    uses: actions/checkout@v2
    with:
      ref: dev

  - name: Install dependencies & compile code
    run: |
      npm install
      npm run build
      ls -la
  - name: Build dist directory
    run: |
      mkdir dist
      mv .gitignore dist
      mv README.md dist
      mv assets dist
      mv index.html dist
      mv public dist
      mv style.css dist
      ls -la
  - name: Upload dist artifact
    uses: actions/upload-artifact@v2
    with:
      name: dist
      path: ./dist
      retention-days: 1

  - name: Checkout
    uses: actions/checkout@v2
    with:
      ref: prod

  - name: Download dist artifact
    uses: actions/download-artifact@v2
    with:
      name: dist
      path: ~/dist

  - name: Move dist into current directory
    run: |
      mv ~/dist ./
      ls -la
  # Configures git credentials before pushing up to target branch
  - name: Package new compiled code & deploy to target branch
    run: mv .git dist
  
  - name: Deploy to GitHub Pages
    if: success()
    uses: crazy-max/ghaction-github-pages@v2
    with:
      target_branch: prod
      build_dir: dist
    env:
      GITHUB_TOKEN: $

Made a few changes changes to the code, forcing it to make a directory called “dist” within the container. Then moving all the required files to that directory. Then we used “actions/artifact@v2” to upload that data. Switched branches, to our deploy branch, “prod” and made it download the data using the actions/download-artifact@v2. Then boom, we got our static site up. It was quite a battle but with Brian’s help, we got it working!