GitHub Pages View Counter Example

This page demonstrates the GitHub Pages-specific tracking script that tracks individual repositories instead of just domains.

📊 Repository View Counter

Show views for your specific GitHub Pages repository with data-gh-page-views:

<div data-gh-page-views>Loading...</div>

Loading repository views...

🎨 Custom Format with Repository Name

Use data-format to show the repository name with {page} placeholder:

        <span data-gh-page-views data-format="📈 {page}: {views}
          views"></span>
      

🌟 Project Stats Display

Perfect for showing off your project's popularity:

        <p data-gh-page-views data-format="This project has been viewed
          {views} times!"></p>
      

🔧 How GitHub Pages Tracking Works

The GitHub Pages tracker extracts the repository name from URLs like:

https://username.github.io/repo-name/ → tracks username/repo-name
https://george-of-croton.github.io/minimalist-ripple-client/ → tracks george-of-croton/minimalist-ripple-client
https://username.github.io/ → tracks username (main GitHub Pages site)

📋 Available Selectors for GitHub Pages

The GitHub Pages script looks for elements with any of these selectors:

[data-gh-page-views] - GitHub Pages specific
[data-page-views] - Generic (backward compatible)
.gh-page-views - GitHub Pages CSS class
.page-views - Generic CSS class
#gh-page-views - GitHub Pages ID
#page-views - Generic ID
.view-count - CSS class
#view-count - ID

🎨 Format Options

Use the data-format attribute to customize the display:

{views} - The view count (automatically formatted with commas)
{page} - The repository identifier (e.g., "username/repo")

Examples:

data-format="{views}" - Just the number
data-format="{views} views" - Number with "views" text
data-format="📊 {page} has {views} views" - With repository name
data-format="⭐ {views} people have checked out this project!" - Marketing style

⚙️ Setup for GitHub Pages

Add the GitHub Pages tracking script to your repository:

      <script
        src="https://hard-house.club/track-gh-pages.js"></script>
    

Add view counter elements anywhere on your page
Deploy to GitHub Pages - each repository will be tracked separately!

💡 Use Cases

Portfolio sites: Show how popular your projects are
Documentation: Track which docs get the most views
Demo pages: See engagement with your live demos
Blog posts: Track readership on GitHub Pages blogs
Open source projects: Show community interest

🔧 Difference from Regular Tracking

Regular tracking script: Groups all pages from username.github.io together

GitHub Pages script: Tracks username/repo-name separately for each repository

📊 API Access

Fetch your GitHub Pages view counts programmatically:

      Fetch views for a specific repository:

      GET https://hard-house.club/api/views-page/[username-repository]

JavaScript Example

        // For repository: https://username.github.io/my-project/

        fetch('https://hard-house.club/api/views-page/username-my-project')

          .then(response => response.json())

          .then(data => {

            console.log(`${data.page} has ${data.views} views`);

          });

Response Format

        {

          "page": "username-my-project",

          "views": 15

        }

💡 Page ID Format: GitHub URLs are converted to dash-separated format:

username.github.io/repo → username-repo
username.github.io → username

🐙 GitHub Pages View Counter