demo: https://img.zburu.com/
Today I will share how to use GitHub as an image hosting service, and first 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 out and the effect is great. The documentation clearly explains how to use the image hosting service, so I won't go into details here. This article only introduces how to compile and package it, targeting the community.
The process is very simple and requires preparing the node environment in advance.
1. Download the source code#
Go to https://github.com/XPoet/picx and then click "Download Zip".
2. Execute the command#
After downloading and extracting the zip file, open the terminal by right-clicking in the blank space.
If you already have the node environment, you can directly execute the following command. If not, go ahead and install the node environment first. Here, we assume that the environment is already installed (https://nodejs.org/zh-cn/).
Both of the following methods work, 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 process.
# Build
npm run build
# or
yarn build
After the build is complete, a dist folder will be generated. This is the packaged file, which contains an index.html file and other static resources.
3. Where should I upload it?#
At this point, you just need to upload them to the directory of the domain you want to access.
For example, if I'm using the Hugo blogging program, I would 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.
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.
Alternatively, 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 issues#
- If the developer updates the image hosting service in the future, you can repeat the steps from the first step: download, build, and upload.
If you have any other questions, please leave a comment in the comment section~~