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
执行完成后,稍等片刻,打开站点就可以看到了。