万物之时

Free Image Hosting Setup Tutorial Based on Cloudflare Pages and Telegram#

type: article
status: published
date: 2024/10/17
slug: tuiljni
summary: Free Image Hosting Setup Tutorial Based on Cloudflare Pages and Telegram
tags: GitHub, image hosting, tools
category: tutorial

Project Address https://github.com/MarSeventh/CloudFlare-ImgBed#

1. Introduction#

1. Open Source#

• Frontend open source (modifiable and packable for use)

2. Cool Animations#

• Smooth and silky transition animations~
• Uploading files creates a breathing light effect

3. User-Friendly Upload#

• Supports most common images, videos, GIFs, etc.
• Supports multiple upload methods (drag and drop, paste)
• Paste upload supports files and URLs
• Supports batch uploads (no limit on the number of files selected at once, but to ensure stability, a maximum of 10 files can be uploaded simultaneously)
• Displays real-time upload progress
• Images do not require manual clicking after upload and can be displayed directly on the management page
• Oversized images are compressed on the frontend to enhance upload stability and loading performance
• Supports custom compression quality, customizable frontend and backend compression features

4. Diverse Copy Options#

• Supports full copy and individual copy (full copy means concatenating all links with line breaks before copying)
• Supports copying in Markdown, HTML, BBCode, and raw link formats
• Intuitively displays links in four formats after upload completion

5. Supports Authentication and Anti-Abuse#

• Supports Web and API upload authentication (thanks to hl128k)
• Supports access domain restrictions (thanks to hl128k)
• Supports upload IP statistics

6. Supports Page Customization#

• Page background supports various modes including single image, custom multi-image carousel, Bing random image carousel, etc.
• Customizable image hosting name and logo
• Customizable website title and icon

7. Some Small Features#

• Supports random image API, returning a random image from the image hosting

8. All Features of the Original Version#

1. Unlimited image storage, you can upload an unlimited number of images

2. No need to purchase a server, hosted on Cloudflare's network, completely free as long as usage does not exceed Cloudflare's free quota

3. No need to purchase a domain name, you can use the free subdomain *.pages.dev provided by Cloudflare Pages, and it also supports binding custom domain names

4. Supports image review API, which can be enabled as needed; once enabled, inappropriate images will be automatically blocked and will not load

5. Supports backend image management, allowing for online preview of uploaded images, adding whitelists, blacklists, and other operations

2. Deployment#

1. Create a Telegram Bot to Obtain TG_BOT_TOKEN#

1. Send /newbot to @BotFather and follow the prompts to enter the bot's note, username, and other information. Successfully created, the red part shown in the image is TG_BOT_TOKEN.

   

   Create a Telegram Channel to Obtain TG_CHAT_ID#

   Create a new channel and add the bot to the channel as shown in the image below.

   

   

Select the channel you just created and grant the bot admin permissions#

Forward a message from the newly created channel to @VersaToolsBot to obtain TG_CHAT_ID (channel ID)#

Deploy on Cloudflare#

Leveraging CF's powerful capabilities, you can deploy this project in just a few simple steps and have your own image hosting.

1. Fork https://github.com/MarSeventh/CloudFlare-ImgBed

1. Open Cloudflare Dashboard, go to the Pages management page, select to create a project, and choose Connect to Git provider

1. Follow the prompts on the page to enter the project name, select the git repository to connect, and click Deploy Site
2. Add the previously obtained TG_BOT_TOKEN and TG_CHAT_ID to the environment variables, corresponding to environment variable names TG_BOT_TOKEN and TG_CHAT_ID
3. Bind KV Database:

   • Create a new KV database

     

   • Go to the project's corresponding Settings > Functions > KV Namespace Binding > Edit Binding > Variable Name, fill in img_url, and select the KV database you just created

4. Retry Deployment, and the project will be ready for use.