校长说,奋斗真的只是因为 好吃的很贵,远方很远,喜欢的人很优秀 。

——《烟火焚》网易云音乐热评

前言

​ 我最初的想法并不是搭建个博客,网上也是可以找些博客平台的,但我又不太喜欢各大平台的限制和无孔不入的广告,偶然机会访问了一个QQ群主的博客,感觉挺有意思,之后看到阿里云高校学生“在家实践”计划也跟着领了6个月的服务器,折腾了会发现不会用啊,就让它落灰去了,然后看到这个可以用来搭建博客,突然兴趣就上来了,反正上网课也是无聊,搜集些资料后发现用服务器的话成本太高,就决定试试免费的Hexo,从此一发不可收拾,所谓一时折腾一时爽,一直折腾一直爽!我从什么是git都不知道的情况下慢慢能够迅速搭建出个Hexo并解决一些常见问题,这时我才发现,真正折腾人的,是主题的优化!

我没有详细列出Hexo搭建和主题配置的步骤,只是简单记录自己的学习经历,踩到的小坑坑和主题的优化,并汇总参阅的一些价值较高的文档。

参阅资料及历程简记

Hexo的官方文档中文版 (其实我并没有仔细阅读过,主要根据大佬们写的博客一步步走的)

  1. 手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo

  2. hexo史上最全搭建教程

这两个算是我的启蒙教材,不过视频作者是用的Mac平台,部分的操作和Windows还是不一样的,我倒是踩了不少坑,不过倒是对搭建的过程有了一些基础,然后找到了csdn上的一篇文献,是在Windows系统上的,所以跟着步骤做很快就搭建并配置出最原始的博客。


至于主题的选取也是耗费了一段时间,找到一款适合的还真不容易,最终选取了Matery主题,第一眼就被色彩和布局吸引了,果断下载!

作者的主题仓库介绍里面给出了详细的配置教程。

另外还有Yanfine大佬Hexo+github搭建博客(超级详细版,精细入微)的文档,里面把从环境准备,到博客搭建,再到Matery主题的配置都一步步列出来了,很是推荐!

此外点击Yanfine博客的主页你可以发现还有许多自定制修改文章,以及免费图床、码云coding部署。

致敬大佬!


折腾了近一星期后又发现了Butterfly主题,于是就叛变了,开始研究新主题,但我依旧是Matery的粉丝。

Butterfly主题仓库

作者的配置文档

第三方的配置文档Hexo-Theme-Butterfly快速入门及全面配置优化

两篇文档差不多,但后者对语言和配置做了些许优化整合,对零基础爱好者更友好。


那些碰到的问题

由于从开始接触Hexo,到安装和主题配置,整个过程前后约有一个多星期,时间长问题多,所以不可能把所有经历过问题都能列出来,对于一些问题由于当时并未截图保存,所以也无法清楚地阐述。


1. Hexo搭建

前面也说过了,刚开始学习的时候也是不知道该如何开始,就想着找个视频教程来得方便,于是入坑了b站上的一个叫codesheep的教程视频,虽然是mac版的,但视频的弹屏和下面的评论也有些与视频教程对应的Windows平台的步骤,解决了一些指令错误的问题。

所有git指令都是在博客的根目录中实现的,执行完hexo init xx后要进入xx里面再做后续操作。

如果出现一些问题或是不想要了直接把创建的文件夹xx一整块都给删了就行,然后重做。(为提高一次性成功率我开始都是在虚拟机里面操作的,后面才知道其实没什么影响,直接在电脑上做就行)

初始化和主题下载的时候由于一些原因可能会卡住,直接删掉重来😆

GitHub对应仓库的名称一定要是用户名.github.io

在git里面需要右键选择paste来粘贴你所复制的指令,有时候从网上复制git指令的时候会包含个回车,就是你粘贴后光标会自动转到下一行,有时候就相当于你按了回车,有时候指令会失效。


2. 无奈的错误

