实战:完美解决md图床问题-nginx图床-2024.8.4(测试成功)

实战:完美解决md图床问题-nginx图床-2024.8.4(测试成功)

image-20240416055013558

目录

版权声明

本文为One原创文章,转载无需和我联系,但请注明文章来源 https://onedayxyy.cn/

为什么要使用图床

对于写博客的朋友们来讲,图床这个东西一定不会陌生,而且在一定程度上也给大家造成过一定困扰。

对于不清楚这个东西的朋友,我就在这儿大概说一下图床是个啥东西。所谓图床,其实可以就相当于我们手机上的相册,不过他是在线的,而且是对大家开放的,大家都可以访问查看,但是编辑删除这些功能仅限于拥有者,就相当于用百度云分享的公开照片,你可以查看,也可以下载下来编辑,但是拥有权还是属于分享者。

那你可能会疑惑,那这个东西和写博客的我们有啥关系呢?

你想想,我们写博客,是不是有很多图片需要插入,我们这些博客要保留在本地的时候你可以预览到图片,但一旦你要把它发布到网上,这时候问题来了!发现图片上传失败,那是因为你本地的图片都是存在本地的,平台不会自动给你上传,那这个时候就凸显出图床的重要性了。当然了,如果你是直接在平台进行编辑,那着一点就不用担心了,基本平台都会自动给你上传到它自己的服务器。

有了图床,我们在本地写好博客之后,就能够任意复制到其他平台,不用担心图片丢失问题了。

  • md的核心就是解决图床问题,如果解决了图床问题,不管用typora还是ob来维护笔记核心数据,就会特别香;
  • 还是那句话,核心笔记数据必须自主可控,不绑定任何一家笔记应用。

需求背景

1、解决自己typora md图床问题

2、解决自己博客文章图床问题

最佳方案

购买一台云服务器和一个域名,部署Nginx,然后利用云服务器的nginx提供md图床服务。同时利用rsync服务定期同步图床数据到本地进行备份,稳得一b。

云服务器:部署nginx服务(提供图床服务)
typora:作为本地md编辑软件(当然用ob也行哦)
picgo:作为md里图片上传工具

本方案优点:

  1. 图床使用域名做解析,即使以后换ecs的公网ip后,我们只需要迁移图片数据就行,md元数据是不用动的,很丝滑。
  2. 自己也利用rsync会每天定时从linux同步数据到本地windows PC,简直nice。(rsync服务、nginx服务部署很简单,请放心)
  3. 解决了md图床问题,那么使用typora/ob维护笔记数据,体验真的飞起哦。另外,也一起解决了博客图床问题哦,完美。

前提

已经提前购买好云服务器;

域名已完成备案(域名备案也是很方便的哈);

域名已配置https证书;

说明:

最好建议通过域名来访问自己的图床服务,因为公网ip后续可能会更改,但域名是不会变的,因此后续迁移图床数据是非常方便的;

域名备案流程也不复杂,把该填的内容都填了,等待审批通过就好;

域名配置https泛域名证书也很方便;(见手把手文档:《实战:使用Certbot签发免费ssl泛域名证书(主域名及其它子域名共用同一套证书)-2024.8.4(成功测试)》)

1、部署nginx服务

  • 云服务器上部署nginx服务

参考文章:

《实战:yum方式部署nginx-2024.4.16(测试成功)》https://wiki.onedayxyy.cn/docs/ngnix-install-yum

image-20240416063333164

  • 给自己网站配置https泛域名证书

参考如下链接:

《实战:使用Certbot签发免费ssl泛域名证书(主域名及其它子域名共用同一套证书)-2024.8.4(成功测试)》:https://wiki.onedayxyy.cn/docs/docs/Certbot-install

image-20240804170957387


  • 自己本次nginx配置如下:

2024年8月4日

nginx.conf配置文件:

cat /etc/nginx/nginx.conf

