Count how many visitors any page gets. A simple solution to add a view counter badge to your readme files or web page.

A view counter implemented using Cloudflare Workers Edge storage solution.

The view counter badge is meant to be deployed individually for each profile/user. Click the button and then follow the steps below to deploy your own view counter. During the process, it will guide you to log in (or register) your GitHub and Cloudflare accounts.

After completing the process, please return to GitHub. At this point, the Action will fail to deploy, so it is essential to proceed with the following configuration.

You can change the name in the first line of wrangler.toml, as it will serve as the worker name and is related to the subdomain.

Your Cloudflare Worker will be deployed at {worker-name}.{cloudflare-id}.workers.dev.

Create a new D1 Database, it's important that you name it ViewCounter.

After obtaining the database_id from the execution result of the command, please insert it back into the wrangler.toml file and save the file. Following these steps:

Create a new D1 Database with the name ViewCounter.

wrangler d1 create ViewCounter

You will get a response with the database_id like this:

✅ Successfully created DB 'ViewCounter' in region APAC
Created your database using D1's new storage backend. The new storage backend is not yet recommended for production
workloads, but backs up your data via point-in-time restore.

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "ViewCounter"
database_id = "72f5fd97-3f01-40e7-b31f-6c3117a9c624"

Fill the database_id property in wrangler.toml with the id you got in the previous step.

[[d1_databases]]
binding = "ViewCounter"
database_id = "72f5fd97-3f01-40e7-b31f-6c3117a9c624" # Your database id
database_name = "ViewCounter"

Create a table named ViewCounter with init_database.sql

wrangler d1 execute ViewCounter --file=./init_database.sql

Save the file and push a new commit into master and wait for the GitHub Action to deploy your worker.

<img src="https://{worker-name}.{cloudflare-id}.workers.dev" alt="View counter badge" />

OR

![View counter badge](https://{worker-name}.{cloudflare-id}.workers.dev)

You can pass arguments to customize your view counter. The badge is created using badgen so all the options supported by badgen except for icon and iconWidth can be used.

Valid color names are:

blue, cyan, green, yellow, orange, red, pink, purple, grey, black

Example of a counter with parameters:

https://{worker-name}.{cloudflare-id}.workers.dev?style=classic&labelColor=black&color=green

You can deploy multiple view counters under the same GitHub account and Cloudflare account.

1. Create and checkout to a new git branch.
2. Change the name in wrangler.toml to deploy on a different subdomain.
3. Change the CounterName in src/index.ts to any other name you like. Please ensure that there are no conflicts with any existing names.
4. Commit and push to origin to trigger the GitHub workflow again.

MIT License
Copyright (c) 2022 Aveek Saha and 陳鈞