万物之时

万物之时

万物之时的个人博客
github
blog
首页归档留言板

Tutorial for Building a Free Image Hosting Service Based on Cloudflare Pages and Telegram 577f6e7e6ead484da88a9b20b4461ee7

316
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
This tutorial explains how to set up a free image hosting service using Cloudflare Pages and Telegram. Key features include: 1. **Open Source**: The frontend is open for modifications. 2. **User-Friendly Upload**: Supports various file types, drag-and-drop, paste uploads, and batch uploads with real-time progress display. 3. **Copy Options**: Allows copying of links in Markdown, HTML, BBCode, and raw formats. 4. **Authentication and Security**: Includes upload authentication, domain restrictions, and IP statistics. 5. **Customizable Pages**: Users can customize backgrounds, logos, titles, and icons. 6. **Random Image API**: Provides a feature to fetch a random image from the host. 7. **Unlimited Storage**: Users can upload an unlimited number of images without server costs, utilizing Cloudflare's free tier. 8. **Image Moderation**: Offers an API for image review to filter inappropriate content. The deployment process involves creating a Telegram bot for authentication, setting up a Telegram channel, and configuring the project on Cloudflare. Users need to fork the GitHub repository, set environment variables, and bind a KV database for storage.

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 is open source (can be modified and packaged for use)

2. Cool Effects#

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

3. User-Friendly Uploading#

  • 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 need to be manually clicked after uploading; they can be directly displayed on the management page
  • Oversized images are compressed on the frontend to enhance upload stability and loading performance
  • Supports custom compression quality, with options to enable frontend and backend compression

4. Diverse Copying Options#

  • Supports full copy and individual copy (full copy means copying all links concatenated by line breaks)
  • 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 Measures#

  • 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 such as 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, which randomly returns an 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 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.

    https://tuwwzs.pages.dev/file/1729154237023_Screenshot_20241017_155651_edit_574428759597799.jpg

    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.

    https://tuwwzs.pages.dev/file/1729154241321_Screenshot_20241017_160513_edit_574445754749303.jpg

    https://tuwwzs.pages.dev/file/1729154241183_Screenshot_20241017_160520_edit_574457710440653.jpg

Select the Channel You Just Created and Grant the Bot Admin Permissions#

https://tuwwzs.pages.dev/file/1729154244368_Screenshot_20241017_160533_edit_574471031884085.jpg

Forward a Message from the Newly Created Channel to @VersaToolsBot to Obtain TG_CHAT_ID (Channel ID)#

https://tuwwzs.pages.dev/file/1729154245823_Screenshot_20241017_161503_edit_574486968755694.jpg

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

https://tuwwzs.pages.dev/file/1729153327657_Clip_2024-10-17_16-21-51.png

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

https://alist.sanyue.site/d/imgbed/202407201047300.png

  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, with corresponding environment variable names as TG_BOT_TOKEN and TG_CHAT_ID
  3. Bind KV Database:

    • Create a new KV database

      https://tuwwzs.pages.dev/file/1729153507708_Clip_2024-10-17_16-24-57.png

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

  4. Retry Deployment, and the project will be ready for use.
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.