Fork me on GitHub

搭建自己的Hexo博客(1)

前言

我的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

会看到命令行输出如下信息

upload successful

打开浏览器,输入地址便可以看到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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: SakuraTears的博客 //博客的标题
subtitle: 越努力越幸运 //博客简介
description: 越努力越幸运 //博客描述
keywords: 'Java,努力,随笔,学习,SakuraTears,博客,生活' //博客关键字
author: SakuraTears //博客作者
language: zh-Hans //博客语言
timezone: //时区
avatar: /uploads/avatar.jpg //头像
#google_analytics: your-analytics-id //谷歌统计,开启的话请输入自己的id
#baidu_analytics: your-analytics-id //百度统计,开启的话请输入自己的id

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.sakuratears.top //自己的网站地址
root: / //根目录
permalink: blog/:title:year:month:day/
permalink_defaults:

# Directory
source_dir: source //源码位置,请默认
public_dir: public //生成的文件位置,请默认
tag_dir: tags //标签文件位置,请默认
archive_dir: archives //归档文件位置,请默认
category_dir: categories //分类文件位置,请默认
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts //新文章默认名字
default_layout: post //默认样式
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: //高亮
enable: true //启用
line_number: true //linenumber启用
auto_detect: false
tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 3 //每页三篇文章
order_by: -date //按日期排序

# Category & Tag
default_category: uncategorized //按默认策略分类
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD //日期时间格式
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 //归档每页10篇文章
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
plugins: hexo-generate-feed

## Themes: https://hexo.io/themes/
theme: next //hexo主题


# hexo-admin authentification
admin:
username: sakuratears
password_hash: $2a$10$HhGu7w5fYH6e7wmb2tXta.FvJvGWlzosdUgImJxGhxU0K3YAkXIkm
secret: what's your name?

# Live2D //live2D插件,后面介绍
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
model:
scale: 1
hHeadPos: 0.5
vHeadPos: 0.618
display:
superSample: 2
width: 150
height: 300
position: right
hOffset: 0
vOffset: -20
mobile:
show: false
scale: 0.1
motion: true
react:
opacityDefault: 0.7
opacityOnHover: 0.2

##local_search //搜索插件
search:
path: search.xml
field: post
format: html
limit: 10000


# Deployment //部署
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:JavaZWT/JavaZWT.github.io.git

Next主题的_config.yml文件

在next包下,也有一个_config.yml文件,这个文件是配置next主题的,也简单介绍下。

1
2
3
4
5
6
7
8
9
10
menu:     //next主题菜单
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
commonweal: /404/ || heartbeat
support: /support/ || support
1
scheme: Pisces  //主题类型

我选的Pisces主题。

1
2
3
4
5
social:   //社交信息
GitHub: https://github.com/JavaZWT || github
Email: mailto:971258230@qq.com || envelope
QQ: http://wpa.qq.com/msgrd?v=3&uin=971258230&site=qq&menu=yes || qq
CSDN: https://blog.csdn.net/JavaZWT || copyright

上面都是一些基本配置,下面我们对blog进行更多的美化。

添加动态旋转头像

打开/themes/next/source/css/_common/components/sidebar/sidebar-author.styl文件

将代码替换为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
border-radius: 60%;
transition: 2.5s all;
}

.site-author-image:hover {
transform: rotate(360deg);
}


.site-author-name {
margin: $site-author-name-margin;
text-align: $site-author-name-align;
color: $site-author-name-color;
font-weight: $site-author-name-weight;
}

.site-description {
margin-top: $site-description-margin-top;
text-align: $site-description-align;
font-size: $site-description-font-size;
color: $site-description-color;
}

后重新发布,可以看到头像可以旋转啦。

添加本地搜索插件

安装hexo-generator-searchdb:

npm install hexo-generator-searchdb –save

同时在hexo的_config.yml里配置如下参数:

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

Next的_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

重新发布,可以看到新增了搜索功能。

更换背景图片

找到 /themes/next/source/css/_custom/custom.styl文件

加入如下代码:

1
2
3
4
5
6
7
8
9
body {
background:url("/images/background.jpg");
background-attachment: fixed; // 不随屏幕滚动而滚动
background-repeat: no-repeat; // 如果背景图不够屏幕大小则重复铺,改为no-repeat则表示不重复铺
background-size: 100%; // 等比例铺满屏幕
}
.main-inner {
opacity: 0.8;
}

重新发布,可以看到背景图片变化了。

添加live2D功能

安装live2D插件hexo-helper-live2d

npm install hexo-helper-live2d –save

Hexo的 _config.yml文件里配置如下参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
live2d:
model:
scale: 1
hHeadPos: 0.5
vHeadPos: 0.618
display:
superSample: 2
width: 150
height: 300
position: right
hOffset: 0
vOffset: -20
mobile:
show: false
scale: 0.1
motion: true
react:
opacityDefault: 0.7
opacityOnHover: 0.2

重新发布,便看到萌萌的二次元人物出现啦。

添加评论插件

这里用的Valine评论插件,Valine插件需要leancloud支持,请先注册leancloud,注册成功拿到id和key。

1
2
3
4
5
6
7
8
9
10
valine:
enable: true
appid: //你的id
appkey: //你的key
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

配置成功后,重新发布便能看到文章可以评论啦。

开启访客统计

当我们注册好leancloud后。

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

找到代码,填入自己的id和key。

重新发布,在页面上可以看到博客的访客数量。

开启字数统计

安装字数统计插件:hexo-wordcount

npm install hexo-wordcount –save

Next配置文件如下参数开启:

1
2
3
4
5
6
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: true
separated_meta: true

重新发布便拥有了字数统计功能。

文章还没写完,后面会继续更新。

欢迎大家关注我的博客

https://www.sakuratears.top/




-------------文章结束啦 ~\(≧▽≦)/~ 感谢您的阅读-------------

SakuraTears wechat
扫一扫关注我的公众号
您的支持就是我创作的动力!
0%