Hosting a static website in GitHub Pages and Hover

In this blog post, I show you how to host a website in GitHub Pages and manage the domain with Hover

Website

I recently joined a local chess association in Guadalajara. They did not have a website, so I offered to create one for them. The website is a static website with HTML and Bootstrap.

The website is simple, but it conveys the association information, and it scores 100% in performance, accessibility, best practices and SEO.

GitHub Organization

Instead of creating it from my personal account, I created a GitHub Organization dedicated to the association. I verified the domain at the GitHub Organization level. You need to verify the domain at the organizational level, not the repository level.

GitHub Pages

Micronaut publishes its documentation to GitHub Pages deploying from branch gh-pages. For this website, I used GitHub Actions as the source instead. The website changes seem remarkably faster.

GitHub Action Workflow

The following GitHub Action workflow deploys the contents of the dist folder.

name: Deploy static content to Pages
on:
  push:
    branches: ["main"]
permissions:
  contents: read
  pages: write
  id-token: write
concurrency:
  group: "pages"
  cancel-in-progress: false
jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: 'dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Domain

I use Hover as a domain registrar. I use the following DNS configuration as pointed out by GitHub Pages documentation.

Cost

The total cost for the association is 18 USD per year - the cost of the domain.

Summary

I hope this post shows you how easy is to host a website in GitHub Pages and manage the domain with Hover.

If you are in the Guadalajara (Spain) area, I hope to play chess against you soon. You can find the meetup information at ajedrezcallejeroguadalajara.com.

Tags: #github #github-actions #github-pages #hover #static-website #boostrap