我犯了一个细节错误,主题中需要新建的_data文件夹我搞成了_date,在该主题下并未发现问题,应该是里面只存放了friends.json文件,而我并没有怎么配置友链的原因吧!但是在Butterfly主题中,由于Buttefly采用了平滑升级的模式,需要把配置文件复制并改名放在_data中,因此只需修改_date中的配置文件就能达到对主题设置的同样效果,我尝试太多次都出现许多报错,折腾了四个多小时后偶然的机会在群友的帮助下找出问题,当时真的是又可笑又无奈😔

3. Matery主题

  • 新建tags,categories ,about,contact等页面时,我看到压饭大佬给出的内容是这样的

    1
    2
    3
    4
    5
    6
    ---
    title: categories
    date: 2018-09-30 17:25:30
    type: "categories"
    layout: "categories"
    ---

    然后我直接复制粘贴到我新建的对应界面,由于并未选择粘贴为纯文本导致只是粘贴的代码,并不是应有的Front-matter,导致运行时点击标签分类关于等页面时无法导航到对应界面。正确做法是直接在自己新建的md文件中手动打出来,或者粘贴为纯文本,但都要注意是在Front-matter即原本生成的给你的框框里面。(后来想了想,压饭给出的应该是源代码模式下的md内容,只要我也在源代码模式下,就是可以直接复制粘贴的—-源代码模式与普通视图的切换在视图/源代码模式里面)

  • 对于图片懒加载之后击首页logo不是跳转到首页,而是查看logo图片问题的解决方案中,修改主题的header.ejs文件时我错误地将第二个添加的元素误认为也是<div>(应该是</div>),导致主页排版出现混乱,困扰良久😖(后来想想,但凡有点html基础常识我也不至于这么折腾!)

4. Butterfly主题

  • 有了前面那么些天的折腾基础,换主题还是很简单的,但我第一次碰到需要使用 data files 特性的主题,有点不知所措,折腾之后也就明白了,其实就是在_data/butterfly.yml中对主题作配置,之后需要升级的时候,直接下载整个主题包,替换原本的整个主题文件夹,然后将新的主题配置文件与_data/butterfly.yml比较来进行增删。当然前提是你并没有进行魔改,如果你在原本的主题文件中做了处理修改,那么就需要重新修改了,但总体还是比较方便的。

  • 主题需要装渲染器的,所以hexo s后发现只有一两行英文时不要惊讶,按文档要求装上。

  • 另外大多数问题都是没有装插件导致的,所以在配置文件中你改每个falsetrue的时候都要注意文档中有没有给出需要装插件的要求。

  • 主题文档中对Front-matter的配置那里有个地方少了个:所以修改后hexo g会报错,注意加上就好了。

链接直达

  1. 图标网址Font Awesome

  2. 天气插件生成中国天气官网

  3. Valine管理LeanCloud

  4. 访客地图clustrmaps

  5. 图片上传工具PicGo

主题美化相关

  1. 页脚渐变颜色,背景,鼠标样式,也可参考下。

插件补充

  1. 文章链接简短:abbrlink npm install hexo-abbrlink --save
  2. 音乐播放器:aplayer npm install --save hexo-tag-aplayer
  3. 添加卡通人物(看板娘):npm install --save hexo-helper-live2d 模型选择
  4. 豆瓣插件 npm install hexo-douban --save

感想

Hexo的搭建过程倒是能磨磨我的耐心,是会有很多问题的,而我对前端知识并未涉猎,那种感觉就像我不听物理课,然后还要交物理作业那样,唯一的区别就是我对物理没兴趣。然后还有很多不知名的错误,怎么说呢,就像这样:

哈哈,我感觉还是可以有很多个性化问题的,比如对文档的理解以及安装环境等其它各种不确定因素(当然,这只是对我这种先前对相关知识并无了解毫无经验的人),这就需要坐下来慢慢折腾,参考别人的经验,不断地用搜索引擎。不了解的知识就去学嘛,不想学就按照别人的教程跟着走嘛,不求甚解,求一知半解也是可以的啊,这都需要花时间精力的,但总比我花在娱乐上强嘛,回想起来,这一天折腾下来还真跟我以前打一天的游戏感觉差不多呢!其实吧,这个的意义还真就在于搭建优化的过程,有这时间还不如去个现成的平台呢。生命不息,折腾不止,折腾,或许是我前进的动力吧!