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 the Loaders#

The /releases and /prs pages use astro-loader-github-releases and astro-loader-github-prs to fetch data for 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,
}

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 configuration 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 /releases and /prs updates rely on periodic rebuilds, which may cause slight delays (acceptable for GitHub data). For real-time updates, keep the current UI but switch to SSR (Server-side Rendering). Check the official docs for details.

Looking forward, the theme will continue leveraging Astro loaders to enable showcasing diverse external personal data. 🧩