Fork me on Gitee

typora+picgo+gitee搭建图床 -- typora中快速上传图片

最终效果图展示

xiaoguo4 (1)

来源

转载自:

​ typora+picgo+gitee搭建图床

​ 从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub/Gitee图床

前言

又将开始一轮很兴奋地写文章之旅，主要使用工具为Typora，编写的markdown文件为纯文档，对图片以链接形式渲染进来。采用本地图片存储的方式将难以迁移、分享及在坚果云查看；采用网络图片可以保证在任何位置访问。

工具

  1. Typora：可能是最优秀的md编辑器。
  2. PicGo：一个用于快速上传图片并获取图片URL链接的工具，最新版的Typora原生支持PicGo关联。
  3. Gitee：码云（作图床），国内优秀的代码开源平台。选择gitee主要是其在国内，访问速度比github快且稳定；免费；无需备案；点击查看几种图床的优缺点。

步骤

1. 建立gitee（码云）图床

注册码云后进入主页，点击右上角的+号，新建仓库作为图床。

01

设置图床名称。注意：在是否开源处选择公开，才能通过网络访问到图片。初始化Readme将自动建立master主分支。然后创建

02

申请私人令牌，用于PicGo的令牌配置。在右上角的个人头像处点击设置，然后在左边栏点击私人令牌，生成新令牌。

06 07

填写令牌描述，只需勾选projects，点击提交后需要输入密码。生成的令牌只会显示一次，注意保存好，需要填入到PicGo。08

10 15

2. PicGo安装及配置

PicGo下载 选择最新版下载软件，安装，留意安装路径。

image-20210615100846758

打开picgo

13

点击插件设置，输入gitee并搜索，安装插件。

image-20210615101144559

安装完成后重启一下PicGo。点击图层设置，选择gitee。需要设置4个选项：repo为你的代码库名称，branch为代码分支，选择主分支master，token为前面申请的gitee私人令牌，path为图床在代码库中的目录，可以设为img，下面的两个选项空着，在提交时默认填入时间来标识图片名称。

image-20210618173359622 14

其中repo为之前新建的作为图床的仓库，在浏览器的url中可以看到：如sunny_21/Gitee_ImageHosting

image-20210615101336953

点击确认，设为默认图床。这样关于gitee的图床设置完毕，可以到上传区上传一张图片试试，如果提交后在gitee中可以看到即成功配置。

3. Typora配置

接近成功配置的最后一步啦，点击设置–偏好设置–图像，并按图片一样设置即可。

image-20210615101438426 image-20210615101634475

4. 测试

新建一个markdown文件，测试Snipaste（超好用的截图工具）粘贴图像，拖入图像，插入图像等操作验证是否能够成功插入并转为URL图像链接。

image-20210615101949232

解决gitee图床+typora图片大于1M不显示问题

从上一步可以看到 Gitee 存储的图片地址是 https://gitee.com/yushuaigee/myblog/raw 开头的网址，这个域名是国内站点，速度很快，无需配置CDN加速，图床配置好之后，图片上传成功，在浏览器也能打开，看似没毛病，其实暗藏玄机。

如果你上传的图片大于 1M ，不管是在下一步的 Typora 中还是在浏览器网页中，是无法加载出图片的，比如这张图片https://gitee.com/yushuaigee/myblog/raw/master/img/myblog.gif，输入到浏览器会显示文件大于1M，登录后可见。如果能打开是因为你前面已经登录了 Gitee 了，浏览器新建一个无痕窗口就打不开了。

image-20210113230821769

可是别人在浏览我们博客时不可能要先登录个 Gitee 吧，所以要想办法解决一下。前面我们将博客仓库打开 Gitee Pages 功能，其他人可以访问我们博客仓库里的博客了，图床仓库也一样，打开它的 Gitee Pages 功能，无需登陆就可以访问里面的图片了。

进入图床仓库主页，点击服务，Gitee Pages。

image-20210113231334002

点击启动部署。

image-20210113232431704

