Skip to content

Deployment

1. Deploy to Cloudflare Pages

  1. Fork this repository
  2. Go to Cloudflare Dashboard → Workers & Pages
  3. Create application → Pages → Connect to Git
  4. Select the repository, configure build settings:
    • Framework preset: Vue
    • Build command: npm run build
    • Output directory: dist
  5. Click Deploy

2. Create KV Namespace

  1. Workers KV → Create namespace
  2. Name as you like, e.g., imgbed-kv

3. Bind KV

In Pages project → Settings → Functions → KV namespace bindings:

Variable NameKV Namespace
KVSelect the namespace just created

4. Configure Environment Variables

In Pages project → Settings → Environment variables:

Variable NameRequiredDescription
GITHUB_TOKENGitHub Personal Access Token (global default)
ADMIN_PASSWORDAdmin password
RSA_PUBLIC_KEYRSA public key (base64)
RSA_PRIVATE_KEYRSA 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

  1. Visit the deployed domain
  2. Enter the admin password to log in
  3. 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

  1. Start uploading images

📡 API Endpoints

EndpointMethodAuthDescription
/api/authGETGet RSA public key
/api/authPOSTAdmin login verification
/api/imagesGETGet all repository images
/api/uploadPOSTUpload image
/api/deletePOSTDelete image
/api/batch-visibilityPOSTBatch set public/private
/api/randomGETRandom public image (configurable toggle)
/api/preview/{filename}GETPreview private repository images
/api/settingsGETGet settings
/api/settingsPOSTUpdate settings
/api/getSettingsUpdateTimeGETGet settings update time
/api/checkRepositoryStatusPOSTCheck 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>