起因
很久之前就想搭建自己的博客了,只是嘛,一直都没有时间(划掉,就是懒)。这一次之所以突然下定决心要搞一波,完全是因为我的同桌真的是个超级大神,北大本科,杜克大学博士,也有一个自己的博客和介绍页,看着她的介绍页真的是超级牛,超级强,而且不仅是学习强,还在自己感兴趣的各个领域钻研的很深。让我不禁连连感叹,大牛的人生真的是超级强,真可谓最强鸡血,对比下来仿佛我白活了这么多年,没有留下任何值得留存的记录。
所以,受到这个启发(主要是刺激),我也要开始搭建自己的博客和个人主页,但同时我觉得我最好同时发布和维护3个平台,一个是CSDN,一个是公众号,一个是这个博客。毕竟文章写好之后,多发布一下几乎不费时间。
为什么要选择github和hexo
选择github主要是因为能借助git的版本管理,顺便可以在github的热力图刷的好看一点,还有托管在github免费哇,不需要再另外维护云主机,不想当运维。省一笔主机钱,我只需要出钱买个域名即可,万网这个.tech域名买了10年也才199块,就是整个博客搭建中的唯一花销了
选择hexo是因为,能支持markdown的书写,和我现有的工具套件能配套上,可以无缝迁移过来,hexo的生态和主题都相对完善。
过程和踩坑
申请域名
直接上万网购买自己的域名,做完实名认证之后即可先放着,详细步骤具体参考知乎。
安装node和hexo,并部署到github
具体参考知乎,我是安装在macOS上,不需要搞这里面复杂的各种环境变量。
踩坑:我原本以为是建完git仓库后,把仓库pull下来,在里面初始化hexo,但后面看了一下,是要在空文件夹操作,并且后续发布到github的文件是hexo进行编译后的文件。
域名解析
能够部署之后保证通过github.io能访问即可做域名解析,具体参考知乎
挑选主题
原本我想直接在官方的主题链接里挑一个比较合适的,给自己定了几个标准:
- 整体必须是简洁的,那种大量有图片装饰的,背景花哨的不考虑(原因是,挑图片暴露自己的垃圾审美,还要给每个博客挑配图太费心力了)
- 必须能支持公式、代码块高亮等的解析
- 偏好整体布局要简洁,偏好侧边栏在右边,并且偏好文章要有侧边栏
- 主题必须有开发者长期维护和更新
- 能有评论系统
在上面看花了眼,都没有一个不合适的,看了大半天,猛然觉得自己挑选的思路不对,在最原始的未经过筛选的主题站里挑选,能不费劲吗?
转换思路,直接搜推荐的hexo主题,然后看到next主题是几乎完全符合我的要求的,然后发现next主题经历了好几个大版本的迭代,甚至github仓库都换了几次,直接上最新的8.0版本,拉下来
next主题各种调整优化
next主题中可以进行自主化调整的地方还挺多的,而且8.0版本中,很多地方和以往版本中有不一样的调整方式,我尽量把我用到的写一下。所做的所有操作基本是改一下themes/next下的_config.yml,很少一部分是更改hexo下的_config.yml,偶尔会使用npm装个包
设置首页信息
1 | title: 每天净瞎搞 |
风格选择
我把四个风格都试了一遍,最后比较喜欢Gemini
1 | # Schemes |
支持暗黑模式
这可是个意外惊喜,还会根据系统的设置自动适配
1 | # Dark Mode |
设置建站时间
1 | footer: |
设置网站脚注的信息(图标、备案等)
1 | footer: |
网站图标
先到网上找适合的图标,然后更新一下对应的文件,免费的图标素材网站:Easyicon
1 | favicon: |
标签页和分类页
参考next文档
侧边栏
我喜欢放在右边,主要是因为视觉聚焦主要是在左边的
1 | sidebar: |
打开文章标题下方更新时间、阅读时长等信息
参考官方文档
先按照npm包:
1 | $ npm install hexo-word-counter |
1 | symbols_count_time: |
1 | # Post meta display settings |
博客首页的摘要设置
这个要配合文章中的description字段,或在文章中添加一行注释辅助,参考官方文档
1 | # Automatically excerpt description in homepage as preamble text. |
置顶的百分比和顶部进度条
默认给的颜色有点花哨,我改成了灰色
1 | back2top: |
头像设置
在url里放置本地图片或者图床链接
1 | # Sidebar Avatar |
代码块高亮风格选择
使用了hightlight.js的高亮样式
1 | highlight: |
1 | codeblock: |
社交账号设置
1 | social: |
支持本地搜索
参考官方文档
先装包:$ npm install hexo-generator-searchdb
1 | # Local Search |
1 | # Local search |
评论系统
评论系统选择了valine,请参考next文档,其中头像需要注册一下Gravatar,参考头像配置,这里的邮箱提醒好像有问题,官方说明的方法不能用了。这个以后再说吧,我也不想有个评论就给我发邮件,要真有比较紧急的事情,直接发我邮箱吧
文章置顶
注意这里8.0更新之后,就不是通过安装插件改源码的方式实现,直接在文章的front-matter里面添加一个字段:sticky就可以实现了,值越高排的越前,默认为0是按照时间顺序,参考官方文档
文章赞赏
要先准备好微信,支付宝等的二维码,然后放在images下或放在图床中
1 | # Donate (Sponsor) settings |
简单的使用指南
写新博文
在blog目录下输入命令hexo new post <title>
,会自动在<blog-dir>/source/_posts
目录下生成对应的title文件,这时候用md编辑器打开写博客即可
本地测试
博文写完之后,因为各种不同的解析器和浏览器对md的支持会不一样,先本地看看效果,运行命令:hexo clean && hexo s
,然后根据提示在浏览器打开localhost:4000即可查看
推送到网站上
运行命令:hexo clean && hexo g -d
即可
尚未完成部分
这部分以后看时间和心情做吧,每做一部分记录一部分吧
- SEO
- 个人简介
- README
- 访问速度比较慢,考虑使用除github外的托管服务
- 考虑使用CI
- 考虑CDN加速
- 考虑把http转换成https
- 备案
- 图床替换成自己的域名
- 完善和链接一下领英
- 研究一下博客如何分享链接到微信
已知问题
- 在ipad上的safari显示的时候没有font awesome图标显示,文章内容侧边栏等显示不出来,但ipad的chrome没问题,iphone的safari也没问题,真是奇怪