建站二三事

建站二三事

开此文记录下该网站相关的一些事情。

两天的折腾,最终选择Hexo搭建完个人网站。

一开始打算用WordPress建站的,阿里云的轻量应用服务器挺好的,WordPress镜像都帮你装好了,但默认网站样式太难看了,想搞个个性化点的个人网站,点开WordPress后台开始进行一波操作。版本更新失败…主题安装失败…文件没权限…插件安装失败…以为的便利,结果折腾了一天都没整出个满意的网站,全在找原因修bug了,佛了。评估了下感觉WordPress虽然功能强大,但对于个人网站而言显得有些冗余,果断抛弃一天的沉没成本,转向更加轻量级的Hexo。换成Hexo后,发现更好用,一个晚上不到,我的个人网站初版已经成型了,第二天添加了些插件,网站配置也更加个性化。

服务器

我选择租了阿里云服务器,趁着还享有学生优惠多用两年,当然也有免费的方案,比如挂在github,用github pages当主页,域名都可以省了,但考虑再三,还是自己租服务器靠谱。这跟为什么我非要折腾个人网站,而不是直接在CSDN、简书等博客网站发表博客的原因相同,靠得住的还是自己整的,太过于依赖第三方反而会自我限制。比如在博客网站发表博客,能否通过还得看网站心情,抽风吞文也不是没有。我对这个个人空间的期望是能有绝对的控制权,自己制定规则,记录我想记录的,修改我想修改的,显然搞个个人网站当是首选。自己折腾服务器还能学点服务器和Linux系统的知识,美滋滋。

域名

域名一定要趁早注册…想要的域名都被注册了超难受…
其次域名需要备案。这块这次踩了坑,17年时候备案过一次,后来域名一年过期不再用了,结果这次备案初审就被拦下来,说是增加网站备案需要确保之前的网站可访问,但域名已经过期不是我的了,对应的网站也不是我的,访问不了我也没办法,然后阿里云工作人员告诉我直接去注销网站域名备案就可以了,也发了教程告诉我如何注销网站域名备案。照做。再重新提一次新网站的备案单,过了一会,阿里云又来电话,说我的主体下无域名,空壳主体无法增加网站备案,需要注销主体,重新申请主体才能申请备案。 然后线上阿里云备案管理的主体这时已经消失不见了???????? 主体不见我去哪里注销哦?????? 打电话询问阿里云,对方说如果主体下还有域名才可以线上注销主体,现在主体下无域名,无法通过阿里云注销,只能在工信局网站下载填写注销备案申请表,线下注销,工信局跑一趟了咯。????? 那一开始就教我注销网站域名??? 不如直接教我注销主体就好??? 还好工信局可以将申请表通过邮寄方式寄送过去,但寄送到处理至少也要5个工作日…只能等了…

Hexo

这玩意还是真是喜欢,全靠同行衬托hhh,特别是对比了WordPress后。

安装过程参考 阿里云CentOS 搭建hexo 博客

其中遇到了一个问题,ssh的authorized_keys无论怎么设置主机都无法免密码登陆,后来查到了解决方案 ssh 免密码设置失败原因总结 。自己手动设置了那么久都不行,既不是权限问题,也不是StrictModes问题,结果发现了这句

1
ssh-copy-id -i ~/.ssh/id_rsa.pub 用户名@对方机器IP (注意不要忘记了参数-i)

自动分发公钥到目标机器! 完美解决问题。

Hexo 快速入手

个性化配置

个性化配置方面参考了下面的链接:

Hexo的主题可在github里搜索‘hexo-theme’即可找到,最火的next主题走的简约风,网上也有很多关于该主题的文章。但感觉我更喜欢icarus的风格,所以选择了它。

配置方面参考:

喜欢交互式的网站,希望在浏览网站时有趣些,所以整入了些有趣的东西:

  • Live2D shizuku hexo-helper-live2d
    • 装了Live2D插件后,资源也需要下载,可通过npm install –save ***
    • 如果没有下载资源,默认也会用shizuku的,只不过无法进行配置,设置所在位置和大小等。
  • Canvas-nest 点线背景交互特效 canvas-nest.js
    • 遇到一坑,明明js资源加载没问题,但显示不出来效果,原因是背景的z-index太靠前了。

图片引用问题

在markdown中引用图片后,上传到网站,图片路径会不一致,为此找到这篇博客《给自己的博客加上图片

然后遇到了生成的路径名字重复的问题

百度找了半天,没一篇精准针对这个问题,谷歌一搜就搜到了《图片引用问题》(百度还是不行呀)

解决办法
虽然网络上有许多文章提到要安装hexo-asset-image插件,但真实的情况是,这个插件在使用上述方式引用图片时,并没有按预期工作,而在没有hexo-asset-image插件的情况下,图片路径也能正确生成。经过研究,发现一种可以正确引用图片的方法:

  1. 卸载hexo-asset-image插件
  2. 使用![test](test.png)这样的方式,而非![test](test/test.jpg)的方式引用图片
  3. 使用支持设置图片引用根目录的Markdown编辑器来编辑md文件,例如,使用Typora编辑器的话,就可以在md文件的Front-matter部分,加上typora-root-url: test这条指令,来指示图片引用的基准目录为文件同级路径test。这样的话,在Typora编辑器中能正确显示图片,生成的HTML中,路径也是对的。
    另外,为了解决这个问题,分析了代码,图片路径的生成,是在node_modules/hexo/lib/plugins/helper/open_graph.jsopenGraphHelper函数中做的,其中有一段images = images.map(path =>...);的代码做了这个工作,想从源码级解决的话,可以从这里入手。

所以现在图片正确的索引方式为 ![] (error.png) 不能有“/” 否则上传后路径转换会缺少日期而导致不正确

原版的hexo-asset-image在hexo更新后,还是有问题,没有做好兼容,于是又找到了一位博主修改过的hexo-asset-image《在 hexo 中无痛使用本地图片 》 完美兼容Markdown。

执行下面命令下载即可

1
npm install https://github.com/CodeFalling/hexo-asset-image --save
# Web, 随笔

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×