hexo博客翻新记录

起因

去年搭建了我的第一个hexo博客初次使用,很多地方觉得不顺手:

  • node.js和npm安装在自定义路径,升级维护不便

  • github仓库使用了多个混乱的branch,而且naming convention仍然是如今已经deprecated的master

  • 默认主题landscape不够简洁

  • 博客名字不够简洁

因为目前为止我的博客不过就是几篇文章的集合罢了,没有什么复杂精细的巧妙构造,也没人看,所以保存好这几篇文章的md文件就可以,其他一切内容都可以全部推倒重来。因此决定重建整个hexo博客。

下线博客

  1. 备份整个博客文件夹

  2. 删除博客托管在github上的相关内容

    • 首先删除github personal access token

    • 然后删除整个博客托管所在的github仓库(这样博客就下线了,访问会出现github的定制404页面)

重新安装node和hexo

  1. 彻底卸载本地自定义目录下的node框架

    • sudo find / -name "node"检查node的位置之后直接删掉node所在的整个自定义文件夹,以及误装在系统上的/usr/local/bin/node

    • 再次find清理掉剩下的相关文件。

  2. node.js官网安装node

    • 使用snap安装nodesudo snap install node --classic

    • 检查一下nodenpm的版本,确实是最新的。

  3. 使用node重新安装hexo框架

    • sudo npm install -g hexo-cli

    • 检查版本hexo --version

使用hexo重建一个全新博客

  1. 建立博客文件夹并且建站

  2. 安装polarbear主题大失败

    • 安装遇到奇怪error,使用binary distributions重装node,然后重新安装hexo,重新建站。

    • hexo-renderer-scss安装失败(陈旧的东西总是出问题,再次曲线救国,换其他主题,天涯何处无芳草)。

  3. 决定使用next主题

    next主题是一个维护非常活跃的主题,这意味着很多问题都能得搜得到解决方案,所以是减少折腾、方便学习的好选择,虽然在我看来美观性有待提高。

  4. 使用next主题配置部署初始博客到github

    • get started,按照说明配置next主题。

    • 然后参考在 GitHub Pages 上部署 Hexo,按照说明建好github的repo给博客使用。

    • 使用一键部署,通过修改_config.yml设置好hexo的deploy相关内容,填写author、网站titlesubtitle、网站description等等,并部署到github(需要设置personal access token)。

恢复原先的博客内容并重新上线博客

  1. 将原先的博客文章拷贝到现在的source目录下然后重新deploy

  2. 修正文章时间出现错误的小bug

    hexo的post发布时间应该是以post的markdown文件front matter(也就是用一组---夹在文件最开头的几行内容)中的date为准,所以在迁移老文章的时候需要留心一下是不是有些文章初次发表的时候出于种种原因没有生成date,如果有,手动写好正确的date,否则(貌似)hexo将会把这篇文章的markdown文件最后保存时间作为发布时间,引起一些小小的时空扰动。

尾声

到这里全部工作就完成了,可选的内容是设置next主题的主题(没错,next自带四种变体主题),选一个好看的主题,hexo clean && hexo generate && hexo server看一下效果,满意的话就deploy到github上。其他花里胡哨的东西(例如评论插件等等)以后再慢慢接触吧。


后续

简单记录一下我后续进行一些细节个性化设置。参考官方文档操作,步骤清晰简明,很好上手。

启用tags和categories

官方文档。需要按照设置custom pages手动创建tags页面和categories页面。

设置sidebar

官方文档,但是目前还没有做到让手机浏览器访问时也显示sidebar。

设置footer

官方文档,居然有公安备案选项,不由得感叹next主题工作的细致程度,虽然我不可能去做备案。

设置posts

官方文档,这一部分的设置是我个人非常喜欢,并且认为比较重要的。

设置custom pages

官方文档,这一部分呼应启用tags和categories,用来手动添加tags和categories的页面。

官方的文档说明已经非常详细,继续写下去没有太大意义,就记录到这里了。此外,我还启用了Gitalk评论插件、增加了博客的favicon等等,同样在官方文档里有详细的说明。