Fork me on GitHub

搭建自己的Hexo博客（1）

发表于 | 分类于 | | 阅读次数:
字数统计: 2,144 | 阅读时长 ≈ 10

前言

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