Graph bed is to upload your local pictures to relevant service providers or personal servers, and then obtain the corresponding network access address of the picture, users can easily and quickly insert the picture into the article, the subsequent picture secondary use, migration, sharing will be very simple.

I used to use Gitee’s repository for my chart bed, and I use Gitee for my blog, weekly magazine, and some open source ebooks.

Recently, the flow review mechanism of Gitee locked my account, so all my historical pictures could not be accessed. Although I had no choice, I made psychological preparation when I used them. After all, it was illegal to use its warehouse resources.

I have two basic requirements for graph bed: stability and speed, so I will consider charging for free, and finally get the following solutions to share with you:

  • Github + JsDelivr
  • OSS + CDN
    • Payment: Tencent Cloud COS
    • Free: Backblaze + Cloudflare
  • VPS self-built

✨ lot + JsDelivr

Github has the same idea as Gitee, but the stability of Github is better in terms of personal experience so far, so I quickly switch to this solution in case of any problem with my chart.

It’s still easy to configure (you’ll use Github by default). Start by creating a new public repository:

Generally, after uploading a picture to the warehouse, it can already be used as a drawing bed, such as:

  • Warehouse address: github.com/howie6879/o…
  • Other users can access the address: raw.githubusercontent.com/howie6879/o…
  • Introducing JsDelivr accelerate address: cdn.jsdelivr.net/gh/howie687…

In the same picture above, you can click on the change of address to have a look. The operation mentioned above is that I manually upload the picture, but it is not necessary in actual operation. There are many useful tools to help us do this automatically.

  • PicGo: a cross-platform tool for quickly uploading images and getting links to images
  • UPic: The functions are the same as the above, supported by pure macOS system, so the interactive experience under MAC is much smoother than the above, and there is a corresponding mobile terminal APP

The two tools are used in the same way. You need to obtain a token for third-party mapping tools to create a Github mapping tool.

Click on the token access link and check the repo and user permissions:

Then you can configure the related information in the chart bed tool:

