Deployment
1. Deploy to Cloudflare Pages
- Fork this repository
- Go to Cloudflare Dashboard → Workers & Pages
- Create application → Pages → Connect to Git
- Select the repository, configure build settings:
- Framework preset:
Vue - Build command:
npm run build - Output directory:
dist
- Framework preset:
- Click Deploy
2. Create KV Namespace
- Workers KV → Create namespace
- Name as you like, e.g.,
imgbed-kv
3. Bind KV
In Pages project → Settings → Functions → KV namespace bindings:
| Variable Name | KV Namespace |
|---|---|
KV | Select the namespace just created |
4. Configure Environment Variables
In Pages project → Settings → Environment variables:
| Variable Name | Required | Description |
|---|---|---|
GITHUB_TOKEN | ✅ | GitHub Personal Access Token (global default) |
ADMIN_PASSWORD | ✅ | Admin password |
RSA_PUBLIC_KEY | ✅ | RSA public key (base64) |
RSA_PRIVATE_KEY | ✅ | RSA private key (base64) |
5. Generate RSA Key Pair
Copy your deployed domain, using your-site.pages.dev as an example
Edit the address bar, append /generate-keys.html, press Enter, click the button to generate, copy the output environment variable values.
Full URL: https://your-site.pages.dev/generate-keys.html
6. First Time Use
- Visit the deployed domain
- Enter the admin password to log in
- Go to Settings → Add repository, fill in the information
Note: Ensure the repository has at least one file (any file), otherwise image upload will fail
- Start uploading images
📡 API Endpoints
| Endpoint | Method | Auth | Description |
|---|---|---|---|
/api/auth | GET | ❌ | Get RSA public key |
/api/auth | POST | ❌ | Admin login verification |
/api/images | GET | ✅ | Get all repository images |
/api/upload | POST | ✅ | Upload image |
/api/delete | POST | ✅ | Delete image |
/api/batch-visibility | POST | ✅ | Batch set public/private |
/api/random | GET | ❌ | Random public image (configurable toggle) |
/api/preview/{filename} | GET | ❌ | Preview private repository images |
/api/settings | GET | ❌ | Get settings |
/api/settings | POST | ✅ | Update settings |
/api/getSettingsUpdateTime | GET | ❌ | Get settings update time |
/api/checkRepositoryStatus | POST | ✅ | Check repository status |
Random Image API
html
<!-- Use directly as img tag -->
<img src="https://your-site.pages.dev/api/random" />
<!-- Get URL in JSON format -->
<script>
fetch('/api/random', { headers: { 'Accept': 'application/json' } })
.then(res => res.json())
.then(data => console.log(data.url));
</script>