README.md

5 Deploying to GitHub Pages

Navigation

0. Getting started
1. Creating a workflow
2. Building code in a workflow
3. Running multiple jobs in parallel
4. Running jobs in sequence
5. Deploying to GitHub Pages (this task)
6. Using other events to run workflows
7. Outputs from steps and jobs
8. Keeping dependencies up to date with Dependabot
9. Matrices
10. Workflow dispatch inputs and security verification
11. Learn more about GitHub Actions

GitHub Pages is GitHub's built-in static site hosting. It's not very often used in production, but it's great for hosting things like documentation, blogs, or even your own website. Even though it's not used that often, it's still a great way to learn how to deploy to a cloud service.

5.1 Configuring GitHub Pages

To deploy to GitHub Pages from GitHub Actions, we first need to configure the repository.

1. Go to the repository settings on https://github.com/[your-username]/gh-actions-workshop/settings/pages
2. Under "Build and deployment" → "Source", select "GitHub Actions"

5.2 Creating a workflow that deploys to GitHub Pages

Now that we've configured GitHub Pages, we can create a workflow that deploys to it. Let's create a new workflow file called deploy.yml in the .github/workflows directory. The new workflow should be triggered on push to the main branch, as this is the only branch we know works.

We need to set a few permissions to be able to read the repository and deploy to GitHub Pages:

Permission	Description
contents: read	To read the repository contents
pages: write	To deploy to GitHub Pages
id-token: write	To verify the deployment originates from an appropriate source

1. Create a new job called deploy that runs on ubuntu-latest

2. In the steps, check out the code, install dependencies and build the project as before

3. To be able to deploy, we use actions/configure-pages, actions/upload-pages-artifact and actions/deploy-pages:

   - name: Setup Pages
     uses: actions/configure-pages@v5
   - name: Upload artifact
     uses: actions/upload-pages-artifact@v3
     with:
       # Upload the `dist` folder, which was generated by `npm run build`
       path: "./dist"
   - name: Deploy to GitHub Pages
     id: deployment
     uses: actions/deploy-pages@v4

After running this workflow (on the main branch), you should be able to see the webpage on https://[your-username].github.io/gh-pages-workshop 😍 Now let's learn about other events in task 6!