Customizing GitHub Activity Pages

This post guides you on recreating the /releases and /prs pages in the Astro AntfuStyle Theme to showcase your GitHub releases and pull requests.

Configure Build-time Loaders#

The /releases and /prs pages use the build-time loaders provided by astro-loader-github-releases and astro-loader-github-prs to fetch data for the releases and prs content collections. In src/content.config.ts, configure these loaders to fetch your GitHub activity data as described in their README:

import { githubReleasesLoader } from 'astro-loader-github-releases'
import { githubPrsLoader } from 'astro-loader-github-prs'

...

const releases = defineCollection({
  loader: githubReleasesLoader({
    // Configure to fetch your desired GitHub release data
  }),
})

const prs = defineCollection({
  loader: githubPrsLoader({
    // Configure to fetch your desired GitHub PRs data
  }),
})

export const collections = {
  ...
  releases,
  prs,
}

Starting in Astro 5, the dev server address is shown only after external resources are loaded and content is synced. Using build-time loaders may delay server startup.

Starting in Astro 6, you can create live content collections with live loaders, which fetch content at request time (no rebuild). With on-demand rendering, use the plugins’ live loaders instead of build-time loaders.

Update Page Content#

Depending on your loader configuration, you can modify the settings in src/config.ts that affect the UI of these two pages. Refer to the UI.githubView option for specific details.

In src/pages/releases.mdx and src/pages/prs.mdx, you can update the frontmatter and directly modify the titles and subtitles rendered on the pages.

In src/components/views/GithubView.astro, you can remove or update the footer text displayed on both pages.

Automate Data Refreshing#

Astro loaders fetch data only during builds. To refresh /releases and /prs after deployment, schedule a rebuild using your hosting platform.

This theme is hosted on GitHub, with the Live Demo deployed on Vercel. The rebuild is triggered via a GitHub workflow that periodically calls Vercel’s deploy hook.

If your setup is similar, start by creating a Vercel deploy hook (For Netlify, create a build hook), then store it as a secret in your GitHub repository, naming it VERCEL_DEPLOY_HOOK. Finally, update the GitHub workflow file .github/workflows/scheduled-vercel-deploy.yml to periodically call the deploy hook:

name: Scheduled Vercel Deployment

on:
  schedule:
    # https://docs.github.com/en/actions/writing-workflows/choosing-when-your-workflow-runs/events-that-trigger-workflows#schedule
    # Adjust the time for triggering this workflow
    - cron: '0 1 * * 6'

jobs:
  deploy:
    # Remove the following line or modify it for your repository
    if: github.repository == 'lin-stephanie/astro-antfustyle-theme'
    runs-on: ubuntu-latest

    steps:
      - name: Trigger deployment
        env:
          DEPLOY_HOOK_URL: ${{ secrets.VERCEL_DEPLOY_HOOK }}
        run: |
          if [ -z "$DEPLOY_HOOK_URL" ]; then
            echo "Error: Vercel deploy hook URL is not set."
            exit 1
          fi
          curl -X POST "$DEPLOY_HOOK_URL"
          echo "Deployment triggered successfully."

Additionally, to remove a page, uninstall the loader, delete its collection from src/content.config.ts, and remove the .mdx file in /page.

Wrapping Up#

The theme uses SSG (Static Site Generation), so the data shown on /releases and /prs is refreshed through build-time loaders that rely on periodic rebuilds, which may cause slight delays. For GitHub activity data, this is usually acceptable.

Starting with Astro 6, Astro also supports fetching live content collections at request time through live loaders, without a rebuild step. So if you want to show near real-time GitHub activity, you can consider switching to liveGithubReleasesLoader and liveGithubPrsLoader, together with an adapter that supports on-demand rendering.

If you take that route, your site will no longer be a fully static SSG site, because those pages will depend on SSR (server-side rendering). 📶