基于NexT主题的下一代博客成功上线
这篇文章主要是记录一下我新建了一个博客,同样是基于Github Pages,不同的是以前的博客基于stun主题,而下一代(新的)博客是基于NexT主题,以前博客的内容都移植到了新博客上,并且新博客还酌情修改和增加了一些东西,以下作简要介绍。
1.为什么要用新的主题
stun主题本身还是很好用的,页面布局与门户网站有点像,同时也融入了个人博客的侧边栏,二者结合相得益彰,一点也不突兀,的确让人眼前一亮,非常优雅,个人认为作者应该是有较为资深的网站开发经验;stun主题的文档也非常详细,并且是中文的,给刚刚入门hexo博客搭建的我提供了很大的帮助,完整阅读过一遍文档增加了很多网站搭建的知识,如网站SEO,网站优化等;另外,stun主题对于移动端的优化也很不错,相比之下NexT主题貌似有点不足。
前面讲了stun主题这么多的优点,再回到问题,为什么还要使用新的主题,主要是基于以下几点考虑的:
- stun主题已经很久没有更新了,官网上显示上一次更新还是在2021年1月25日,而hexo的更新速度还是很快的,官网显示上一次更新是在17天前,hexo更新增加了新的特性,这些stun主题可能无法使用了,并且,更严重的问题是,随着浏览器的更新,基于stun主题生成的博客可能出现不适配的问题,网页浏览的体验不好。
- 我的网站已经出现了一点问题,就是在Tags页面会出现拖不到底的情况,我用Edge浏览器和Google Chrome浏览器试过,都是这样的,移动端没问题,Tags页面是自动生成的,我无法修改,由于对网站开发并不熟悉,虽然可能可以捣鼓出来,但是不想折腾了。
- 更换博客主题虽然有成本,但是并不是非常大,以前的文章,图片等资源都可以直接使用,修改量很小。
值得一提的是,个人还是很喜欢stun主题的页面布局和风格的,由于我不太熟悉js和css技术,否则我还是非常希望能够加入到维护stun主题的行列中的。
2.新建一个Github仓库挂Pages
Github上新建仓库还是很容易的,这里不再赘述,这是我新建的仓库:next-blog。建好新建一个master分支,我个人更喜欢把网页文件放在master分支上,而在main分支上存放README.md文件,作为网站说明。
3.使用NexT主题生成新的网页文件
前面已经提到过,更换主题时文章和图片这些内容基本不需要改动,需要修改的是主题文件,根据自己需要设置相应的参数,关于NexT主题的参数的作用以及如何修改官方提供详尽的文档,按需使用,但是由于文档是全英文的,并且很多设置的具体作用并没有详细说明,因此对新手不是很友好,这里建议对比着stun的文档来看,相互对照,更容易理解。
当然在修改 NexT 文件过程中还遇到了以下几个问题,这里记录一下,也可作参考:
- NexT主题的超链接文字标记不明显:使用中发现,NexT主题原本的超链接文字仅仅添加了下划线,并且没有改变颜色,显示效果较差,很容易被略过,非常有必要修改一下,但是NexT主题本身并没有提供这样的功能,要实现这一功能需要修改主题文件中的样式文件,幸运的是,网上已经有相关教程:https://blog.csdn.net/Growing_potato/article/details/113926894,本人试验过,文中的方法可行。
- NexT主题中指示是否启用LaTeX数学公式所用的标签是 mathjax ,而stun主题中是math标签,因此对于启用了LaTeX数学公式的文章都需要单独修改。
- NexT主题的归档页是分页的,个人认为归档页不分页,把所有文章放在一起显示效果更好,因此这里同样需要稍作修改,要完成这一目标需要修改Hexo的配置文件而非NexT主题的,网上也有相关教程:https://sobaigu.com/hexo-archives-show-all-in-one-page.html ,是按第二种方法实现的。
- NexT提供了非常多的标签插件,可以实现的功能非常多,如下图,使用Mermaid可以实现非常复杂的流程图,使用Tags能实现可以点击切换的并列列表…这些功能是提升文章逼格的利器。需要注意的是,这些功能是NexT主题所特有的,其它主题可能并不支持。
4.用二级域名绑定到新的Pages
主题文件配置完成后,就可以生成网页文件,提交到Github上之前创建好的仓库,这样就已经可以访问了,相应网页有了网址,但是考虑到之前已经买了域名,所以这里需要重新申请一个新的二级域名来指向这个新的博客网站,相应的教程可以参考这篇文章:https://zhuanlan.zhihu.com/p/183977963。
原则上我们购买了顶级域名之后,这个顶级域名之下的所有域名都属于我们,我申请的域名是
-
在Github新建一条指向Github Pages服务地址的A记录,值为next。如图
-
之前讲过,我使用了cloudflare的cdn加速,所以需要在服务器上也新建一条A记录,如图
以上两步中第一步可能有点多余,但是保险起见,可以都设置一下。
- 在仓库中设置Pages的域名,如图
完成之后等一段时间就可以通过新的二级域名来访问下一代博客的地址。
5.总结
- 基于stun主题的博客地址:https://www.jun997.xyz/
- 基于NexT主题的博客地址:https://next.jun997.xyz/
6.一个小插曲
前面参考的那篇知乎文章中也讲过,Github Pages除了可以自定义域名外,还可以使用Github提供的域名访问,要发布站点,首先需要创建一个名为
如果还想要继续创建Pages,新建一个仓库就行,只不过新Pages访问的域名变为