技术博客,我为什么选择Hexo-Fluid?

1,300 阅读6分钟

我为什么选择Hexo-Fluid?

目前个人博客搭建的方式众多,但最终的目的其实很简单,就是记录自己的技术学习历程,所以不想本末倒置浪费太多时间。我选择Hexo博客框架来搭建博客的主要原因如下:

  • 十分方便快捷,又能实现自适应,最重要的还是美观,让我有动力写下去
  • 目前github上也有很多魔改Hexo框架的优秀例子,让我也很想尝试一把来打造属于自己的名片

选择Fluid主题的起因其实也很纯粹,就是因为文档比较全面,维护情况也良好,让我能够高效且稳定的搭建自己的博客。

之前在选择博客主题方面浪费很多时间,最终选择了某主题,但后期实际搭建和维护的时候查找资料浪费了大量时间,后期甚至启动的时候还遇到一些问题,还要自己去改源文件,让我无法很好的专注于写博客本身这件事,所以我十分明确高效简单稳定是我的第一需求。 后续在使用Fluid主题的时候,也更加坚定了自己这个选择,Fluid yyds!

博客搭建过程

首先献上Hexo官方文档和Fluid文档,建议食用顺序是先按照官方文档搭建出博客,然后再根据Fluid配置指南开始做配置了,后文将只会说一些我搭建时遇到的问题和解决方案,其他的文档里都写的很清楚了。

编辑文件没有权限

我修改了文件的操作权限后仍有这个问题,terminal执行以下代码解决

sudo chmod -R 777 . ## 为当前目录及子目录搜于读写权限

使用github pages

基本配置

创建一个新仓库,如果想使用username.github.io链接能直接进入博客的话,仓库名直接写username.github.io 但我比较想用另外的仓库来做为博客存放点,所以我建了一个名为blog的仓库,但这个决定让我遇到了一些问题,因为在_config.yml的配置不对,导致我编译出的文件引用路径不对,样式错乱,下面展示下正确的配置

url: https://username.github.io/blog
root: /blog

search功能检查

如果通过blog子页面去访问github pages,注意修改下search页面路径为blog仓库下的,不然搜索时会因为找不到搜索页持续loading

search:
  # 搜索索引文件的路径,可以是相对路径或外站的绝对路径
  # 如果后续修改为自定义域名后记得把/blog前缀去掉
  path: /blog/local-search.xml

自定义域名

如果后期你想改用github pages自定义域名的话,url写自己的域名就好,root这一行记得注释掉

url: https://blog.strugglinglee.cn
# root: /blog

我这里顺带说下配置自定义域名的方法,如下图,setting->pages->custom domain 这里比较建议用子域名,添加一条dns解析记录即可,我使用的是腾讯云,其他运营商应该也是类似的,主机记录填写blog,记录类型选择CHAME,记录值为github page的域名

目前配置ssl证书使用https安全链接访问也比较方便,一般运营商都可以支持一键申请和部署,不需要做太多操作,记得提前备案你的网站。

如何修改配置

修改配置这里我走了比较多的弯路,习惯于google,很是浪费时间,这边建议搭配fluid文档和github.com/fluid-dev/h…来修改配置

比如我想修改网站的favicon小图标,直接在_config.yml文件中ctrl+f来搜索favicon,把这两行复制到自己的yml文件中再进行修改,就可以覆盖默认配置,真香。

_config.yml可以自己看一遍,对一些基础配置有个了解会比较方便后续你修改。

自动编译部署

配置方法

我这边是用到了hexo官方推荐的travis-ci第三方自动编译部署链接自取 按配置一步步来就好,配好了就十分简单了,push上去直接部署

编译问题处理

我按官方给的yml文件配置部署有时候会存在缓存文件未更新的情况,或者下面这些yarn报错的问题

The command "yarn" failed and exited with 1 during .
The command "eval yarn --frozen-lockfile " failed. Retrying, 2 of 3.

这里贴一下我自己修改后的yml文件

sudo: false
language: node_js
node_js:
  - "14" # use nodejs v14 LTS 解决yarn报错问题
cache: npm
branches:
  only:
    - main # build master branch only
install: # 解决yarn报错问题
  - yarn
script:
  - hexo clean # 解决缓存文件未更新问题
  - hexo generate # generate static files
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GH_TOKEN
  keep-history: true
  on:
    branch: main
  local-dir: public

travis-ci还是挺稳定的,编译部署也很快,个人还是比较推荐的。后续又了解到了github自家的Github Actions,都是免费的,决定抽时间也玩玩。

自定义iconfont使用

官方配置自定义iconfont文档

使用流程参考

可以看到官方文件是使用伪元素这样处理iconfont的 5.png 没有什么实际参考意义,我们实际上可以通过background来处理就好,比如我想使用一个掘金的小图标来放到关于页面,具体步骤如下

  1. 在source文件夹下建了一个css文件夹并且新建一个custom.css文件

  2. 在_config.fluid.yml文件中添加这行代码 custom_css: /css/custom.css

  3. 在css文件中贴入类似如下的代码

    .icon-juejin-fill {
      display: inline-block;
      width24px;
      height26px;
      backgroundurl('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2031%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.0737%205.80396H15.0757L18.706%202.91722L15.0757%200.00406298L15.0717%200L11.4475%202.91112L15.0717%205.80193L15.0737%205.80396ZM15.0757%2014.9111L15.0778%2014.9091L24.4429%207.52057L21.9036%205.48096L15.0778%2010.8664L15.0757%2010.8685L15.0737%2010.8705L8.2479%205.48502L5.71057%207.52463L15.0737%2014.9132L15.0757%2014.9111ZM15.0716%2019.9614L15.0757%2019.9593L27.614%2010.066L30.1534%2012.1056L24.449%2016.6053L15.0757%2024L0.243779%2012.3047L0%2012.1117L2.53936%2010.0721L15.0716%2019.9614Z%22%20fill%3D%22%231E80FF%22%2F%3E%3C%2Fsvg%3E') no-repeat center 4px;
      background-size100%;
    }
    
  4. i标签通过class来引用就ok

注意svg文件需要通过encodeURIComponent方法来编码下,不然会有兼容问题,部分机型会看不到,比如我这边mac就会出现图标消失的问题

评论插件的选择

评论配置文档入口

其实fluid官方已经做了很多评论插件的支持,根据其给出的参考文档链接就能快速方便的进行配置 通过在github.com/fluid-dev/h…文件中搜索对应的关键字把相关的配置copy过来进行填写就好。

尝试了很多,我个人比较喜欢极简方便快捷的,所以我选择了Valine,顺带提一句,Twikoo (基于腾讯云开发)其实看起来也特好用,输入自己的qq邮箱还能自动生成自己的qq头像,但是不是免费的,嗯,向金钱低头。 btw,免费的Valine已经很香了,如下图。

以上,就是我近期对Hexo-Fluid的初步尝试,也算是初见成效,写文章也更有动力了。

感悟

遇到问题,解决问题的过程很煎熬,但是只要不停的尝试,成功的那一刻是难以言喻的。另外深刻体会到一点就是任何事情在最开始的时候最不能偷懒,必须先有一个全局的规划,多方对比选择最适合的方案,不然只会是不停的浪费时间,不停的撞南墙。只要走上一条正确的路,加上坚持,虽然过程中也会有些许磕绊,但最后成功之后便都是收获。