【picgo】【typora】Build a custom image bed on your own server

My blog
My solution is my own server+java project interface+nginx+picgo configuration personal picture bed

1. Server

Since the Seed Habit app was suddenly closed, all the diaries I wrote for several years have disappeared, and some online disks have also become yellow. Free things are suddenly charged (such as Tencent Cloud's cloud functions), and gitee is suddenly unable to make a picture bed.

So I don't want to store the pictures in some free or paid picture beds. I just have a Tencent cloud server.

I plan to store the pictures in my own server, which feels more reliable.

2. nginx configures static resources

(1) Set the nginx configuration file, when accessing the XXX domain name, it will automatically access the pictures in a certain folder.

  server {
    listen 80 ;
    server_name *.yiyongok.com;
    index index.html;
    location / {
	  #图床,访问picgo.yiyongok.com时，就会访问/tmp/upload下的静态资源
      if ($host ~ ^(picgo)\.yiyongok\.com) {
        root "/tmp/upload";
       }
    }
  }

(2) Just upload some pictures to the server directory /tmp/upload/test folder

(3) Visit and see, nginx configuration is successful~

3. Provide a picture upload interface, upload pictures to the folder configured by nginx

(1) Development interface

Because my server has a running java project, I just added an interface to upload pictures in the java project.

public class ImageUploadController {
		//图片保存的路径，和nginx中配置的一致
    @Value("${pic.path}")
    private String path;
    //图片访问的域名
    @Value("${pic.url}")
    private String URL_SERVER;

    //上传图片
    @PostMapping("/upload")
    public  String uploadImg(@RequestParam("imgFile") MultipartFile loadimg){
        //日期，将图片按照年月文件夹，比如2022，1月上传的图保存到202201文件夹下
        String format = DateUtil.format(new Date(), "yyyyMM");
        String pathFile =path+"/"+format;
        File f=new File(pathFile);
        if(!f.exists()){
            f.mkdirs();
        }
        //获取上传图片名称
        String filename = loadimg.getOriginalFilename();
        //拼接的图片路径
        String filepath=pathFile+"/"+filename;
        File file = new File(filepath);
        //上传图片
        try {
            loadimg.transferTo(file);
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        //返回图片访问url
        return URL_SERVER+"/"+format+"/"+filename;
    }
}

(2) Test interface upload

Return value after upload

(3) Can be accessed normally

4. picgo configures a custom picture bed and tests uploading pictures

(1) Download picgo

(2) Download the custom picture bed plug-in

(3) Configure a custom image bed, which is the interface and parameters in 3 (2)

(4) Test whether picgo can upload pictures successfully, just take a screenshot, click this button to upload quickly

The pictures just uploaded are normally displayed in the album, and you're done

5. Set picgo in markdown note software typora

After the screenshot is pasted into the note, the picture will be automatically uploaded to the picture bed and the picture will be inserted

typora preferences

6. Add signature

Uploading pictures in the above example is not safe, you can add some parameters yourself, and then add some signature algorithms

The parameters are configured in picgo, custom image bed settings. Add signature parameters (json) to custom body or request header

The interface can also use json to receive and check it.

7. Others

Although the Tencent cloud server has been used for several years without any downtime, there must be a planB for everything.

So there are things to consider slowly in the future

1. The picture bed file is automatically backed up regularly,

There are projects on github that can upload files to Baidu network disk from the command line

The initial idea is that the server writes a shell script to regularly back up pictures to Baidu Netdisk

2. Write the migration plan

Considering that in case the server becomes unavailable one day, the deployment steps of changing the server can be completed within half an hour to one hour

3. The scheme of changing domain names in batches in markdown notes

In case the domain name needs to be changed (for example, Tencent suddenly restricts access to the domain name in WeChat)

Buy another domain name + batch modify url in notes

At present, I see that there are links in the open source project batch modification notes, and I will study it when I have time.