Hexo博客+Github+PicGo+jsdelivr图床搭建教程

最新推荐文章于 2024-07-17 13:46:03 发布
最新推荐文章于 2024-07-17 13:46:03 发布
阅读量384 收藏 1
点赞数
文章标签： github hexo pico
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muqing7783/article/details/120855825
版权
本文介绍了如何解决Hexo博客中图片显示问题，通过搭建GitHub图床结合PicGo和jsdelivr加速图片加载。首先，下载并配置PicGo，然后在GitHub创建仓库用于存储图片，设置个人Token。接着，配置PicGo的图床为GitHub仓库，并指定存储路径。最后，利用jsdelivr作为CDN加速，只需填写特定格式的自定义域名。
摘要由CSDN通过智能技术生成

简介

在Hexo博客中写文章时，我们会上传图片到博客中，但是我们会发现在Typora中正常插入的图片，在上传后不能再博客中不能正常显示，因为这里需要的时相对地址。这里选择搭建图床来解决这一问题。

网络上的免费图床有很多，这里选择GitHub+PicGo+jsdelivr来搭建。GitHub来当作我们存储博客图片的仓库，PicGo用来上传图片到GitHub，使用jsdelivr来提高博客中图片的加载速度。

详细步骤

点击此链接下载PicGo

Snipaste_2021-10-17_22-14-15

下载.exe结尾的

点击打开

Snipaste_2021-10-17_22-15-33

图床设置

Snipaste_2021-10-17_22-19-48

这里需要填入GitHub里的数据

在GitHub里创建一个新的仓库用来存放图片

注意此处填写仓库名时，如果是从GitHub里直接复制过来的，需要将/两边的空格删掉，设定分支名直接填写默认的main就行

设定Token值

点击GitHub头像进入设置页面

Snipaste_2021-10-17_22-28-13

点击偏下方的Developer settings

Snipaste_2021-10-17_22-30-24

点击最下方的tokens

Snipaste_2021-10-17_22-31-13

点击Generate new token，按照如下设置进行设置，只需要点击rope一个选项即可，其余不用选择

Snipaste_2021-10-17_22-32-15

点击Generate new token完成创建

Snipaste_2021-10-17_22-33-25

回到该页面将Token值复制粘贴到PicGo即可

Snipaste_2021-10-17_22-34-48

指定存储路径可自行设置

设置自定义域名直接按照https://cdn.jsdelivr.net/gh/用户名/仓库名格式直接填写就行，具体原理我也不是很清楚，有兴趣的可自行百度