Github + JsDelivr is recommended for the following reasons:

  • Fast and convenient: only need to set up the warehouse configuration interface
  • Stable, after all, big vendors (but one caveatGithubRemember to change the picture warehouse when it is too large.
  • JsDelivrTo solveGithubSlow access and traffic issues in the country

OSS + CDN

Object Storage Service (OSS) is the Object Storage Service. Major manufacturers have the Object Storage Service, such as Tencent COS, Ali OSS, and Huawei OBS.

If you have high requirements on the stability and speed of the map bed, then you can consider this solution, OSS, there are free, there are paid, CDN is the same.

However, at present, most major manufacturers have free quota, and it doesn’t matter if they don’t. If the number of visitors of our blog is small, it will cost nothing every month. Now, I host all my notes to COS and synchronize them on multiple platforms, and it only costs a few cents a month.

Tencent cloud COS

Next, I will use Tencent cloud COS&CDN service as an example to achieve personal graph bed, other manufacturers are similar sets, but more introduction.

First enter the bucket list of Tencent Cloud COS and click Create bucket:

Pay attention to access permissions, remember to choose private read and write, do not allow public access to the files inside, in order to reduce the loss of malicious access. After the configuration is complete, the next step is created successfully.

For security purposes, it is not recommended to use the root user for direct access. Instead, we can create a child user for write operations.

Click Create sub-user and fill in the following figure:

Select type:

Fill in user information:

Validation is required to proceed.

Set user permissions:

You don’t have to choose anything. Just keep going.

Review information and permissions:

The SecretId and SecretKey of the subuser will be displayed and copied for later use.

Note: If you forget to save, you can go to user list -> Target User ->API key to obtain

Set sub-accounts for buckets:

Go back to the bucket list, click the created bucket, click Permission Management on the left, then click Bucket Access Permission, and then click Add User. Set the sub-account permissions as follows:

At this point, the map bed is configured. Open the map bed tool and input the SecretId, SecretKey and related information of sub-users:

You can upload a photo to test, and then open the file list under the bucket list, you can see the uploaded photo:

The access address of the uploaded image is: https://images- * * *. Cos.ap-guangzhou.myqcloud.com/uPic/tCyEU0.png, but in order to prevent malicious Access, and save the traffic fee so I set up a private visit, so prompt Access Denied Access images.

Finally, directly enable CDN domain name acceleration:

To save on traffic costs, consider setting the cache time to one year in the authentication configuration and restricting access to sources with Referer lists.

Backblaze + Cloudflare

This scheme has the following advantages:

  • The first 10 gigabytes of data per month are free
  • Cloudflare does CDN acceleration
  • You can customize the domain name

To get started, you need to:

  • The domain name
  • Drive account
  • Cloudflare account: Follow the instructions on the website to access the domain name

Backblaze B2 is a cloud storage solution, and the reason for choosing it is that the first 10 gigabytes of storage is completely free, which is perfectly adequate for making a graph bed.

To Create a Bucket, Create an account (just enter your email address) and click Create a Bucket:

Enter the name and remember to select Public permission:

To enable third-party software to use Backblaze, you need to obtain the Application Keys as follows:

  • Click on the App Keys
  • Click on the Application Keys
  • Enter the information to create a vm

When the key is created, remember to save it, because it is automatically not displayed after the page is closed.

To obtain the bucket domain name, click Browse Files to upload an image directly. After uploading successfully, click on the image directly and you will see the following information:

Extract the domain name information displayed in the Friendly URL, for example: https://f***.****.com/, and resolve it at Cloudflare:

If the domain name is not added successfully in the previous step, resolve the DNS Settings directly under the domain name:

Next click on SSL/TLS on the left and set ** full (strict)** mode:

Finally, set the following two rules on the rules page:

There are also some configurations that need to be set in Backblaze. Since it is not cached by default, we need to add the following configuration to Bucket Info of Bucket Settings:

{"cache-control": "max-age=43200000"}
Copy the code

CORS Rules: Share everything in this bucket with all HTTPS origins

Finally, you have a free map bed with a custom domain name:

#The address form is as follows
https://img.turingark.com/file/howie-img/wechat_howie.png
Copy the code

You can also upload using uPic:

VPS self-built

If you have a server at hand, then you can consider the self-built map bed service, there are still many optional map bed tools on the market, here I choose Lsky-Pro to try to explore the feasibility of self-built map bed.

In fact, there are a lot of open source chart bed projects. At present, the update and functions of LSky-Pro project are in the forefront, and you can choose to upload pictures to Tencent Cloud COS or B2, so it is directly used for testing.

It is very simple to deploy and use it. You can deploy it directly with Docker, and refer to this project for the specific process. The final effect is as follows:

You can set login to upload, so as to achieve permission control, and you can set the image to be stored in any location as shown below:

After testing, it is still very convenient to use. Finally, it is recommended to give your domain name a layer of CDN, which can be controlled by your own choice.

instructions

Solutions are mentioned in the article the author personally test on pit record, based on the stable & speed between the two premise, therefore does not consider the third party figure bed tools, basically is to borrow mature building services for images, the current should be covers basic solution on the market of images, of course, if you have any better solution added welcome message.

If I am not asked to recommend a quick and easy solution, I would choose Github + JsDelivr. If I want to customize my domain name, I recommend Backblaze + Cloudflare. If I want to make it all work and have money, I can just go to OSS service of big factory.

PS: If you want to communicate the solution of the chart bed, you can find my wechat in the lower right corner of the official account. You can also directly search [Howie6879] to add me.

Relevant references are as follows:

  • How to use Tencent Cloud COS+CDN to build a map bed of their own
  • Free Image Hosting With Cloudflare Transform Rules and Backblaze B2
  • Build a free custom domain map bed using Backblaze B2 and Cloudflare Workers