【事无巨细】解决你一篇文章发布多平台上传图片的烦恼

前言

tip: 文章首发于掘金并做了排版美化推荐掘金阅读体验更好 戳我跳转

相信不少小伙伴在写文章的时候想要发布文章到各个平台上去的时候，每次都要上传图片这个步骤，肯定让人感到很烦，特别是图特别多的时候就让人很崩溃了😑。这个时候个搭建图床外加CDN配上Typora就非常方便了，让你文章写的飞起😇

• PicGo (构建图床工具)
• Typora (一款支持实时预览的MD文本编辑器)
• GitHub （全国程序员交友平台）
• jsDeliv (免费开源的 CDN 解决方案)

PicGo(v2.3Beta)+ Typora(最新版)

云盘链接：https://pan.baidu.com/s/1VCmB0drvx2-WUg7fnXzW-w
提取码：3210

GIthub

New repository

创建好之后你的仓库名一般都是这样：https://github.com/你的账户名/你刚取的仓库名。例 -> https://github.com/it-beige/picture

接下来看下GitHub支持的jsDeliv进行CDN加速, 先将你项目Clone下来push几张图片上去

git clone https://github.com/it-beige/picture
git remote -v 查看远程仓库
git checkout main -b  
git add .
git commit -m '提交内容'
git pull origin main
git push origin main  -u

注意⚠：默认分支现在是main

jsdelivr：免费开源的CDN且支持GitHub上任何分支和提交的文件，可以看官网上的描述

它告诉我们这么用就可以了：https://cdn.jsdelivr.net/gh/你的gitHub账号/你的仓库@版本号/你的文件

我们刚新建的仓库也没有发布版本，直接这么用就可以了https://cdn.jsdelivr.net/gh/你的gitHub账号/你的仓库/你的文件

效果图💗

Settings

接着生成一个该仓库的token为后期配置PicGo做准备

点击头像找到Settings -> 左侧边栏找到Develop Settings -> Personal access tokens -> 点击Generate new token

PicGo

软件上面已经分享过了，安装跳过，这里讲下配置

效果图💗

只要配置项没问题，一般都能上传成功，文件命名冲突什么的可以看log日志

PicGo配合Typora需要设置Server让PicGo监听Typora的服务，这里也给出一些常设置的配置

注意⚠：如果你的PicGo少了配置项就是版本低了，v2.0.x之前的都不行。（上面有安装包自行下载）

Typora

最后带大家感受下 PicGo + Typora 写图文的体验，简直不要太Nice😗，没有Typora？？建议立马下载🙃

这里提供两种方案：

• 直接使用Typora的上传所有本地图片功能
• 使用Git将本地图片Push到GitHub上，再写个正则替换地址

效果图💗

Tip⚠：如果有重命文件会上传失败，建议每篇文章建一个文件夹，上传前保证是"empty"的状态(GItHub空文件夹会直接将文件夹删掉，可以保留一张cover)。总此使用Typora的"上传所有文件"不要让GitHub上出现和该MD文件有重命的文件

别问我怎么知道的，直接报错给你看😶

第二种方式

个人还是觉得两种方案配合着用比较好，因为平时写文章的时候可能后面又有了思路加点新东西，这个时候就先用本地图片，写完commit/push，之后用正则全局替换。

写在最后

如果文章中有那块写的不太好或有问题欢迎大家指出，我也会在后面的文章不停修改。也希望自己进步的同时能跟你们一起成长。喜欢我文章的朋友们也可以关注一下

我会很感激第一批关注我的人。此时，年轻的我和你，轻装上阵；而后，富裕的你和我，满载而归。

往期文章

【建议追更】以模块化的思想来搭建中后台项目

【以模块化的思想开发中后台项目】第一章

【前端体系】从一道面试题谈谈对EventLoop的理解 (更新了四道进阶题的解析)

【前端体系】从地基开始打造一座万丈高楼

【前端体系】正则在开发中的应用场景可不只是规则校验

「函数式编程的实用场景 | 掘金技术征文-双节特别篇」

【建议收藏】css晦涩难懂的点都在这啦