夜猫子的知识栈 夜猫子的知识栈
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夜猫子

前端练习生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 学习

  • 面试

  • 心情杂货

  • 实用技巧

    • 2分钟规则
    • Typora+Github+PicGo创建图床.md
      • 1.GitHub设置
      • 2.下载PicGo
      • 3. Typora设置
      • 4.其它
        • 4.1 安装PicGo插件
        • 4.2 PicGo-Server设置项
        • 4.3 文章建议
    • Nginx反向代理
    • 博客技巧
  • 友情链接
  • 更多
  • 实用技巧
夜猫子
2022-06-27
目录

Typora+Github+PicGo创建图床.md

# 1.GitHub设置

首先在GitHub中创建一个图床仓库,并将仓库的可见性设置为public:image-20210423200031525

然后创建Token,点击链接:https://github.com/settings/tokens,进入Token创建页面:

image-20210423200324692

然后点击Generate new token进行Token创建:

image-20210423200533420

完成后不要着急离开或关闭页面,复制生成的Token,保存到文本中!

image-20210423200730181

至此,GitHub的工作已完成。

# 2.下载PicGo

首先下载PicGo,下载地址:https://molunerfinn.com/PicGo/,安装后记住PicGo的安装目录。

然后进行PicGo的设置,首先打开PicGo,然后选择图床设置–》GitHub图床:

image-20210423200928995

详细设置项如下:

  1. 设定仓库名,设置规则为your-github-username/image-repo,即你的GitHub帐户名/图床仓库名;

  2. 设定分支名,默认为master就好;

  3. 设定Token:就是刚刚保存的Token,复制粘贴进这里就好;

  4. 指定存储路径:可以设置图片存储在仓库的哪个目录下,这里就设置为图片存储在仓库的PicGo目录;

  5. 设定自定义域名:为了使用jsdeliver进行加速,此处设置规则为:https://cdn.jsdeliver.net/GitHub帐户名/图床仓库名;

  6. 设置完成后,点击确定,此时PicGo设置完成。

# 3. Typora设置

首先打开Typora的设置面板(文件 — — 偏好设置),找到图像一栏,设置如下:

image-20210423201751150

验证结果如下:

image-20210423201823707

此后,只要我们在Typora中写文章时,当我们插入图片时,Typora就会自动调用PicGo程序,帮我们将图片上传到GitHub中去,然后将返回的图片地址进行替换,这样我们文章中的图片地址就是GitHub中的图片地址了,以后文章迁移就更加方便了。

此时您可以看看GitHub仓库中是否有图片了。

# 4.其它

# 4.1 安装PicGo插件

如果我们只是简单地使用PicGo进行图片上传,那么我们无法上传同名的图片,所以我们需要安装插件,对图片进行重命名。在PicGo中选择插件设置,搜索rename-file进行安装:

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

鼠标右键单击插件齿轮,选择配置plugin:picgo-plugin-rename-file,配置项如下:

image-20210423202326447

# 4.2 PicGo-Server设置项

该项设置是指可以将PicGo当作一个服务器,然后通过127.0.0.1:36677调用上传图片的API接口,这也是Typora的实现原理,所以一定不要将这项设置关闭了!否则Typora无法成功调用PicGo的服务,进行图片上传。

image-20210423202734386

# 4.3 文章建议

虽然经过以上设置,我们成功搭建了图床,使得Typora成功上传了图片,但是我还是建议将Typora的图像偏好设置为如下:

image-20210423203104666

编辑 (opens new window)
上次更新: 2024/11/11 11:17:22
2分钟规则
Nginx反向代理

← 2分钟规则 Nginx反向代理→

最近更新
01
IoC 解决了什么痛点问题?
03-10
02
如何调试 Nest 项目
03-10
03
Provider注入对象
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式