DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Related

  • CI/CD Integration: Running Playwright on GitHub Actions: The Definitive Automation Blueprint
  • Chat with Your Oracle Database: SQLcl MCP + GitHub Copilot
  • Mastering GitHub Copilot in VS Code: Ask, Edit, Agent and the Build–Refine–Verify Workflow
  • From Command Lines to Intent Interfaces: Reframing Git Workflows Using Model Context Protocol

Trending

  • AI Agents Expose a Design Gap in Microservices Resilience Architecture
  • AWS Managed Database Observability: Monitoring DynamoDB, ElastiCache, and Redshift Beyond CloudWatch
  • Why SAP S/4HANA Landscape Design Impacts Cloud TCO More Than Compute Costs
  • Chat with Your Oracle Database: SQLcl MCP + GitHub Copilot
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Deployment
  4. A Refresher on GitHub Pages

A Refresher on GitHub Pages

Deploying to GitHub Pages offers two options: either from a branch or from a custom workflow. Once I understood the options, I made the first one work.

By 
Nicolas Fränkel user avatar
Nicolas Fränkel
·
Jun. 24, 24 · Review
Likes (1)
Comment
Save
Tweet
Share
3.3K Views

Join the DZone community and get the full member experience.

Join For Free

I moved my blog from WordPress to GitLab Pages in... 2016. I'm happy with the solution. However, I used GitHub Pages when I was teaching for both the courses and the exercises, e.g., Java EE. At the time, there was no GitHub Actions: I used Travis CI to build and deploy.

Recently, I had to use GitHub Pages to publish my Apache APISIX workshop. Travis is no longer free. GitHub Actions are a thing. I used the now nominal path and faced a few hurdles; here are my findings.

GitHub Pages, at the Time

The previous usage of GitHub Pages was pretty straightforward. You pushed to a specific branch, gh-pages. GitHub Pages rendered the root of the branch as a website.

Travis works by watching a .travis.yml build file at the repository root. When it detects a change, it runs it. I designed the script to build HTML from Asciidoc sources and push it to the branch. Here's the significant bit:

YAML
 
after_success:
 # - ...
   - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:gh-pages > /dev/null 2>&1


GitHub Pages Now

When you enable GitHub Pages, you can choose its source: GitHub Actions or Deploy from a branch. I used a workflow to generate HTML from Asciidoctor, and my mistake was selecting the first choice.

GitHub Pages From a Branch

If you choose Deploy from a branch, you can select the branch name and the source root folder. Apart from that, the behavior is similar to the pre-GitHub Action behavior. A vast difference, however, is that GitHub runs a GitHub Action after each push to the branch, whether the push happens via an Action or not.

pages

While you can see the workflow executions, you cannot access its YAML source. By default, the build job in the workflow runs the following phases:

  • Set up job
  • Pull the Jekyll build page Action
  • Checkout
  • Build with Jekyll
  • Upload artifact
  • Post Checkout
  • Complete job

Indeed, whether you want it or not, GitHub Pages builds for Jekyll! I don't want it because I generate HTML from Asciidoc. To prevent Jekyll build, you can put a .nojekyll file at the root of the Pages branch. With it, the phases are:

  • Set up job
  • Checkout
  • Upload artifact
  • Post Checkout
  • Complete job

No more Jekyll!

GitHub Pages From Actions

The pages-build-deployment Action above creates a tar.gz archive and uploads it to the Pages site. The alternative is to deploy yourself using a custom GitHub workflow. The GitHub Marketplace offers Actions to help you with it:

  • configure-github-pages: extracts various metadata about a site so that later actions can use them;
  • upload-pages-artifact: packages and uploads the GitHub Page artifact
  • deploy-pages: deploys a Pages site previously uploaded as an artifact

The documentation does an excellent job of explaining how to use them across your custom workflow.

Conclusion

Deploying to GitHub Pages offers two options: either from a branch or from a custom workflow. In the first case, you only have to push to the configured branch; GitHub will handle the internal mechanics to make it work via a provided workflow. You don't need to pay attention to the logs. The alternative is to create your custom workflow and assemble the provided GitHub Actions.

Once I understood the options, I made the first one work. It's good enough for me, and I don't need to care about GitHub Pages' internal workings.

To Go Further

  • GitHub Pages
  • Using custom workflows with GitHub Pages
  • configure-github-pages Marketplace Action
  • upload-pages-artifact Marketplace Action
  • deploy-pages Marketplace Action
GitHub

Published at DZone with permission of Nicolas Fränkel. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • CI/CD Integration: Running Playwright on GitHub Actions: The Definitive Automation Blueprint
  • Chat with Your Oracle Database: SQLcl MCP + GitHub Copilot
  • Mastering GitHub Copilot in VS Code: Ask, Edit, Agent and the Build–Refine–Verify Workflow
  • From Command Lines to Intent Interfaces: Reframing Git Workflows Using Model Context Protocol

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

  • RSS
  • X
  • Facebook

ABOUT US

  • About DZone
  • Support and feedback
  • Community research

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 215
  • Nashville, TN 37211
  • [email protected]

Let's be friends:

  • RSS
  • X
  • Facebook