How to Effortlessly Deploy Your Static Site to GitHub Pages with GitHub Actions.

Introduction

Welcome to the world of automated website deployment! In this tutorial, we will dive into the powerful synergy of GitHub Pages and GitHub Actions. By the end of this guide, you'll have your static site deploying like clockwork, thanks to the magic of automation.

Prerequisites

Before we embark on this automation adventure, you'll need a few essentials:

1. A GitHub Account: If you don't have one yet, sign up at GitHub.

2. Static Site Repository: You should already have a repository containing your static site's source code. If not, create one pronto!

Step 1: Crafting the GitHub Actions Workflow

GitHub Actions is all about automating tasks based on specific events. We'll create a workflow that automatically deploys your static site whenever you push changes to your main branch. Here's how:

• Navigate to Your Repository: Head to your GitHub repository.

• Create the Workflow Directory: Inside your repository, create a new directory named .github/workflows. This is where we'll store our workflow files.

• Craft the Workflow YAML File: Inside the .github/workflows directory, create a new YAML file. Let's name it deploy.yml.

• Edit the Workflow File: Open deploy.yml and insert the following code:

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # Upload entire repository
          path: '.'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

This workflow listens for pushes to your main branch, builds your site, and deploys it to the main branch.

Step 2: Safeguard Your Secrets

Security is paramount. Instead of hardcoding your credentials, let's use GitHub Secrets:

• Access GitHub Secrets: Go to your GitHub repository.

• Secrets Configuration: Click on "Settings" > "Secrets" > "New repository secret."

• Create Secrets: Establish two secrets:

  • GITHUB_USERNAME: Your GitHub username.

  • GITHUB_EMAIL: The email address associated with your GitHub account.

Step 3: Commit and Push Your Workflow

Now that your workflow file and secrets are ready, commit and push them to your repository:

bashCopy codegit add .github/workflows/deploy.yml
git commit -m "Automate deployment with GitHub Actions"
git push origin main

Step 4: Monitor Your Deployment Workflow

GitHub Actions will work its magic automatically. Whenever you push changes to your main branch, your static site will be deployed to GitHub Pages. Keep an eye on the "Actions" tab of your repository for progress and deployment logs.

Step 5: GitHub Pages Configuration

To enable GitHub Pages for your repository:

• Go to your GitHub repository.

• Click on "Settings" > "Options."

• Scroll down to the "GitHub Pages" section.

• Choose the main branch as your source.

• Click "Save."

Voila! Your site is now accessible at https://<username>.github.io/<repository-name>. Well this is mine for an example, :- https://zouziszzm.github.io/portfolio/

Conclusion

By automating your static site deployment with GitHub Actions, you've unlocked a world of convenience and reliability. Focus on creating content, and let GitHub Actions handle the rest. Happy coding, and may your deployments always be swift and bug-free!