我为什么选择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的 没有什么实际参考意义,我们实际上可以通过background来处理就好,比如我想使用一个掘金的小图标来放到关于页面,具体步骤如下
-
在source文件夹下建了一个css文件夹并且新建一个custom.css文件
-
在_config.fluid.yml文件中添加这行代码 custom_css: /css/custom.css
-
在css文件中贴入类似如下的代码
.icon-juejin-fill { display: inline-block; width: 24px; height: 26px; background: url('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-size: 100%; }
-
i标签通过class来引用就ok
❝
注意svg文件需要通过encodeURIComponent方法来编码下,不然会有兼容问题,部分机型会看不到,比如我这边mac就会出现图标消失的问题
❞
评论插件的选择
其实fluid官方已经做了很多评论插件的支持,根据其给出的参考文档链接就能快速方便的进行配置 通过在github.com/fluid-dev/h…文件中搜索对应的关键字把相关的配置copy过来进行填写就好。
尝试了很多,我个人比较喜欢极简方便快捷的,所以我选择了Valine,顺带提一句,Twikoo (基于腾讯云开发)其实看起来也特好用,输入自己的qq邮箱还能自动生成自己的qq头像,但是不是免费的,嗯,向金钱低头。 btw,免费的Valine已经很香了,如下图。
以上,就是我近期对Hexo-Fluid的初步尝试,也算是初见成效,写文章也更有动力了。
感悟
遇到问题,解决问题的过程很煎熬,但是只要不停的尝试,成功的那一刻是难以言喻的。另外深刻体会到一点就是任何事情在最开始的时候最不能偷懒,必须先有一个全局的规划,多方对比选择最适合的方案,不然只会是不停的浪费时间,不停的撞南墙。只要走上一条正确的路,加上坚持,虽然过程中也会有些许磕绊,但最后成功之后便都是收获。