Use PicGo to build a personal drawing bed

A brief introduction of map bed

A map bed is generally a server that stores images. When writing Markdown documents, I often have trouble with local images that don’t have links, and I built my chart bed to solve this problem.

Url overview

Example: www.aspxfans.com:8080/news/index…. Raw.githubusercontent.com/jianhunxia/…

A complete URL includes:

• The partial
• Domain name part
• Port part
• Virtual directory section
• File name section
• Parameters of the part
• The anchor part

1. Protocol part: The protocol part of the URL is HTTP, which indicates that the web page uses HTTP. There are many protocols that can be used on the Internet, such as HTTP, FTP, and so on. In this example, HTTP is used. 2. Domain name part: The domain name part of the URL is www.aspxfans.com. In a URL, the IP address can also be used as the domain name. 3. Port: The port is followed by the domain name, and the domain name and port are separated by colons (:). The port is not a required part of a URL, and the default port 4 is used if the port part is omitted. Virtual directory part: the virtual directory part begins with the first slash after the domain name and ends with the last slash. The virtual directory is also not a required part of a URL. In this example, the virtual directory is /news/. 5. File name: Start from the last slash (/) after the domain name to? Is the filename part, if there is no? , starts from the last "/" after the domain name to"# "is the file part, if there is no"?" And "#", then from the last "/" after the domain name to the end, is the filename part. In this case, the file name is index.asp. The file name portion is also not a required part of a URL, and if omitted, the default file name is used6. Parameter part: From "? To"The part between # "is the parameter part, also known as the search part, query part. The parameter part in this example is "boardID=5&ID=24618&page=1". A parameter can have multiple parameters separated by ampersand (&).7. Anchor part: HTTP requests do not include anchor part.# "From the beginning to the end, it's the anchor part. The anchor part in this example is "R_70732423". The anchor part is also not a required part of a URL.Anchor function: scroll to the anchor position when opening the user page. For example: an HTML page with a piece of code, the URLhashFor r_70732423Copy the code

Two, several ways to build a personal chart bed

• Ali OSS + PicGo
• Github + PicGo
• Seven niuyun + PicGo
• Use gulp to write scripts to upload seven cows

1. Introduction to PicGo

PicGo is an excellent open source graphic bed tool that automatically uploads local images to the server and returns links. It is a software developed with Electron vue, which supports 8 common picture bed such as Weibo, Qiuniuyun, Tencent Cloud COS, Youbaiyun, GitHub, Ali Cloud OSS, SM.MS, imgur, etc., with powerful function and easy to use.

PicGo download address

2. Github + PicGo built the map bed

Refer to the tutorial

This is simple, but the downside is that the images are stored on Github’s servers, which can be slow to access.

3. Ali Cloud OSS + PicGo set up the map bed

Refer to the tutorial

A few things to note:

• To add a custom domain name, use an unused domain name. You can create a custom secondary domain name
• After adding the Ali OSS configuration for PicGo, set it to the default map bed

4. Seven Niuyun + PicGo build picture bed

Refer to the tutorial

This is also the way I use it now, with a few points to note:

• Seven cow test domain name valid for 30 days, it is best to buy a domain name
• Add the domain name corresponding to your storage space in domain name resolution
• Add a bound domain name to your seven Cows storage space
• Uploading a picture with the same name will overwrite it. Add parameters on the link to see the new picture

5. Upload qiniuyun + gulp script

$yarn add gulp gulp-qiniu 2. Configuration script Command Add the following command to the scripts of package.json"upload": "gulp qiniu"Gulpfile. js var gulp = require("gulp");
var path = require("path");
var qiniu = require("gulp-qiniu");

// file upload tasks
var imageSrc = path.resolve(__dirname, "src/assets/img/*.*");

gulp.task("qiniu".function (done) {
  gulp.src(imageSrc).pipe(qiniu({
    accessKey: "The accessKey on your cloud.",
    secretKey: "SecretKey on your cloud seven.",
    bucket: "The name of the storage space on your cloud.",
    private: false
  }, {
      dir: 'Create a custom storage path, such as img/',
      version: false
    })).on('finish'.done);
});

// combine tasks
gulp.task('upload', gulp.series(['qiniu'].function (done) {
  done(a); })) module.exports = gulp; 4. Use the script to upload $YARN upload of all pictures in the directory specified in gulpfile.jsCopy the code

A few things to note:

• You also need to do a good job of domain name and resolution
• By default, images that have already been uploaded will be skipped, and modified images with the same name will be overwritten
• You can access the file using the configured domain name, configured storage path, and image name

Upload files to Qiniuyun

Command line tool qshell, using qshell to synchronize directories, qshell Github documents

1. Qshell uploads files

Download the qshell command line tool file. 2. Rename it qshell, create a directory qshell in the user root directory, and copy the file to the directory $cd~ $mkdir qshell && cp/Users/user/Downloads/qshell ~ / qshell 3, adding shell path to the environment variable $open file ~ /. Following add a line:export PATH=$PATH:/Users/user/qshell
$ source~/. Bash_profile $qshell --version // check whether the configuration is successful 4. Add Your qshell account <Your AccessKey> <Your SecretKey> 5 $cd~/qshell $touch uploade.conf add the following configuration: {"src_dir" : "/Users/user/Desktop/resource/static"// The directory where you want to upload the file"ignore_dir" : true// Ignore relative paths to prevent repeated uploads"bucket" : "jianhao-static"$qshell qupload upload.conf $qshell qupload upload.conf $qshell qupload upload.conf $qshell qupload uploadsCopy the code

4. Common problems

1, PicGo clipboard upload picture error

Error message:

Error creating a JP2 color space from ICC profile. Falling back to sRGBCopy the code

Find a temporary solution in the Picgo project issue:

System Preferences - Display - Color - Normal RGBCopy the code

Ps: The author will fix this bug in the next version

To be continued…