Hosting Content using GitHub Pages

Types of GitHub pages.

GitHub pages can be enabled via an action or interactive method.

In this article, an action is used to enable GitHub pages for an organization repository.

Create Test Files

Create some test files and push changes to the remote repo:

<!DOCTYPE html>
<html>
    <head>
        <title>Sample HTML page</title>
    </head>
    <body>
        <p>This is HTML page, which should render when viewed from  .</p>
    </body>
</html>
# GH pages for repository github-pages

Clicking on the link below should load a rendered version of HTML page located at `html_content/sample.html`.

[Sample.html](./html_content/sample.html)

The following additions should appear after pushing to the remote repository:

├── html_content
│   └── sample.html
└── index.md

Create GitHub Pages Enable/Deploy Workflow

The workflow below is based on the template sourced from actions/configure-pages repository.

Note, the on:push event for the main branch has been commented-out, and can be reinstated when testing is complete.

An on:workflow_dispatch trigger has been included to allow the workflow to be executed on an ad-hoc basis from the repository’ actions tab.

name:  Enable and Deploy content for GH Pages

on:
#  push:
#    branches: [main]

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  config-pages:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Configure GitHub Pages
        uses: actions/configure-pages@v5.0.0
        with:
          enablement: true
          # description:
                       # 'Try to enable Pages for the repository if it is not already enabled.
                       # This option requires a token other than `GITHUB_TOKEN` to be provided.
                       # In the context of a Personal Access Token, the `repo` scope or Pages write permission is required.
                       # In the context of a GitHub App, the `administration:write` and `pages:write` permissions are required.'
          token: ${{ secrets.GH_PAGES_TOKEN }}
          # Generate a token, as described above, and store as a secret

      - name: Build with Jekyll
        uses: actions/jekyll-build-pages@v1
        with:
          source: ./
          destination: ./_site

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: config-pages
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Push the workflow to the remote repository, and we should end up with the following structure:

├── .github
│   └── workflows
│       └── configure-pages.yml
├── html_content
│   └── sample.html
└── index.md

Run Workflow

  • Trigger the workflow
Enable and Deploy content for GH Pages
  • The output from the deploy should display the link to the generated GitHub page(s) site
Image

Check GitHub Pages Site

  • Using the link from the previous section, visit the site using a web browser
Image
  • Click on the link sample.html to ensure the HTML file at ./html_content/sample.html loads/renders correctly
Image