Hexo博客搭建

Hexo 博客搭建

什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

搭建步骤

安装NodeJS

首先去官网下载NodeJS基本都是一键安装的

安装Git

安装Git

安装Hexo

在Git安装好之后,找一个文件夹作为自己的Blog项目,这就叫myblog

鼠标右击打开git bash

输入Hexo下载命令

1
2
3
4
$ npm install hexo-cli -g
$ hexo init myblog
$ cd myblog
$ npm install

安装好后,输入如下命令

1
2
hexo g//生成文件 全拼是hexo generate
hexo s//开启hexo

然后会提示

1
2
INFO  Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

就可以在浏览器访问4000端口,看到如下界面便完成第一步了

如果失败可以尝试使用命令

1
hexo clean//清除自动生成的文件和数据

选择自己喜欢的主题

Hexo提供了很多丰富的主题,可以在这里查看。这里我们使用目前最流行的Next主题。之所以选择Next是因为Next集成了很多功能在其中,例如评论系统。

打开我们刚才的myblog文件夹,打开themes,右键git bash,输入命令

1
git clone https://github.com/iissnan/hexo-theme-next

这里感谢Next的作者 iissnan

下载好后会在themes中多出一个hexo-theme-next文件夹,这就是主题文件夹,我们以后的各种设置都会在里面的_config.yml中设置。

然后回到我们myblog的根目录中,打开_config.yml文件,找到theme标签,将他设置为如下

1
theme: hexo-theme-next

然后我们在git bash中,输入如下

1
2
3
hexo clean
hexo generate
hexo s

再去访问4000端口。看到如下画面就是成功啦

至此第二步完成啦。

基本使用

可以看到我们的博客已经初具雏形,但是与别的大佬比起来,还很差的慌。

首先我们要学会如何发表博客。

我们在myblog目录下,gitbash输入

1
hexo new "这是一个新博客"

然后就可以看到source/_posts/这是一个新博客.md

然后就可以在这个文件中写上自己的博客内容啦。这里我推荐用Typora比markDown要清爽不少。

写完自己的博客后输入命令

1
2
3
hexo generate
hexo s
就可以在4000端口看到自己的博客啦

Next主题有很多功能呢按钮,可以看到官方文档上 ,有分类,标签,归档等等。

那如何创建呢,使用命令

1
hexo new page categories

这样就会在source/下创建一个categories,后续运行的时候,就一个路径啦。

如何将文章归属分类呢

我们打开刚才创建的“这是一个新博客.md”,可以看到顶部

我们添加一句

1
2
3
4
title: 这是一个新博客
date: 2019-01-31 15:36:09
tags:
categories: "新博客"

这样在重新发布,hexo generate, hexo s;就可以在页面上看到自己的分类啦。

当然相信你已经看到了tags 是的tags对应的就是标签按钮,使用方法与分类categories一模一样哦。所以你也可以自定义按钮,如何自定义呢?

我们开始使用主题的配置文件啦。打开themes/hexo-theme-next/_config.yml

找到menu标签

1
2
3
4
5
6
7
8
9
10
11
menu:
home: / || home
# about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

//我们需要使用什么按钮,就把对应的注释去掉就可以了.如果要自定义就自己添加啦。

这里关于更多优化与使用大家可以参考大佬DimpleMe

搜索功能

我们首先安装一个插件

在自己的博客目录下,输入命令

1
cnpm install hexo-generator-searchdb --save

然后修改根目录下的_config.yml

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

然后再去修改主题目录下的_config.yml

1
2
3
4
5
6
7
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1

本地尝试一下

1
2
3
hexo clean
hexo g
hexo s

可以看到搜索按钮已经在导航上出现啦

尝试一下

成功啦,搜索就这样结束啦。

评论系统

评论系统我们就采用最快的方式,首先我们到leanCloud注册一个账号

然后进入控制台,创建一个自己的应用

创建一个class名称为Comment,无限制

再点击左侧设置,找到应用key

然后主题文件下的_config.yml修改标签valine

1
2
3
4
5
6
7
8
9
10
11
# more info please open https://valine.js.org
valine:
enable: true
appid: 你的appid
appkey: 你的appkey
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 快来评论啦 # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size

然后我们重新启动hexo

1
2
hexo generate
hexo s

你的评论系统出来啦。~~~

文章浏览次数

之所以评论系统使用leanCloud是因为,文章的浏览次数也是使用它的哦,配置更加简单。和评论一样,创建一个Class名为Counter。

然后在主题文件下的_config.yml修改leancloud_visitors标签

1
2
3
4
leancloud_visitors:
enable: true
app_id: 你的id
app_key: 你的key

重新运行,去感受你的浏览次数吧。

博客内容图片的显示

这里参考一下我的喵喵写的@一只小喵喵的博客

有一点提醒一下,我在这里吃了亏。

我们安装好插件后,每一次创建博客会生成同一个博客名的文件夹,用于存放图片。在md博客文件里,我是这样来用的

直接右键插入图像,选择图像地址。然后你可以预览到图片,但是如果你这样直接部署运行时根本看不到的,为什么呢,有心的朋友可以去网页查看源码,发现img的引用地址压根不对,所以导致无法显示图片。

这里要记住,预览到图片后要将图片除图片的其他路径都删除掉,例如:

替换为

虽然无法预览,但是部署是没有问题的。

Live2D萌宠

萌宠

可爱的小萌宠,肯定要的啦。

输入命令

1
npm install --save hexo-helper-live2d

然后安装自己想要的宠物

这是作者的提供的包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

我使用的是live2d-widget-model-koharu

直接运行

1
npm install live2d-widget-model-koharu

最后在根目录的_config,yml或者主题下的config.yml添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-koharu
display:
position: right
width: 150
height: 300
mobile:
show: true

具体参数设置也是在这里配置的。

这样就可以了。