这样我们就可以通过Gitee Pages 地址来访问图床仓库里的图片了 ，地址前缀需要改一下。

例如，

原始图片地址的格式为https://gitee.com/用户名/仓库名/raw/分支名/目录/图片名.png，https://gitee.com/yushuaigee/myblog/raw/master/img/myblog.gif，

更改后的图片地址的格式https://用户名.gitee.io/仓库名/目录/图片名.png，

https://yushuaigee.gitee.io/myblog/img/myblog.gif。

对应的，PicGo 中就需要改一下自定义域名，之后上传图片自动生成的链接就是 Gitee Pages 上的地址了。具体就是在customUrl填写https://用户名.gitee.io/仓库名。

image-20210113233142363

这种方法也存在一个问题，就是因为 Gitee Pages 不支持自动更新 (pro版支持，需要收费)，每次上传完图片后，需要打开浏览器手动点一下更新。你可以写完文章，把图片一把上传，再点一次更新，但是终究还是有点麻烦。

image-20210113231428575

为了解决这个问题，我写了一个自动化脚本，双击启动就可以自动完成 Gitee Pages 部署，其实原理就是利用 pyppeteer 模拟用户登录，到部署页面模拟点击更新按钮，虽然还是需要启动一下脚本，但是也稍微省了点事儿，下一篇文章将自动部署 Hexo 和 自动部署 Gitee Pages 结合起来。

效果

image-20210113233250172

image-20210113233443911

start.bat 源码

COPY:: start.bat 源码
:: python路径 + 空格 + 脚本路径
C:\Python\Scripts\python.exe D:/scripts/post_my_blog.py
pause

post_my_blog.py 源码

COPY# post_my_blog.py 源码
# 注意: 更改25、36、52行的用户名密码为自己的Gitee的用户名密码，第45行的仓库名为图床仓库的名字
# 每处延时都有用，是我花了好长时间调试过的

import asyncio
import os

from pyppeteer import launch


async def _update_gitee_pages(usr_name, repo_name):
	browser = await launch(devtools=False, dumpio=True, autoClose=True,
                           args=['--start-maximized',  # 设置浏览器全屏
                                 '--no-sandbox',  # 取消沙盒模式，沙盒模式下权限太小
                                 '--disable-infobars',  # 关闭受控制提示
                                 # 设置ua
                                 '--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3542.0 Safari/537.36'
                                 ],
                           userDataDir=os.path.abspath('./cookies'))
    page = await browser.newPage()
    # 登录
    await page.goto('https://gitee.com/login')
    await page.waitFor(2000)
    if '登录' in await page.title():
        await page.type('#user_login', '用户名')
        await page.type('#user_password', '密码')
        await page.keyboard.press('Enter')
        print('使用账号密码登录成功...')
        await page.waitFor(2000)
    else:
        print('使用cookies缓存登录成功...')
    # 更新
    await page.goto('https://gitee.com/%s/%s/pages' % (usr_name, repo_name))
    await page.waitFor(2000)
    page.on('dialog', lambda dialog: asyncio.ensure_future(_handle_dialog(page, dialog)))
    await page.click('#pages-branch > div.button.orange.redeploy-button.ui.update_deploy')
    await page.waitFor(20000)
    print('更新 Gitee Pages %s 成功...' % repo_name)


async def _handle_dialog(page, dialog):
    await page.waitFor(2000)
    print('点击确定更新')
    await dialog.accept()


def update_gitee_pages(usr_name, repo_name):
    asyncio.get_event_loop().run_until_complete(_update_gitee_pages(usr_name, repo_name))


if __name__ == '__main__':
    update_gitee_pages('用户名', '仓库名')

享受便捷的写文章体验

无论什么工具，花了多少心思配置折腾，都比不上安心读文章学习，做笔记总结，写一些感悟。再华丽的方式都比不上一篇篇积累自身心路历程的文章，这段时间需要大量学习，开始自己的新阶段。

OVER

posted @ 2021-06-15 18:45  Veryl  阅读(333)  评论(0)  编辑  收藏  举报
动态线条
动态线条end