💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

• 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老
• 导航
  • 檀越剑指大厂系列:全面总结 java 核心技术点,如集合,jvm,并发编程 redis,kafka,Spring,微服务,Netty 等
  • 常用开发工具系列:罗列常用的开发工具,如 IDEA,Mac,Alfred,electerm,Git,typora,apifox 等
  • 数据库系列:详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
  • 懒人运维系列:总结好用的命令,解放双手不香吗?能用一个命令完成绝不用两个操作
  • 数据结构与算法系列:总结数据结构和算法,不同类型针对性训练,提升编程思维,剑指大厂

    非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

博客目录

• • 一.基础介绍
  • • 1.涉及的软件
    • 2.基本原理
    • 二.实战步骤
    • • 1.指定目录
      • 2.上传图片
      • 3.nginx 配置
      • 4.配置解析
      • 5.验证
      • 三.typora 配置
      • • 1.图片规则设置
        • 2.原理解析
        • 四.PicGo 设置
        • • 1.什么是 PicGo?
          • 2.主要功能
          • 3.插件下载
          • 4.SFTP 上传配置
          • 5.blog_upload.json 详解

            一.基础介绍

            1.涉及的软件

            • 云服务器 必须
            • nginx 必须
            • Git 必须
            • picgo 非必须
            • typora 非必须

              2.基本原理

              1. 将图片上传到云服务的某个目录
              2. 在 nginx 配置文件中,配置静态文件代理
              3. 直接访问服务器代理的静态文件路径可以直接访问上传的图片

              二.实战步骤

              1.指定目录

              在服务器上创建了一个/kwan/img 的层级目录,并且这个目录是跟自己的 git 保存图片的仓库是挂钩的,方便图片持久化,定期同步到 git 仓库中。

              mkdir -p /kwan/blogimg
              

              2.上传图片

              1. 通过代码上传
              2. 通过 ftp 上传
              3. 通过 scp 上传
              4. 上传图片到/kwan/blogimg 目录下

              3.nginx 配置

              # For more information on configuration, see:
              #   * Official English Documentation: http://nginx.org/en/docs/
              #   * Official Russian Documentation: http://nginx.org/ru/docs/
              user nginx;
              worker_processes auto;
              error_log /var/log/nginx/error.log;
              pid /run/nginx.pid;
              # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
              include /usr/share/nginx/modules/*.conf;
              events {
                  worker_connections 1024;
              }
              http {
                  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                                    '$status $body_bytes_sent "$http_referer" '
                                    '"$http_user_agent" "$http_x_forwarded_for"';
                  access_log  /var/log/nginx/access.log  main;
                  sendfile            on;
                  tcp_nopush          on;
                  tcp_nodelay         on;
                  keepalive_timeout   65;
                  types_hash_max_size 2048;
                  include             /etc/nginx/mime.types;
                  default_type        application/octet-stream;
                  # Load modular configuration files from the /etc/nginx/conf.d directory.
                  # See http://nginx.org/en/docs/ngx_core_module.html#include
                  # for more information.
                  include /etc/nginx/conf.d/*.conf;
                  server {
                      listen       80;
              	server_name  qinyingjie.top;
                      root         /usr/share/nginx/html;
                      # Load configuration files for the default server block.
                      include /etc/nginx/default.d/*.conf;
                      location / {
              	       root   html;
                  	       index  index.html index.htm;
              	       proxy_pass http://127.0.0.1:8080/;
                     	}
              	location ~ .*\.(gif|jpg|jpeg|png|jfif|webp)$ {
              	         root  /kwan/;
                               autoindex    on ;
                      }
                      error_page 404 /404.html;
                          location = /40x.html {
                      }
                      error_page 500 502 503 504 /50x.html;
                          location = /50x.html {
                      }
                  }
              # Settings for a TLS enabled server.
              #
              #    server {
              #        listen       443 ssl http2 default_server;
              #        listen       [::]:443 ssl http2 default_server;
              #        server_name  _;
              #        root         /usr/share/nginx/html;
              #
              #        ssl_certificate "/etc/pki/nginx/server.crt";
              #        ssl_certificate_key "/etc/pki/nginx/private/server.key";
              #        ssl_session_cache shared:SSL:1m;
              #        ssl_session_timeout  10m;
              #        ssl_ciphers PROFILE=SYSTEM;
              #        ssl_prefer_server_ciphers on;
              #
              #        # Load configuration files for the default server block.
              #        include /etc/nginx/default.d/*.conf;
              #
              #        location / {
              #        }
              #
              #        error_page 404 /404.html;
              #            location = /40x.html {
              #        }
              #
              #        error_page 500 502 503 504 /50x.html;
              #            location = /50x.html {
              #        }
              #    }
              }
              

              4.配置解析

              location ~ .*\.(gif|jpg|jpeg|png|jfif|webp)$ {
                 root  /kwan/;
                       autoindex    on ;
              }
              

              这是一个 Nginx 配置段，它使用location指令来匹配以 gif、jpg、jpeg、png、jfif、webp 为扩展名的文件，并在匹配成功时执行相应的指令。下面是对这个配置段的详细解析：

              1. location ~ .*\.(gif|jpg|jpeg|png|jfif|webp)$ {: 这是一个location块，用于匹配请求的 URL。~表示进行正则表达式匹配，而.*\.表示匹配任意字符（包括空字符）后面跟着一个点，最后(gif|jpg|jpeg|png|jfif|webp)是一个正则表达式组，匹配文件扩展名为 gif、jpg、jpeg、png、jfif 或 webp 的请求。$表示匹配字符串的结尾。

              2. root /kwan/;: 当请求匹配成功时，使用/kwan/作为文件根目录。这意味着 Nginx 将在/kwan/目录中寻找匹配请求的文件。

              3. autoindex on;: 启用目录列表功能。如果请求的是一个目录而不是具体的文件，Nginx 将显示该目录下的文件列表。

              综合起来，这个配置段的作用是，当用户请求以 gif、jpg、jpeg、png、jfif 或 webp 为扩展名的文件时，Nginx 将在/kwan/目录中查找相应的文件。如果请求的是一个目录，Nginx 将显示该目录下的文件列表。

              5.验证

              中间省了 nginx 的启动,可以参考以往的 nginx 的安装与启动资料。

              #访问图片的连接
              http://ip:80/img/xxx.png
              

              三.typora 配置

              1.图片规则设置

              

              2.原理解析

              在 typora 贴入图片时,会自动上传图片,上传图片的功能由 picgo 软件提供,然后上传的图片优先使用相对路径并自动转义图片的 url。

              四.PicGo 设置

              1.什么是 PicGo?

              PicGo 是一个开源的图片上传工具，它可以帮助用户将本地图片上传到各种图床（图像存储服务）。图床通常是云存储服务，用于存储和托管用户上传的图片，使其能够在互联网上访问。用户可以通过提供的图床配置，将图片上传到特定的云服务中，然后获取图片的外链地址，方便在网页、博客或社交媒体上分享图片。

              2.主要功能

              PicGo 的主要功能包括：

              1. 支持多种图床： PicGo 支持多个图床的配置，包括但不限于七牛、腾讯云、GitHub 等。用户可以选择他们偏好的图床服务。

              2. 本地上传和截图上传： 用户可以通过 PicGo 界面直接选择本地图片上传，也可以使用截图工具进行截图后上传。

              3. 支持快捷键操作： PicGo 提供了一些快捷键，使用户可以更便捷地进行上传操作。

              4. 自定义命名规则： 用户可以根据自己的需求定义上传后图片的命名规则。

              5. 支持压缩： PicGo 还提供了图片压缩的功能，以减小图片文件大小。

              PicGo 的功能和特性可能会在不同版本中有所变化，而且截至我最后更新的时间，可能有新的版本发布。因此，为了获取最新信息，建议查阅 PicGo 的官方文档或相关社区。

              3.插件下载

              在插件市场中搜索 sftp-uploader 1.3.0,并安装此插件

              

              4.SFTP 上传配置

              1. 设置网站标识,Gbolg,自定义,但是最好跟 json 文件的 key 保持一致
              2. 在本地新建 blog_upload.json 文件,内容如下所示
              3. picgo 指定本地 json 配置文件所在路径
              4. 这样在上传图片的时候,会默认通过 sftp 的方式上传到服务器的指定目录

              ╰─➤   cat  /Users/qinyingjie/Documents/typora/blog_upload.json
              {
                "Gblog": {
                  "url": "https://www.qinyingjie.top",
                  "path": "/blogimg/{fullName}",
                  "uploadPath": "/kwan/blogimg/{fullName}",
                  "host": "43.139.90.182",
                  "port": "22",
                  "username": "root",
                  "password": "xxxx"
                }
              }
              

              

              5.blog_upload.json 详解

              {
                "Gbolg": {
                  "url": "https://www.qinyingjie.top",
                  "path": "/blogimg/{fullName}",
                  "uploadPath": "/kwan/blogimg/{fullName}",
                  "host": "43.139.90.182",
                  "port": "22",
                  "username": "root",
                  "password": "xxxx"
                }
              }
              

              这是一个用于配置图床（图像存储服务）的 JSON 格式配置文件。其中的字段含义如下：

              **Gblog:**相当于一个名字

              • url: 图床的主要 URL，即图片上传后在云端访问的地址。在这里，是 https://www.qinyingjie.top。

              • path: 上传图片的路径模板，包含一个变量 {fullName} 用于替换为实际的文件名。在这里，是 “/blogimg/{fullName}”。

              • uploadPath: 图片在图床上保存的实际路径。在这里，是 “/kwan/blogimg/{fullName}”。

              • host: SSH（Secure Shell）连接的目标主机 IP 地址或主机名。在这里，是 “43.139.90.182”。

              • port: SSH 连接的端口号。在这里，是 “22”，这是 SSH 协议的默认端口。

              • username: 连接目标主机时使用的用户名。在这里，是 “root”。

              • password: 连接目标主机时使用的密码。在这里，是 “xxxx”。需要注意的是，明文密码在配置文件中是一种潜在的安全风险，更安全的做法是使用 SSH 密钥进行认证而非密码。

                这个配置文件描述了如何将图片上传到指定的图床，并提供了与图床服务器的 SSH 连接所需的信息。在使用这个配置文件时，PicGo（或其他类似工具）会使用 SSH 协议将本地图片上传到远程服务器上指定的路径。上传后，图床会生成可公开访问的 URL，用户可以在网页、博客等地方使用这些 URL 来展示图片。

                觉得有用的话点个赞 👍🏻 呗。

                ❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

                💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

                🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙

                

                欢迎加入 CSDN 红包通知群，红包了领到手软🎁🎁🎁。