Workshop CI/CD with Github Actions (SINF 2024)

In this workshop, you will implement a CI/CD pipeline to achieve the following tasks:

(on pull requests and pushes to main)

• Lint the code
• Check the formatting of the code

(only on pushes to main)

• Build the website distribution
• Upload it to Github Pages

After this has been achieved, you will need to add a new article to the website and create a pull request to add it to the main branch.

Useful links

• Presentation
• Github Actions general documentation
• Github Actions workflow syntax
• Github Actions workflow contexts
• Github Actions marketplace
• Astro documentation for deploying to Github Pages

Useful commands

• npm run setup: Initial setup of the project
• npm run lint: Lint the code in the project
• npm run build: Build the website distribution
• npm run format:check: Check if the code in the project is properly formatted
• npm run format:write: Format the code in the project

Tips!

• The following actions might be useful:

  • actions/checkout: Checkout a repository
  • actions/setup-node: Setup Node.js
  • actions/upload-pages-artifact: Upload a GitHub Pages artifact
  • actions/deploy-pages: Deploy a GitHub Pages artifact to GitHub Pages
  • actions/cache: Cache dependencies

Caution

1. Don't forget to enable GitHub Pages in your repository settings. Go to Settings > Pages and change Build and Deployment > Source to GitHub Actions.
2. Don't forget to change repositoryName in astro.config.mjs to the name of your repository.

A possible solution

In case you get stuck or are just curious, a possible solution is available at limwa/workshop-ci-cd-sinf-2024.

You can also check all Actions executions for that repository here. The resulting pages deployment is available here.