Before using the MinIO + PicList image hosting solution, I have also built my own image hosting platforms such as LanKong, EasyImages2, and Chevereto. However, they are more like temporary solutions for others to use, rather than for personal use, and they are not very intuitive.
The MinIO + PicList solution is simple: MinIO is responsible for storing and providing download URLs for images, while PicList is used for uploading images and constructing URLs.
Introduction to MinIO as an Image Hosting Service#
MinIO is an object storage system, which is essentially a network directory that allows you to upload and download files and access them through URLs.
- If we upload an image to MinIO and construct the correct URL, we can display the image on a webpage - image hosting 🎉
- If we upload a video, we can directly play the video on a webpage (assuming the browser supports the video format, such as mp4) - video hosting 🎉
- If we upload audio, it becomes audio hosting
- If we upload regular files, we can use it as a file sharing platform
Installing MinIO: Self-hosted Object Storage - Building an Efficient and Reliable Data Storage System - Technique (vfly2.com)
Manually uploading and constructing URLs is completely possible. The download link format for uploaded files is as follows (replace the IP or domain name, bucket name "vfly2", and file name "file.name", and note that the port is 9000):
http://ip:9000/vfly2/file.name
For example, if you create a bucket called "imagesbed" in MinIO and upload an image named "vfly2technique.png" to it, the URL for this image would be: http://imgbed.ahfei.blog:9000/imagesbed/vfly2technique.png. You can view the image by accessing this URL in a browser:
When writing an article in Markdown format and want to insert this image, simply use the specified format:
If you automate the process of uploading and constructing URLs using a tool, it becomes even more convenient. The open-source tool PicList is designed specifically for this purpose.
PicList#
PicList is an efficient cloud storage and image hosting platform management tool, developed based on PicGo. It supports a wide range of storage methods, including WebDAV, S3 API compatible platforms, Tencent COS V5, GitHub, etc., and also has plugin functionality, with plugins available to support MinIO.
GitHub: Kuingsmile/PicList: An image upload and manage tool, base on PicGo (github.com)
Installing PicList#
Download link: https://github.com/Kuingsmile/PicList/releases. Find the desired version and download and install it.
MacOS users can now use Homebrew to install PicList. Simply execute the following command:
brew install piclist --cask
Uninstall command:
brew uninstall piclist
Configuring PicList to Use MinIO as an Image Hosting Service#
- In the "Plugins" interface, search for "MinIO" and install the plugin by herbertzz. Its GitHub address is https://github.com/Herbertzz/picgo-plugin-minio. (You may need to install nodejs and restart your computer for it to take effect)
- In the "Image Hosting" section, select "MinIO Image Hosting" and edit the configuration. The following information needs to be provided:
- endPoint: The domain name or IP address of the server, ib.ahfei.blog
- port: 443
- useSSL: Whether to enable SSL, select "Enable"
- accessKey: The username set when installing Minio Server, vfly2
- secretKey: The password set previously, pass_vfly2_word
- bucket: The name of the bucket created, imagesbed
- Save the configuration
- In the "Upload" section, select the image hosting service and try uploading an image to see if it succeeds (in practice, if the network connection to the server is not good, it is easy to fail for files larger than 1 MB)
Using PicList with Obsidian#
Briefly, automatically upload images to the image hosting service when dragging them into Obsidian.
- Install the "Image Auto Upload Plugin" in Obsidian
- Go to the plugin settings page and:
- Change the default uploader to "PicGo (app)"
- Set the "PicGo server upload interface" to "http://127.0.0.1:36677/upload"
- The plugin also supports cloud deletion through PicList. Fill in the deletion interface as "http://127.0.0.1:36677/delete"
- Choose other settings as needed
- Test by dragging an image into Obsidian
Video Hosting#
As mentioned earlier, it is simply constructing the URL for the video file in a specific format. Replace $url with the actual URL:
<video controls> <source src="$url"> not support video tag. </video>
For example, in Obsidian, HTML tags are supported, so inserting a paragraph like this will insert a video:
<video controls> <source src="https://ib.ahfei.blog/videobed/lightningrod-vid_wg_720p.mp4"> not support video tag. </video>
If it doesn't display, it's because this platform doesn't support it. You can check the effect on the blog.
Audio Hosting#
This can be used for self-made flashcards in Anki, with the format:
<audio controls> <source src="$url" type="audio/mpeg"> not support audio tag </audio>
For example:
<audio controls> <source src="https://ib.ahfei.blog/audiobed/indulge-23-09-54.mp3" type="audio/mpeg"> not support audio tag </audio>
If it doesn't display, it's because this platform doesn't support it. You can check the effect on the blog.
Sharing Regular Files#
Just learn how to construct the URL. The format is:
http://ip:9000/bucket_name/file.name
Then you can directly download it. Here, I would like to recommend the open-source automatic download tool created by AhFei: Deployment Process of UpdateFetch - Technique (vfly2.com). It uses MinIO to store files, making it convenient for sharing.
Original article link: https://technique.vfly2.com/2024/03/self-hosted-image-hosting-service/
Copyright Notice: All articles on this blog, unless otherwise specified, are original works by AhFei and are licensed under CC BY-NC-SA 4.0. Please indicate the source as Technique (technique.vfly2.com).