hexo博客搭建+博客迁移+本地文件处理

博客搭建

之前搭建个人博客的时候,是借助github pagesHexo而建成的,在建站过程中看到一篇介绍特别详细的博客教程,如果有建立个人博客的想法的同学可以参考这篇博客。

建博客的时候还踩了点雷。一开始想用clover这个主题的,但是执行hexo s就一直报错,后来看到网上也有用clover却不显示的,就用vs code看了下,clover的源程序报错,然后改用了white。

关于white主题,我刚开始用的样子,主页是简洁的几行字,博客页则是现在white主题主页的样子。而在我更新white主题后,一开始有点不适应,但越看越喜欢,相较之前,博客的显示更直接。

然后就是封面和图床,封面的设置在网上找到了个说是photo,但是没用,就去问了原作者,属性是cover。图床的话,希望picgo稍微优化下,最后选择用的是百度到的路过图床,这个图床活得挺久但隔几年好像就会换个网址。

github在国内总是随缘登陆,但是网易uu加速器可以免费加速github等学术资源,一开始使用的时候,uu加速器弹出的学术资源窗口的热门榜单第一是github,但几天后就没了,不过依然可以加速与github的连接。

但是博客的使用还是有点麻烦,所以还是用国内的这些平台会舒服点。

更换电脑时,转移本地博客方法

换新电脑时,会需要将本地博客文件挪到新电脑上,以下几行则是之前尝试出的一个比较快速的转移本地博客方法:

①下载git、nodejs

②安装Hexo(npm install -g hexo-cli)

③创建本地博客(hexo init myBlog||cd myBlog||npm install)

④将该新建本地博客theme文件夹、source文件夹、_config文件替换为旧电脑本地博客的文件(可执行hexo s测试本地博客是否正常运行)

⑤配置SSH KEY

⑥在本地博客文件下安装部署插件(npm install hexo-deployer-git --save)并完成上传(hexo g -d)

hexo本地图片

之前建个人博客的时候想过是不是可以使用本地,通过git一起上传到github,于是尝试并总结了点问题

将图片放入themes/(主题)/source文件夹里,那么在posts文件夹的博客文章里调用图片的路径为/themes/(主题)/source/(图片名称.图片后缀)。这样在vs code预览里没问题,但是上传后发现不显示图片,也尝试了搜索到的一些方法,也都没效果。

考虑本地图片是因为创业logo那张图没法上传常用的路过图床(百度搜索网址,我印象里已经用过三个网址了),本地图片也试不起来,就也试了下qq相册,也是显示不了,所以重新找了几个图床,但很多速度都不行,最后用的是速度ok的聚合图床

几天后(2022年5月初)又尝试了本地图片,参考Hexo 引用本地图片以及引用本地任意位置图片的一点思路这篇博客,开启本地静态资源的post_asset_folder: true和给引用的本地图片添加绝对路径的hexo-asset-image与之前一致,然后在这篇博客中提到了兼容懒加载的hqweay/hexo-asset-image。

在弄好这三步操作后,在source/_posts下新建文件夹img,并放入番薯夹logo配图.jpg,调用的图片链接则是img/番薯夹logo配图.jpg,VS Code的预览中会显示图片,但是上传后依旧不显示。

按F12查看网页的html代码,data-src中的图片指向已经是绝对路径了。

<img data-src="img/番薯夹logo配图.jpg" class="img-show-post-cover-class" src="img/番薯夹logo配图.jpg">

再查看报错的指令,发现对于该图片的请求路径path并不是直接指向img,而是指向该与博客md文件所处的文件夹中,github代码库中也没有找到img文件夹。

path: /2022/04/24/%E4%B8%AA%E4%BA%BA%E8%87%AA%E5%AA%92%E4%BD%93/img/%E7%95%AA%E8%96%AF%E5%A4%B9logo%E9%85%8D%E5%9B%BE.jpg
referer: https://islandfsj.github.io/2022/04/24/%E4%B8%AA%E4%BA%BA%E8%87%AA%E5%AA%92%E4%BD%93/

