Hits! - General purpose hits counter based on Cloudflare Workers （中文说明）

<p> <img src="https://hits.xykt.de/hits_github.svg?action=hit&count_bg=%23FFA552&title_bg=%231D8834&title=Hits!&edge_flat=false"/> <img src="https://img.shields.io/badge/Version-2025--06--08-green"/> <img src="https://img.shields.io/badge/Uptime-100%25-green"/> <img src="https://img.shields.io/badge/Deploy-Serverless-blue"/> <img src="https://img.shields.io/badge/Cost-FREE-blue"/> <a href="/LICENSE"><img src="https://img.shields.io/badge/License-AGPL%20v3-blue.svg" alt="license" /></a> </p>

Hits! A completely free, serverless, lightweight access counter system based on Cloudflare Workers and D1 SQL Database, supporting JSON and GitHub (Shields.io) style SVG images, with quick deployment in just one minute

✨ Features

• 🚀 Quick Deployment - Deploy in just one minute
• ☁️ Cloud Hosting - No server maintenance required
• 💰 Completely Free - Utilizes Cloudflare's free plan
• 📊 Multi-Site Support - Supports multiple counters via different keywords
• 🔒 Secure and Reliable - Powered by Cloudflare's global network
• 🎨 Colorful Display - Supports customizable color SVG and JSON output

🛠 Quick Deployment Guide

1. Create D1 Database

Go to the Cloudflare Dashboard, navigate to Storage & Databases > D1 SQL Database > Create, name it hits, and run the following SQL to create the table in Console

CREATE TABLE counters ( name TEXT PRIMARY KEY, count INTEGER DEFAULT 0 );

2. Create Workers

Navigate to Workers & Pages > Create application > Create Worker, name it hits. Copy the hit.js code into the Worker editor. Modify line 7 to change the domain to your counter's domain, and set the keywords in line 8. Each counter corresponds to a keyword. For subsequent counters, simply add new keywords for them.

3. Configure Bindings

In the Worker Settings > Bindings > Add > D1 Database, enter the variable name as HITS, and select the hits database. In Domains & Routes - Add - Custom domain, add your newly configured counter domain.

4. How to Use

• SVG Image

https://your.domain/keyword.svg?action=view&count_bg=%233DC8C0&title_bg=%23555555&title=Visits&edge_flat=false

| Parameter | Values | Description | 说明 | |------------|----------------------|-----------------------------------|----------------------------| | action | view / hit | View only or hit & view | 仅展示/点击并展示 | | count_bg | %23{colorcode} | Background color of count area | 数字部分背景颜色 | | title_bg | %23{colorcode} | Background color of title area | 标题部分背景颜色 | | title | TitleToShow | Text to display | 展示标题 | | edge_flat | true / false | Sharp or rounded corners | 尖角/圆角 |

| Shields.io Presets | Aliases | Hits! Counter Example | Shields.io Example | |--------------|-----------|----------------------------|--------------------| | count_bg=brightgreen | success | | | | count_bg=green | | | | | count_bg=yellow | | | | | count_bg=yellowgreen | | | | | count_bg=orange | important | | | | count_bg=red | critical | | | | count_bg=blue | informational | | | | count_bg=grey | gray | | | | count_bg=lightgrey | lightgray inactive | | |

| Custom | Black | Gray | Blue | Green | Purple | Red | |---------------|-------|------|------|-------|--------|-----| | Red | | | | | | | | Orange | | | | | | | | Yellow | | | | | | | | Green | | | | | | | | Blue | | | | | | | | Purple | | | | | | | | Gray | | | | | | |

• JSON Result

| Request | Description | 说明 | |-|-|-| | https://your.domain/keyword?action=view | View only | 仅展示 | | https://your.domain/keyword?action=hit | Hit & View | 点击并展示 |

JSON Response

{
  "counter": "keyword",
  "action": "hit",
  "total": 1024,
  "daily": 32,
  "date": "2025-03-31",
  "timestamp": "2025-03-31T04:08:16.512Z"
}

• History Chart

https://your.domain/history/keyword.svg?days=31&chartType=bar&title=Chart%20Title&width=1024&height=400&color=green

| Parameter | Values | Description | 说明 | |------------|----------------------|-----------------------------------|----------------------------| | days | {days_number} | Statistical days | 统计天数 | | chartType | bar / scatter | Chart type: bar / scaater | 图表类型：柱状图 / 散点图 | | title | {title_text} | Chart title | 图表标题 | | width | {width_pixels} | Chart width