前言
我的Hexo博客很早就建好了,但一直没时间把搭建博客的步骤和经验好好总结。今天,我把在搭建博客中注意到的点及经验总结下来。一方面与大家分享,另一方面也加深自己的记忆,总结经验。
环境
安装Node.js及npm
要搭建Hexo博客,首先需要安装Node.js环境,去Node.js官网下载Node并安装。
NodeJs官网:https://nodejs.org/
在命令行界面输入node -v 查询版本号。
输入npm -v 可查询npm版本号。
安装Hexo
使用npm指令安装hexo
npm install hexo-cli -g
安装成功后输入hexo -v可查询hexo版本信息
博客初始化
安装好hexo后,我们找到一个自己文件夹,通过指令进入该文件夹。
使用指令:
①hexo init blog
②cd blog
③npm install
④hexo s
会看到命令行输出如下信息
打开浏览器,输入地址便可以看到blog搭建成功了。
美化博客
虽然blog搭建好了,但是总感觉不是很好看。
推荐一款hexo主题Next,其有很多种blog主题供我们选择。
安装Next主题
首先cd到刚刚建好的blog目录下,执行命令:
git clone https://github.com/iissnan/hexo-theme-next themes/next
如果没有安装git,那么安装下吧。
请去git官网下载git: https://git-scm.com/downloads
如果命令执行成功,在blog下的themes包下,我们可以看到next文件夹,那就是刚刚下好的next主题啦。themes包下那个landscape包,就是hexo自带的默认主题。
如果不成功,那么我们可以直接下载next主题,https://github.com/iissnan/hexo-theme-next/releases,下载source code,然后把文件解压,重命名为next放到themes包下就可以了啦。
完成后,在blog包下,有个_config.yml文件,打开它,里面配置为theme: next即可加载next主题。
Hexo的_config.yml文件
上文提到的这个配置文件是Hexo的核心配置文件,我们来说下这个文件吧
请先对yml语法有一定了解,本文不做说明。
1 | # Hexo Configuration |
Next主题的_config.yml文件
在next包下,也有一个_config.yml文件,这个文件是配置next主题的,也简单介绍下。
1 | menu: //next主题菜单 |
1 | scheme: Pisces //主题类型 |
我选的Pisces主题。
1 | social: //社交信息 |
上面都是一些基本配置,下面我们对blog进行更多的美化。
添加动态旋转头像
打开/themes/next/source/css/_common/components/sidebar/sidebar-author.styl文件
将代码替换为:
1 | .site-author-image { |
后重新发布,可以看到头像可以旋转啦。
添加本地搜索插件
安装hexo-generator-searchdb:
npm install hexo-generator-searchdb –save
同时在hexo的_config.yml里配置如下参数:
1 | ##local_search |
Next的_config.yml配置如下:
1 | local_search: |
重新发布,可以看到新增了搜索功能。
更换背景图片
找到 /themes/next/source/css/_custom/custom.styl文件
加入如下代码:
1 | body { |
重新发布,可以看到背景图片变化了。
添加live2D功能
安装live2D插件hexo-helper-live2d
npm install hexo-helper-live2d –save
Hexo的 _config.yml文件里配置如下参数
1 | live2d: |
重新发布,便看到萌萌的二次元人物出现啦。
添加评论插件
这里用的Valine评论插件,Valine插件需要leancloud支持,请先注册leancloud,注册成功拿到id和key。
1 | valine: |
配置成功后,重新发布便能看到文章可以评论啦。
开启访客统计
当我们注册好leancloud后。
1 | leancloud_visitors: |
找到代码,填入自己的id和key。
重新发布,在页面上可以看到博客的访客数量。
开启字数统计
安装字数统计插件:hexo-wordcount
npm install hexo-wordcount –save
Next配置文件如下参数开启:
1 | post_wordcount: |
重新发布便拥有了字数统计功能。
续
文章还没写完,后面会继续更新。
欢迎大家关注我的博客