Many friends use various image hosting tools when creating personal websites or blogs. After all, it is necessary to insert images when writing articles. I am no exception. Let's take a look at the tools I have used before.
- Initially, I used some free image hosting websites, such as sm.ms, but later abandoned them due to security and stability concerns.
- Then I stored the images in GitHub and Gitee repositories (the drawback is that GitHub's access speed is a bit awkward, Gitee is actually good, but it feels strange to use).
- Alibaba Cloud OSS storage bucket (works well, with the PicGo software, only 9.9 per year, but the links are awkward, direct downloads cannot be right-clicked to access the image. I searched for a solution, but it was too troublesome, so I put it aside and it's still there).
- Later, I built a website on my own server and put the images in it. When using them, I directly referenced the links (the drawback is that uploading is too cumbersome, and the images take up too much memory, affecting the server's performance).
- And now, the highlight of today, autoPicCdn, an open-source software.
It also implements the image hosting function based on GitHub. Later, I learned that jsDelivr can be used to accelerate resources, and autoPicCdn is based on this function.
Today, let's talk about the process of configuring autoPicCdn with Baota Panel!
Preparation#
- Go to the GitHub repository and download the resources to your local machine.
https://github.com/yumusb/autoPicCdn
- Create a new repository on GitHub with a name of your choice. Mine is shuxhan/pic-cdn, simple and easy to understand.
- Go to this page https://github.com/settings/tokens to generate a token with write permissions (check repo: Full control of private repositories and write, then click OK. A token will be generated. Remember it, it's best to copy it to your notepad, otherwise it won't be displayed again when you refresh the page).
Then unzip the file.
Upload to the Server#
First, add a new site using your own domain name, such as img.shuxhan.com, and then create a database.
After the site is successfully created, enter the directory and delete the default generated files, then click Upload and find the previously unzipped files to upload.
Configuration File#
Find the up.php configuration file in the directory.
Configure the following two places, the specific content is in the code.
// Required
define("TYPE","GITHUB"); // Select GitHub
//define("TYPE","GITEE"); // Select Gitee, if using Gitee, you need to manually create a master branch, you can see here: https://gitee.com/help/articles/4122
define("USER","shuxhan"); // Your GitHub/Gitee username
define("REPO","pic-cdn"); // Must be a public repository under the above username
define("MAIL","[email protected]"); // The email doesn't matter, you can write anything
define("TOKEN","971b0a96ff5af545d5fe081f829cf5542007e70b");
// For GitHub, go to this page https://github.com/settings/tokens to generate a token with write permissions (check repo: Full control of private repositories and write:packages)
// For Gitee, go to this page https://gitee.com/personal_access_tokens
// Database configuration file
// Please make sure to import the pic.sql file in the current directory into your database
$database = array(
'dbname' => 'img', // Your database name
'host' => 'localhost',
'port' => 3306,
'user' => 'img', // Your database username
'pass' => 'img', // The password corresponding to your database username
);
Then the most important step is to import the pic.sql file in the directory into the database that was just created and linked. First, right-click and copy the pic.sql file, then go to the path
Click Paste.
Test Access#
Open your browser and enter the bound site.
Then take a screenshot, drag it to the upload window, and it will show upload success. The markdown for the image is displayed below, which can be used when writing articles!
With jsDelivr acceleration, the results are very satisfying. From now on, I have decided to use GitHub + jsDelivr + autoPicCdn as my image hosting tool!