muqing7783
关注
使用Gitee+PicGo搭建Hexo博客图床
LeoK77的博客
02-07 573
虽然Hexo可以设置相对路径引用存储图片，但是这样会把图片存储到Github上，而碍于国内对于Github的访问速度，博客中的图片加载起来十分的慢，而穷孩子用不起对象云存储，小型图床又怕跑路，所以把主意打到了Gitee身上 Gitee 如果没有Gitee账号的话自行注册一个，这里就不演示账号注册了。 Gitee官网：https://gitee.com/ 新建图床仓库 新建Public仓库 在Gitee主页左下角可以找到新建仓库按钮，点击之后即可新建一个开源(public)仓库，因为要制作的Hexo博.
手把手教你用Hexo+Github 搭建属于自己的博客_hexo如何把git的源码主题和自己的融合一起
2401_84166672的博客
04-20 1228
NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。设定菜单内容，对应的字段是 menu。在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 Font Awesome 图标名字） 的情况下，NexT 将会使用 作为图标。比如我的电脑下的 F:\hexo 目录下的成为 站点配置文件，F:\hexo\themes\next 目录下的成为主题配置文件。
GitHub+PicGo+jsDelivr搭建高速稳定免费图床
leehoward
12-01 1247
Gitee也是一个比较不错的图片搭建思路，国内访问速度快，Mac下也有uPic工具进行快速的图片上传管理，采用Gitee搭建自己的图床存储资源可查看《采用Gitee搭建自己的图床存储资源》 但是，Gitee对Windows系统的用户搭建图床不是很友好，没有图片上传管理工具，有能力的大神可以自己写一个插件也可以满足。 此文章介绍，如何通过Github搭建图床，采用jsdelivr做高速CDN，采用...
hexo搭建博客&github pages部署&picgo+typora图床
最新发布
红豆刨冰的博客
07-17 738
hexo,picgo图床,github pages
【Hexo】搭建免费、快捷图床+各种报错的解决方案
漫磋嗟
08-25 786
继上篇，本篇聊聊如何搭建一个免费、快捷的图床，复制粘贴剪贴板的内容即可快速上传，同时我也会涉及各种报错的解决方案
Hexo从0到1搭建博客系列04：图床的最佳实践
周三不Coding的博客
10-15 1730
采用Hexo，从0到1快速搭建一个博客。即使没有任何前后端网页开发经验，也可以快速拥有一个属于自己的博客网站~
利用github+hexo搭建个人博客并创建图床【带视频教程】
Purse的博客
02-17 1132
Git+hexo 搭建个人博客的步骤和要点 步骤： 1、 安装nodejs+git+tortoisegit 2、 注册github账号，并创建个人独立主页仓库，就是那个username.github.io仓库; 3、 安装和初始化hexo博客脚手架; 4、 去hexo选择适合自己的博客主题; 5、 发布本地博客到github； 6、 创建github图床【有自己图片服务器的可以不用，建议不要使用七...
【源码开放】Hexo+Github+Coding 博客butterfly 和 matery 主题 搭建完全教程【整理】
01-08
注意，本篇博客并不是从零手把手教你去搭博客，那样会很花费时间去写一篇文档，况且从零搭建的博客一搜也是一大把，太多重复的内容就没必要继续写了。因此，对于不知道怎么搭建的伙伴，我会提供我搭建时用到的学习...
搭建Hexo博客+部署到Github
01-08
【搭建Hexo博客+部署到Github】教程 前言： 本文档主要介绍如何在Windows 10 64位系统下搭建Hexo博客，并将其部署到GitHub上。灵感来源于B站up主codesheep的视频及其评论区的分享，旨在为初学者提供详细步骤和学习...
博客系列：Hexo+Github博客搭建教程
01-03
博客系列：Hexo+Github博客搭建教程
hexo+GitHub Pages一键搭建部署博客
weixin_42372852的博客
01-25 877
前言： 现在技术更新迭代是非常的快，尤其是web方面！所以当前搭建一个博客差不多有手就行，这里我们用到hexo进行博客的一键生成和部署。我自己的博客也是用hexo搭建的：杨Yang 博客相关配置 matery主题相关配置 1. 什么是 Hexo？ Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 hexo官网：https://hexo.io/ 2. 准备工作： 安装Git： Windows：下载并安装git。
【教程】使用jsDelivr加速GitHub的静态资源
火星基地
07-29 1118
1. 准备工作 首先在 Github 上创建一个公开仓库，放入相关文件，例如： 点击仓库右侧的Create a new release按钮： 写一个版本号，点击Publish release提交。 2. 访问方式 1. 根据版本号访问 格式： https://cdn.jsdelivr.net/gh/github用户名/仓库名@版本号/文件目录/文件名 例如： https://cdn.jsdelivr.net/gh/lzxjack/cdn@1.0.0/json/emoji.json 2. 省略版本号
使用jsdelivr访问github资源，为hexo站点提提速。
wzg0817的博客
08-19 680
-----文章首发------ 一、新建github库并使用git上传 首先访问https://github.com 新建自己的库 之后使用 git 上传到github 下载git ： https://git-for-windows.github.io/ 1.本地新建一个文件夹 2.进入文件夹，点击鼠标右键，选择git bash here 3.然后在窗口输入 git init 4.复制地址 ： 5.输入 git remote add origin 加上 你刚刚复制的路径 6.输入 git pull .
jsdelivr使用
博客
12-01 1645
官网地址：https://www.jsdelivr.com/ https://cdn.jsdelivr.net/仓库/用户名/项目名@版本号/src/script/simpleMemory.min.js https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@1.3.3/src/script/simpleMemory.min.js
用hexo搭建GitHub博客（+图床）
xfx's blog
06-20 8116
一、配置GitHub 注册GitHub 注册GitHub，并登陆 github.com username将要用到，先记住 创建仓库 点击Create a new repository reposository name填写 username.github.io这个是固定的，usename是注册时的用户名，否则则无法以 username.github.io 访问博客 设置仓库 进入到...
《jsdelivr 学习笔记》
yk_ddm的博客
09-12 116
目录jsdelivr 学习笔记jsdelivr 简介 jsdelivr 学习笔记 jsdelivr 官网 jsdelivr 简介
【hexo+PicGo+阿里云构成图床】
weixin_61646798的博客
11-20 91
hexo+PicGo+阿里云构成图床
Hexo骚操作：主题配置|搜索|评论|统计|图床
catalinaLi的博客
08-14 1504
前言 相信各位在看过上一篇blog手把手教你使用hexo搭建属于你的个人博客后已经初步搭建了属于自己的博客，不过细心的你可能已经发现这样的博客还是缺点什么，现在就来说说Hexo的骚操作:添加主题、统计、评论、SEO等等等等。 承接上篇最后说过的:根目录下的_config.yml叫做站点配置文件，主题下文件夹的_config.yml叫做主题配置文件。好了,现在进入正题，今天我们要对Hexo进行
hexo博客 PicGo图床 GitHub SM.MS vika
qq_69410429的博客
02-03 314
使用picgo + GitHub/sm.ms/vika搭建图床
hexo+github搭建个人博客
12-08
以下是使用Hexo和GitHub Pages搭建个人博客的步骤： 1.安装Node.js和Git 2.安装Hexo ```shell npm install -g hexo-cli ``` 3.初始化Hexo shell hexo init blog cd blog npm install ``` 4.配置Hexo 打开根...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值