demo: https://img.zburu.com/
Today, I will share how to use Github as an image hosting service, and first of all, I recommend this tool called picx.
Github repository: https://github.com/XPoet/picx
All the images in this article are uploaded using this tool and then accelerated through Staticaly (the link is automatically generated during the upload).
You can set up automatic compression and transcoding to the webp format.
A CDN-accelerated image hosting management tool developed based on the GitHub API. No need to download or install, use it online on the web! Free! Stable! Convenient! Fast!
After looking at the source code, it is written in Vue and is completely static with local storage, so there is no backend.
This means that we can also deploy it under our own domain name instead of using the domain name provided by the developer. Although there is no difference in doing so, let's give it a try.
I will provide a packaged link at the end (packaging the source code directly without any modifications), download it and upload it to your domain space to use.
Documentation: https://picx-docs.xpoet.cn/tutorial/get-start.html
This is the official documentation. I tried it and the effect is great. The documentation clearly explains how to use the image hosting service, so I won't repeat it here. This article only introduces how to compile and package it, targeting the community.
The process is very simple and requires preparation of the node environment in advance.
1. Download the source code#
Go to https://github.com/XPoet/picx and then Download Zip.
2. Execute the command#
After downloading and extracting, come to this page, then right-click in a blank area and open the terminal.
If you already have the node environment, you can directly execute the following command. If not, go ahead and install the node environment. Here, we assume that the environment is already installed. (https://nodejs.org/zh-cn/).
Both of the following methods work and there is no difference.
# Install dependencies
# This process may be slow due to network issues
npm install
#or
yarn
After the dependencies are installed, start the build.
# Build
npm run build
# or
yarn build
After the build is complete, a dist folder will be generated, which contains the packaged files, including an index.html and other static resources.
3. Where should I upload?#
At this point, you just need to upload them to the directory of the domain you want to access.
For example, if I am using the Hugo blogging program, I first create a folder named img under content (you can use any name, just make sure it doesn't conflict with other file names). Then, copy all the files in the dist folder to the /content/img/ folder.
This way, after executing the hugo command, it will be packaged into the public folder, and then you can directly access https://zburu.com/img to use the image hosting service.
Or you can upload it to any space you want, there are no restrictions~~
Refer to the documentation on how to use the image hosting service, it is explained in detail above.
https://picx-docs.xpoet.cn/tutorial/get-start.html
4. Other questions#
- If the developer updates the image hosting version later, you can repeat the steps from the beginning, download, build, and upload.
If you have any other questions, please leave a comment in the comment section~~