博客搭建
之前搭建个人博客的时候,是借助github pages和Hexo而建成的,在建站过程中看到一篇介绍特别详细的博客教程,如果有建立个人博客的想法的同学可以参考这篇博客。
建博客的时候还踩了点雷。一开始想用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上部署博客了,如果访问本地图片慢,或许只能降低图片的分辨率,但我自己不太愿意在展示图片时降低图片的分辨率,所以慢就慢点吧。