user root;
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 {
    gzip on; # 启用 gzip 压缩
    gzip_vary on; # 根据请求中的 `Accept-Encoding` 响应头决定是否启用 gzip
    gzip_proxied any; # 在所有代理请求中启用压缩
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 指定哪些类型的响应需要压缩
    gzip_comp_level 5; # 压缩等级(范围是 1-9,高级别意味着更好的压缩但会消耗更多 CPU 资源)
    gzip_min_length 256; # 只对超过给定长度的响应启用压缩
    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 4096;

    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;
    charset utf-8;

    # Settings for a TLS enabled server.

}

ssl证书位置:

[root@docusaurus-wiki cert]#pwd
/etc/nginx/cert
[root@docusaurus-wiki cert]#ll
total 8
-rw-rw-rw- 1 root root 2855 Aug  3 10:00 fullchain1.pem
-rw-rw-rw- 1 root root  241 Aug  3 10:00 privkey1.pem
[root@docusaurus-wiki cert]#

conf.d目录下:

[root@docusaurus-wiki conf.d]#pwd
/etc/nginx/conf.d
[root@docusaurus-wiki conf.d]#ll
total 28
-rw-r--r-- 1 root root 5252 Aug  3 14:57 blog.conf
-rw-r--r-- 1 root root 2498 Aug  3 14:15 home.conf
-rw-r--r-- 1 root root 1749 Aug  3 10:27 moments.conf
-rw-r--r-- 1 root root 1370 Aug  3 10:26 music.conf
-rw-r--r-- 1 root root 1745 Aug  3 10:23 photo.conf
-rw-r--r-- 1 root root 1404 Aug  3 09:11 wiki.conf
[root@docusaurus-wiki conf.d]#

主域名配置文件:

