CI/CD with GitHub Pages & Actions

Continuous integration (CI) and continuous deployment (CD) are popular software development practices that enable teams to frequently and automatically integrate and deploy code changes. These practices help teams to quickly and confidently deliver new features and bug fixes to their users.

One of the key tools used in CI/CD is GitHub Pages, a static site hosting service provided by GitHub. GitHub Pages allows developers to easily host their project's website on a dedicated URL, making it accessible to users and stakeholders.

In this article, we will explore how to use GitHub Pages and GitHub Actions to set up a CI/CD pipeline for a project.

photo-1618401471353-b98afee0b2eb

What is CI/CD and why it is important

Continuous Integration/Continuous Deployment (CI/CD) is a software development practice that involves regularly integrating code changes into a central repository, and automatically building and deploying software updates. This allows teams to quickly and easily make changes to their codebase and see the results of those changes in a production-like environment.

CI/CD is important for several reasons. First, it allows teams to detect and fix integration issues early in the development process, which can save time and money. By automatically building and testing code changes, teams can quickly identify and fix problems, rather than waiting until later in the development cycle when they are more difficult and costly to fix.

Second, CI/CD helps teams deliver software updates more frequently and reliably. By automating the build and deployment process, teams can release software updates on a regular basis without the need for manual intervention. This allows teams to iterate and improve their software more quickly and respond to customer feedback more effectively.

Third, CI/CD can improve collaboration and communication within a development team. By integrating code changes regularly and automatically building and deploying updates, teams can work together more effectively and ensure that everyone is working on the most up-to-date version of the codebase.

Overall, CI/CD is a valuable practice that can help teams develop and maintain high-quality software more efficiently and effectively.

Setting up a GitHub Pages website for your project

To set up a GitHub Pages website for your project, follow these steps:

  1. Navigate to your project's GitHub repository and click on the "Settings" tab.
  2. Scroll down to the "GitHub Pages" section and select "Main Branch" as the source for your website.
  3. Save your changes and GitHub will automatically generate a URL for your website, which you can find in the "GitHub Pages" section.
  4. Create an "index.html" file in the root of your project, which will serve as the homepage for your website.
  5. Add the necessary HTML code to the "index.html" file to create your website's content and layout.
  6. Push your changes to the "main" branch of your project's repository on GitHub.
  7. Your website will be automatically built and published to the URL generated in step 3.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>My Website!</h1>
  </body>
</html>

Your website will be automatically updated whenever you push changes to the "main" branch of your project's repository on GitHub. This allows you to easily update and maintain your website without needing to manually build and deploy it.

Creating a GitHub Actions workflow for CI/CD

To create a GitHub Actions workflow for CI/CD, follow these steps:

  1. Navigate to your project's GitHub repository and click on the "Actions" tab.
  2. Click on the "Set up a workflow yourself" button to create a new workflow.
  3. In the workflow file, specify the trigger for your workflow, such as pushing changes to the repository or opening a pull request.
  4. Add the necessary steps to the workflow to build and test your code. This might include running your test suite, linting your code, or building your application.
  5. Add a step to the workflow to deploy your code to a production environment, such as deploying to a server or publishing your website.
  6. Save the workflow file and push it to your repository to activate the workflow.

Your workflow will be automatically triggered whenever the specified event occurs, and will run the specified steps to build, test, and deploy your code. This allows you to automatically build and deploy your code whenever changes are made, ensuring that your code is always up-to-date and ready for deployment.

Configuring the workflow to automatically build and deploy your website

To configure your GitHub Actions workflow to automatically build and deploy your website, you can add the following steps to the workflow file:

  1. Create a new folder in your project's repository called ".github" and inside it, create a folder called "workflows".
  2. Inside the "workflows" folder, create a new file called "build-and-deploy.yml".
  3. Copy the contents of the provided YAML file into the "build-and-deploy.yml" file and save your changes.
  4. Push your changes to the "main" branch of your project's repository on GitHub.
# .github/workflows/build-and-deploy.yml
name: Build and Deploy
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3
      - name: Install and Build 🔧
        run: | # the commands that generate your site
          yarn
          yarn build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: dist # The folder the action should deploy.

With this setup, your workflow will be automatically triggered whenever changes are pushed to the "main" branch of your repository. The workflow will run the specified steps to install dependencies, build your website, and deploy it to the "gh-pages" branch of your repository. This will automatically build and deploy your website whenever changes are made, allowing you to easily and reliably maintain and update your website.

Conclusion

In conclusion, Continuous Integration/Continuous Deployment (CI/CD) is a valuable software development practice that allows teams to quickly and easily integrate code changes, build and test software updates, and deploy those updates to a production-like environment. By setting up a GitHub Pages website and using GitHub Actions to automate the CI/CD process, teams can easily and reliably maintain and update their websites without the need for manual intervention. Overall, CI/CD can help teams develop and maintain high-quality software more efficiently and effectively.