所以还是得给每个博客建立同名文件夹,重新上传后,在github代码库中看到了islandfsj.github.io/2022/04/24/个人自媒体/番薯夹logo配图.jpg,但是依然存在图片上传至github后无法显示图片,在首页的报错内容则是无法加载图片,但是在该博客页面内的显示并无问题。

Failed to load resource

值得一提的是,我之前在public文件夹下放入logo.png,用于网页,在github代码库中则是islandfsj.github.io/logo.png,在white/_config.yml里则是icon: logo.png,并无显示问题,但是这次我注意到,在博客中对logo.png的请求没有响应。

因此重新查看首页里对番薯夹logo配图.jpg的请求路径。

path: /%E7%95%AA%E8%96%AF%E5%A4%B9logo%E9%85%8D%E5%9B%BE.jpg
referer: https://islandfsj.github.io/

因此在/public/img下放置logo和博客封面,在source/_posts/博客同名文件夹/img下放置logo、博客封面、博客配图,然后调用写img/图片名即可。PS.在博客编辑中,写img/图片在编辑器中并不会显示图片,为了在编辑中显示图片,博客封面以外的图片(也就是博客配图)则可以写成博客同名文件夹/img/图片名。

由于电脑里同时有02-16(初期暂为hexo)和islandfsj的hexo博客,所以在弄清除这些本地图片加载的事情后,将islandfsj这边的logo.png更名为番薯夹logo.png,02-16那边的logo.png更名为02-16 logo.png。PS.如果之前注意到这两个用的都是logo.png,肯定之前就更名了。

但在markdown调用图片或链接的语句中,图片名不能有空格(如果想输入文件原本的中文名而不是那一串很长的编码),本地编辑预览中就会不显示链接,但是封面的调用并不会出错,因此还是建议图片名都避免空格。(例如02-16 logo.png=>02-16logo.png)

本地图片调用解决时,由于图片版权的更改也基本完成,所以将再次将博客中的图片更改为本地文件,部分会是从图床下载回电脑,部分会是将本地图片文件放入博客(在2022年5月底大量地改为本地图片时,从效率上考虑,更多还是从图床上下载回电脑)。

在整体调整为本地图片并上传后,发现了另一个问题,就是在博客首页第二页的时候,图片的获取又出现了报错,查看请求路径:

:path: /page/2/img/MY%E9%98%BF%E6%A3%AE%E7%BA%B3%E5%8D%9A%E5%AE%A2%E5%B0%81%E9%9D%A2%EF%BC%88%E4%B8%8D%E5%8F%AF%E5%95%86%E7%94%A8%EF%BC%89.jpg

所以在public下额外建page文件夹,page文件夹下再建2文件夹,2文件夹下再建img文件夹(查看了下本地文件,page文件夹和2文件夹都已经自动生成了),然后放入首页博客的logo和第二页的博客文章封面。

改为本地图片后,上传到github,博客的访问速度会比较慢,所以想着同时上传到gitee,同时考虑分别使用不同的子域名,但最后选择根据访问域名时的IP来源设置不同的跳转,例如国内IP跳转至Gitee,国外IP跳转至Github,在本地博客的_config.yml中修改为以下格式的语句即可。

deploy:
- type: git
  repo:
    github: https://github.com/XXXX/XXXX.git
  branch: master
- type: git
  repo:
    gitee: https://gitee.com/XXXX/XXXX.git
  branch: master

都设置好后,同步至github和gitee后,gitee那边显示部分博客有问题,可能是内置的链接,但博客里用的都是些百度百科、博客的链接,所以就放弃在Gitee上部署博客了,如果访问本地图片慢,或许只能降低图片的分辨率,但我自己不太愿意在展示图片时降低图片的分辨率,所以慢就慢点吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容