[root@docusaurus-wiki conf.d]#cat home.conf 
    server {
        listen 80;
        server_name onedayxyy.cn www.onedayxyy.cn;

        #配置https重定向
        return 301 https://$host$request_uri;
    }


    server {
        listen       443 ssl http2;
        listen       [::]:443 ssl http2;
        server_name onedayxyy.cn www.onedayxyy.cn;

         root /root/home3.0;
      
         location / {
             index index.html index.htm;
         }    
         
         ##图床数据
             location /images {
            alias /images;
            index index.html;
        }
    # ……删除部分敏感信息
        ssl_certificate "cert/fullchain1.pem";
        ssl_certificate_key "cert/privkey1.pem";

        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        #ssl_ciphers HIGH:!aNULL:!MD5;
        #自定义设置使用的TLS协议的类型以及加密套件(以下为配置示例,请您自行评估是否需要配置)
        #TLS协议版本越高,HTTPS通信的安全性越高,但是相较于低版本TLS协议,高版本TLS协议对浏览器的兼容性较差。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

        ssl_prefer_server_ciphers on;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

2、配置picgo

方法:配置picgo上传图片到云服务器-2023.12.4(测试成功)

  • 环境
picgo v2.3.1
typora v1.7.6
win10
  • 提出问题(肯定是可以的)

picgo软件是否可以支持上传图片到自己的云服务器呢?

  • 寻找官网插件

https://github.com/PicGo/Awesome-PicGo

文档地址

https://github.com/imba97/picgo-plugin-sftp-uploader

  • 自己本次配置

D:/docusaurus/resource/shell/sftpUploader.json

{
    "sftpUploader": {
        "url": "https://onedayxyy.cn",
        "path": "/images/{fullName}",
        "uploadPath": "/images/{fullName}",
        "host": "ecsip",
        "port": 22,
        "username": "root",
        "password": "123456"
    }
}

image-20240404075625491

自己云服务器ecs地址:

自己域名:onedayxyy.cn
nginx图床配置路径:/images
图片url地址:https://bucket-hg.oss-cn-shanghai.aliyuncs.com/img/image-20231123144421591.png
  • 测试:(符合预期)

image-20231204145705306

  • 自己typora配置

image-20240804171453905

测试结束。😘

注意:经测试,这里的网站标识 要填内容一定得是 json文件里的 "xx"名称才行的,不然就会报如下错误。🤣

3、配置rsync服务(可选)(推荐配置)

  • 配置rsync服务,主要是可以配置winodws定期拉取图床数据,方便后期如果更换云服务器,可以更快速迁移数据,也是为了备份数据。(建议配置)
  • 配置rsync服务,很简单的,可按如下文档配置。
  • 参考文档

《实战:从linux同步数据到winodws(增量定时同步)-2023.11.30(测试成功)》(本次用到的) https://wiki.onedayxyy.cn/docs/rsync-linux-to-winodws

image-20240416062012160

  • 自己云服务器rsyncd服务配置截图

[root@docusaurus-wiki ~]#vim /etc/rsyncd.conf

image-20240416062337098

  • winodws本地同步数据截图
echo backupmd图床数据……
rsync.exe -avPzruh  --port 8730 --password-file=/cygdrive/D/docusaurus/resource/shell/password.txt  root@47.100.215.163::cmi-MdImages/ /cygdrive/D/BaiduSyncdisk/backup/rsync_local/cmi-MdImages-local

image-20240416062456003

  • 图床数据量汇总:

本次更换图床为ecs nginx提供的图床,体验nice。

##本地docusaurus配置
Administrator@DESKTOP-LJJNG21 MINGW64 /d/docusaurus (master)
$ du -shc docs/
10M     docs/
10M     total

##ecs
[root@docusaurus-wiki ~]#ll /images/ |wc -l
13026
[root@docusaurus-wiki ~]#du -shc /images/
3.8G    /images/
3.8G    total
[root@docusaurus-wiki ~]#

image-20240416062624907

5、配置winodws定时任务

参考如下文章:

《实战-winodws配置定时脚本-2023.11.30(测试成功)》 https://wiki.onedayxyy.cn/docs/DingShiJiaoBen/

image-20240804172841094

我自己目前为图床做的备份定时配置如下:

image-20240804172925309

image-20240804172949114

6、测试验证

  • 使用测试

https://bucket-hg.oss-cn-shanghai.aliyuncs.com/img/image-20240416055013558.png

image-20240416061201293

image-20240416061236382

总结

笔记数据对任何人来说,都是至关重要的。(尤其对IT人员)

通过md来维护自己的IT数据,特别丝滑;

但md最大的问题就是处理好图床问题,通过这种方式,我们可以轻松解决md图床问题,ecs寸一份图床数据,然后会定期同步到本地(百度云同步空间),自己的md文档也通过坚果云进行同步(免费),基本完全保证了自己的笔记数据安全。

笔记数据安全得到了保证,然后通过丝滑的typora,我们就可以好好专心生成原创文章了。😊

FAQ

常见图床搭建方式

本地图床

存放图床的目录可用坚果云百度云同步空间来同步数据,以保证其数据安全性。

D:\我的坚果云\LocalImages
D:\BaiduSyncdisk\LocalImgs

1.typora+相对路径

1、优点

相对路径的md文件可以方便进行传播;

方便静态站点工具渲染md(例如docusaurus支持相对路径的md文档的渲染);

2、缺点

不是很利于md文件的维护;

且会造成某些文件的重复使用,导致存储空间增大;

2.typora+绝对路径

  • 个人更推荐使用typora+绝对路径方式,例如自己就是将本地图床路径设置为D:\BaiduSyncdisk\LocalImgs\图片,这样的话,更利于维护自己的笔记数据;

  • 使用绝对路径的话,就可以轻松修改md文件名称了;(这个还是非常方便的)如果使用相对路径,每次修改md文件名称后,还需要修改存放图片目录的名称,然后再批量替换md文件中图片的路径。

https://bucket-hg.oss-cn-shanghai.aliyuncs.com/img/
D:\BaiduSyncdisk\LocalImgs\image-20220530200627632.png

注意:不管是坚果云还是百度网盘同步空间,如果使用其本地图床,那么在手机端是无法正常显示md里图片的……,因此后面才需要配置公网图床。

阿里云oss&腾讯云cos&七牛云方式搭建
  • 问题:如果自己后续md图床数据量增大,那么oss计费也是比较贵的;
  • 问题:要解决oss被恶意刷流量问题?

防盗链??

鉴权??

限制refer??

设置白名单??

gitee/github搭建图床

问题:当gitee/github里的图片数据量很大时,无法pull/push数据,并且网速也很慢,不推荐这种方法;

群辉方式搭建
使用群辉nas搭建图床推荐吗

gpt-2023.8.23回答

使用群晖 NAS 搭建图床是一个不错的选择。群晖 NAS(Synology NAS)提供了一个易于使用的操作界面和丰富的应用程序生态系统,使您可以轻松地搭建自己的私有图床。

以下是使用群晖 NAS 搭建图床的一般步骤:

  1. 设置群晖 NAS:首先,您需要购买并设置好群晖 NAS。确保您已配置网络连接和访问权限。
  2. 安装应用程序:在群晖 NAS 的应用商店中找到适合的图床应用程序,例如 Photo Station、Moments 等。根据应用程序的说明进行安装和设置。
  3. 上传图片:一旦安装和设置好应用程序,您可以通过电脑、手机或其他设备上传图片到群晖 NAS 上的图床应用程序中。
  4. 获取图片链接:上传成功后,应用程序会生成每张图片的唯一链接。您可以从图床应用程序中获取这些链接,用于在 Markdown 或其他地方引用图片。
  5. 引用图片:将生成的图片链接插入到您的 Markdown 文件中或任何需要引用图片的地方。

使用群晖 NAS 搭建图床的好处是,您可以轻松地将图片存储在自己的本地服务器上,完全掌握数据的安全与隐私。此外,群晖 NAS 还提供了许多其他功能,如备份、文件共享等,使其成为一个功能强大的家庭网络存储解决方案。

希望这个建议对您有帮助!如果您有其他问题,请随时提问。

那么它的缺点呢

gpt-2023.8.23回答

尽管群晖 NAS 拥有多个优点,但也有一些潜在的缺点需要考虑:

  1. 成本较高:相对于其他图床解决方案,群晖 NAS 的成本较高。它包括 NAS 硬件设备的购买成本以及可能需要付费的应用程序和插件。
  2. 技术要求:搭建和管理一个群晖 NAS 需要一定的技术知识。您需要了解一些网络配置、存储管理和应用程序设置方面的基础概念。
  3. 面向家庭或小团队:群晖 NAS 的设计初衷是为家庭用户或小型办公室提供文件存储和共享功能,因此其性能和扩展性可能有限。对于大型企业或需要处理大量数据和高并发访问的场景,可能需要更专业的存储解决方案。
  4. 依赖网络连接:群晖 NAS 通常需要稳定的网络连接才能正常工作。如果遇到网络故障或互联网连接问题,可能会对访问和管理图床造成影响。
  5. 电力消耗和噪音:由于群晖 NAS 是一个运行24/7的设备,它可能会产生一定的电力消耗和噪音。这需要考虑到设备的放置位置和环境。

这些缺点并不意味着群晖 NAS 不是一个好的选择,而是需要根据您的具体需求和预算来评估。如果您需要更高级的功能和可扩展性,或者对技术方面感到不太熟悉,可能需要考虑其他图床解决方案或咨询专业人士的建议。

希望这些信息能对您有所帮助!如果您有其他问题,请随时提问。

问题:md图床放自己群辉里行不呀?(不建议:网络和性能的问题)

就目前自己的docusaurus知识库网站,自己体验起来还不错哦。😘

2023年11月11日

img

img

img

img

自己用:

img

其它方式

案例:Lsky Pro(兰空图床)

2023年11月11日 群辉大佬

img

2024年3月17日收藏

Lsky Pro

参考文章

https://www.ywsj365.com/archives/docker-da-jian-yi-ge-shu-yu-zi-ji-de-tu-chuang

image-20240317071406110

案例:图床:缤纷云Bucket + 初柒工坊图床 + SKY CHART BED

img

img

案例:EasyImage图床

2023年9月8日记录

img

搭建参考链接

https://blog.csdn.net/qq_24694139/article/details/132425616

img

https://zhuanlan.zhihu.com/p/648359245

img

https://post.smzdm.com/p/akk76n7k/

img

gpt-如何搭建自己私有的markdown图床

gpt-2023.8.23回答

要搭建自己的私有 Markdown 图床,您可以按照以下步骤进行操作:

  1. 选择一个托管图片的服务器:您需要选择一个服务器云存储服务来托管您的图片。一些常见的选择包括自己搭建的服务器、云存储服务如Amazon S3、腾讯云对象存储等。
  2. 配置存储空间:根据您选择的服务器或云存储服务,按照相应的说明创建一个存储空间(bucket)。
  3. 配置访问权限:确保您的存储空间只允许私有访问,这样只有您拥有的链接可以访问图片。
  4. 上传图片:将您的图片上传到存储空间中。这可以通过调用相应的上传API、使用命令行工具或者使用一个可视化的管理工具来完成。
  5. 生成图片链接:一旦图片上传成功,您需要生成访问这些图片的链接。这些链接通常包含一个唯一的标识符,以便在 Markdown 中引用。
  6. 编辑 Markdown 文件:在您的 Markdown 文件中,使用生成的图片链接来引用您的图片。根据不同的 Markdown 解析器,链接的格式可能有所不同。

请注意,上述步骤中的具体细节取决于您所选择的服务器或云存储服务,因此您可能需要查阅相应的文档或参考其提供的 API。

搭建自己的私有 Markdown 图床需要一定的技术知识和服务器管理经验。如果您不熟悉这些概念,可能需要考虑使用现有的图床服务或咨询专业人士的帮助。

希望以上信息对您有帮助!如果还有其他问题,欢迎继续提问。

关于我

我的博客主旨:

  • 排版美观,语言精炼;
  • 文档即手册,步骤明细,拒绝埋坑,提供源码;
  • 本人实战文档都是亲测成功的,各位小伙伴在实际操作过程中如有什么疑问,可随时联系本人帮您解决问题,让我们一起进步!

🍀 微信二维码

x2675263825 (舍得), qq:2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 个人主页:

https://onedayxyy.cn

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

🍀 知识库:

https://wiki.onedayxyy.cn/

image-20240804075128231

🍀 博客:

http://blog.onedayxyy.cn/

image-20240804075845906

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

往期推荐

我的开源项目:

https://wiki.onedayxyy.cn/docs/OpenSource

image-20240805061543799

玩转Typora+Docusuaurus-起始页交流群:

image-20240805061559664

image-20240805061613784

最后

好了,关于本次就到这里了,感谢大家阅读,最后祝大家生活快乐,每天都过的有意义哦,我们下期见!
博客:

http://blog.onedayxyy.cn/

[外链图片转存中…(img-zzwvTomm-1722810169748)]

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

[外链图片转存中…(img-WTmXTCZh-1722810169749)]

🍀 知乎

https://www.zhihu.com/people/foryouone

[外链图片转存中…(img-tiiSZ4tY-1722810169750)]

往期推荐

我的开源项目:

https://wiki.onedayxyy.cn/docs/OpenSource

[外链图片转存中…(img-38ezHZqg-1722810169751)]

玩转Typora+Docusuaurus-起始页交流群:

[外链图片转存中…(img-jjPjAm0w-1722810169751)]

[外链图片转存中…(img-72L6Ss4X-1722810169752)]

最后

好了,关于本次就到这里了,感谢大家阅读,最后祝大家生活快乐,每天都过的有意义哦,我们下期见!

  • 25
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值