Hexo博客搭建之PicGo+Github免费图床使用指南

Hexo 博客站点搭建完成之后,需要考虑如何在文章中添加图片或视频。创建图床的目的是为本地图片等资源生成一个超链,然后将此连接嵌入到 markdown 编写的博客文章中,以此来解决博客中图片等资源的显示问题。本文介绍一种 PicGo + Github 搭建的免费图床。

下载 PicGo

PicGo 是一款图片上传的工具,目前支持 SM.SM图床、微博图床,七牛图床,腾讯云COS,阿里云OSS,又拍云,Github 等图床,未来将支持更多图床。

点击 这里 下载 PicGo 工具。根据操作系统选择对应的版本,安装到指定目录。

创建 Github 仓库

在新建仓库页面,填入仓库名称,如 resources,名称可以随意填写。仓库类型选择 public

如果已有仓库,跳过这一步。

生成 Github Token

点击右上角的头像, 选择 Settings 进入设置页面。

在打开的页面中, 点击 Developer settings 设置页面。

进入到权限设置的页面中, 这里选择使用 Personal access tokens

并点击 Generate new token 生成一个新的 token。

填写一个描述信息, 用于我们区分 token 主要是用于做什么, 多个不同的授权码最好分开使用。 这样即使泄露也只是这一个库。勾选 repo 选项, 点击 Generate token 生成授权码。

token 有时间限制,过了有效期后需要重新生成。

记住这个授权码, 关闭页面就没有了, 只能重新生成了。

配置 PicGo

打开已安装的文件, 选择 图床设置 >> GitHub 图床。

图床信息

设定仓库名: 根据你刚刚创建的仓库加上你的用户名, 我这就是 StevenX5/resources

设定分支: 这里使用主分支 main

设定Token:这里就是我们刚刚生成的授权码 token, 复制到这里即可。

存储路径:这里就是你的图片实际存放的地址,可以自己定义。这里使用 images/

设定自定义域名:可选。这里就需要用到 jsDelivr 加速功能。 因为 GitHub 国内访问过慢, 所以使用它进行加速。 加速地址为: https://cdn.jsdelivr.net/gh/用户名/仓库名 。所以这里填写的地址为: https://cdn.jsdelivr.net/gh/StevenX5/resources

图床测试

上传一个图片进行测试。在上传区拖入一张图片。 然后就可以看到系统提示上传成功。

然后点击相册,可以看到我们刚刚上传的图片。

经过测试, 如果两个相同的文件上传, 第二次就会上传失败。

配置 Markdown

插入图片

本文使用 Typora 工具。在 “格式” 菜单中选择 “图像”,插入图像元素。
在图片路径中填入从 PicGo 中复制的图片链接。

插入视频

以 B 站为例,在分享界面中复制嵌入代码。粘贴到 Markdown 文件中。

得到如下代码段:

<iframe src="//player.bilibili.com/player.html?aid=640332634&bvid=BV1JY4y1W7h7&cid=566306146&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

直接嵌入后的视频窗口高度太小,我们调整如下:

height="500"

调整后的代码如下:

<iframe src="//player.bilibili.com/player.html?aid=640332634&bvid=BV1JY4y1W7h7&cid=566306146&page=1" scrolling="no" border="0" height="500" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

更新内容

在站点根目录下执行以下命令将站点内容更新到 Github Pages

$ hexo clean
$ hexo g
$ hexo deploy

执行完成后,稍等片刻,打开站点就可以看到了。

猜你喜欢

转载自blog.csdn.net/zyq55917/article/details/125182027