搭建个人博客网站教程-09:Hexo+GitHub Pages:更换Hexo主题(简单方式)


既然已经搭建好了我们的个人网站,接下来就可以做点稍微有意思点的事情了。比如:给我们的个人博客网站换个主题!

最开始我们在通过**hexo init <hexo源码文件夹>**指令创建Hexo源码文件夹的时候,默认下载的主题是 landscape,如下图所示:

我们也不能说它丑,其实还看得过去,毕竟是官方默认的,姑且称之为经典吧。但是,确实不是很好看。好了,下面开始正题。

一、挑选主题

官方地址:https://hexo.io/themes/

从上图中可以看到,截止至本篇博文发布之时,官方总共提供了330个主题供大家选择。

如果要说有没有什么选择的原则,应该是没有的吧,关键是要自己看着喜欢,最好是一见钟情的那种,毕竟它将会作为你个人网站的的主题,代表你个人的风格,很可能成为别人对你的第一印象。

做为一个严重强迫症患者,我硬是把官网提供的330个主题全部点开看了一遍,花了几个小时经过好几轮筛选,才最终选定!非常不值得大家借鉴!大家选的自己看着开心就好~

二、下载主题

我最终选定的是下面这个名为Matery的主题:

选定主题后,点击图片,可以直接进入该主题作者基于该主题已经开发好了的个人网站:https://blinkfox.github.io/
如下图所示:

点击上一幅图上蓝色加粗的Matery,可以进入该主题的源码仓库:https://github.com/blinkfox/hexo-theme-matery,如下图所示:

依此点击上图中的红色圈出的部分,便可获得该主题仓库的下载链接至剪切板。

回到我们本地的Hexo源码目录,进入根目录下的themes目录,在空白处右击打开Git Bash窗口,输入如下指令并回车以开始下载我们选定的主题:
git clone git@github.com:blinkfox/hexo-theme-matery.git
大家需要将指令中的链接替换成自己选中的主题的下载链接

该主题下载完成后,Git Bash窗口中如下图所示:

与此同时可以看到themes目录下多出来了一个hexo-theme-matery的文件夹:

这里面就是我们新下载的主题的所有源码。

三、更改主题配置

回到Hexo源码目录的根目录下,找到站点配置文件_config.yml,用Notepad++或记事本 等文本编辑工具打开,找到主题配置部分,如下图所示:

将上图中原来的主题名称landscape,直接改为我们刚刚下载下来的主题所在的文件夹名称hexo-theme-matery(这里其实也可以改为 matery,但也必须将主题所在文件夹的名称也改为 matery,保持一致即可)。如下图所示:

保存并退出。

四、本地预览

主题更改完成之后,我们可以先在本地预览一下效果怎么样。

回到Hexo源码目录的根目录下,打开Git Bash窗口输入如下指令并回车,进行本地预览:
hexo server -o

在弹出的浏览器窗口中,我们可以看到更改了主题之后我们个人博客网站全新的主题效果:

仔细看发现主页还会变色,哈哈~
页面向下滚动,效果如下图所示:

五、网站部署

完成预览后,后续大家就可以生成静态网页并进行网站部署了。

这部分内容以及后续访问测试GitHub Pages等,前面文章中已经详细介绍过,这里就不再重复了。


文章作者: 拿破仑940911
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 拿破仑940911 !
评论
  目录