Server build picture bed + PicGo configuration + Typora summary


title: Server Build Image Bed + PicGo Configuration + Typora Summary
date: 2022-03-14 22:12:13
tags:

  • server
  • PicGo
    categories:
  • Other practices
    cover: https://cover.png
    feature: false

1 Introduction

I used the CSDN map bed before, first of all, I would also send it to CSDN, and by the way, I can also visit it on my own website, and it is also convenient. But recently CSDN has added an anti-theft link, and all of them are hung up, so I want to build a picture bed by myself

Free image beds are always unreliable, so it is better to choose a paid one. Alibaba Cloud OSS, Tencent Cloud COS, and Qiniu Cloud are commonly used on the market. Alibaba Cloud OSS storage has 5 GB of free storage and traffic quota every month; Tencent Cloud COS storage has 6 months of free 50 GB storage quota; Qiniu Cloud has a permanent free quota of a certain capacity

However, after using it, I always feel that there are certain conditions and restrictions. Although there is a free quota, subsequent storage capacity, traffic, and number of requests must be billed. However, Alibaba Cloud does not seem to be counted unless it reaches a certain amount. Tencent Cloud is not sure, although As a personal blog, the price will not be very high, but I already have a server, so I want to set up a picture bed on my own server, which is convenient for management and transfer, and there are no other restrictions

2. Server build map bed

2.1 Install Nginx

First you need to install Nginx to start a website service

See another blog: The installation of Nginx in the summary of the use of lightweight application servers

2.2 Deployment configuration

1. First create a folder for storing pictures, here my path is/usr/java/fan/images

2. Add imga second-level domain name resolution record of , mainly for the convenience of management and viewing img.域名, and use it as the map bed address in the future. If there is no domain name, skip this step, and you can directly use the server IP in the future

3. Apply for an SSL certificate for the second-level domain name

It should be noted here that the purpose of this step is to add HTTPS to the image bed service . So if your primary domain name is a paid generic domain name SSL certificate, then the secondary domain names under it are all protected by HTTPS, and no additional operations are required. If it is a free single domain name certificate, you need to apply for the second-level domain name separately

This step is very important. Because if you don't add HTTPS, when you view pictures on websites that use HTTPS (most of them), they will fail to load. View the request through F12, and you can find that HTTPS is used by default to request pictures. Due to the browser security policy, access to insecure (non-HTTPS) websites requires manual authorization to allow access

If the image is directly accessed, the browser will have an authorization prompt, and you can choose to continue accessing, but it will not when the website is accessed to load the image, so the loading will fail. Although it can be loaded normally by directly accessing the image first and then manually authorizing it, most users will not think of this reason, and it is also very troublesome and unfriendly. At the same time, the local Typora access does not have this authorization operation, and it cannot be loaded directly, so HTTPS must be added

4. Enter the conf directory of Nginx and edit the configuration file of Nginxnginx.conf

5. Add server configuration, server_name is the second-level domain name resolution added above, the root path here is the root directory path of the website, that is, the path of the storage image folder created above, here is a relative path, starting from the Nginx installation directory Initial directory, deploy the above SSL certificate at the same time

For the deployment operation, see another blog: Lightweight Application Server Deployment SpringBoot Front-End Separation Project Configuration SSL Certificate Part

6. Then start Nginx, which is mentioned in the previous blog of installing Nginx, so I won’t go into details here

7. At this point, you can upload a picture to fan/imagesthe folder , and 域名/图片名you can access it through

3. PicGo

3.1 download

GitHub download address: Releases Molunerfinn/PicGo (github.com)

Select the corresponding system and digits to download

3.2 Installation

1. Double-click to open the exe file and select the installation user

2. Select the installation path and customize the path

3. Wait for the installation to complete

3.3 use

1. Download the plug-inpicgo-plugin-sftp-uploader

2. SFTP configuration

  • Image bed configuration name: freely defined
  • Website logo: free to define
  • Configuration file: Path to the configuration file for SFTP

3. SFTP configuration file, create the corresponding file under the above path

See the official configuration instructions for details: imba97/picgo-plugin-sftp-uploader

{
    
    
    // 网站标识
	"Fan": {
    
    
        // 图片网站的域名
		"url": "http://img.xxx.xxx",
        // 图片在网址中的路径,即网站根目录下的路径,这里我的网站根目录就是 fan/images
		"path": "/{year}/{month}/{fullName}",
         // 图片在服务器的真实路径
		"uploadPath": "/usr/java/fan/images/{year}/{month}/{fullName}",
        // 一般是服务器 IP
		"host": "124.xxx.xxx.90",
        // 端口
		"port": 22,
        // SSH 用户登录用户
		"username": "username",
        // SSH 用户登录密码
		"password": "password"
	}
}

4. Upload files, select SFTP upload

5. You can see the uploaded file on the server, and the folder is the path configured by the configuration file

6. At the same time, the browser can also access

4. Typora

Find the image option in the settings of Typora, choose to upload pictures when inserting pictures, then select PicGo as the upload service, and select the locally installed PicGo.exe file at the same time

In this way, when Typora inserts a picture, it can be automatically uploaded to the server

5. Additional advantages

Another problem when using OSS storage before is that it cannot be directly transferred to CSDN. When copying content, the corresponding OSS image link will prompt that the external link transfer failed

If you want to display it, you can only use <img>the format to refer to the picture, which is very inconvenient. There is no such problem when using the server image bed, it can be directly transferred to CSDN

Guess you like

Origin blog.csdn.net/ACE_U_005A/article/details/129548032