0%

hexo博客搭建

建站

安装NodeJS

安装Hexo

1
$ npm install -g hexo

建站

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

基本配置

打开folder/_config.yml 配置基本信息。

设置主题

将Hexo主题文件夹放置于/themes 下。我的博客使用的是next主题

部署至 GitHub

1
$ npm install hexo-deployer-git --save
1
2
3
4
deploy:
type: git
repo: https://github.com/JYuniform64/JYuniform64.github.io
branch: master

参考链接

使用

新增文章

1
$ hexo new [post] post_name

参考链接

常用命令

参考链接

常用主题配置

如无特殊说明,以下配置信息均在folder/themes/hexo-theme-next/_config.yml 中。

统计文章字数

1
2
3
4
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false

添加页面

1
$ hexo new page your_page

会在folder/source下新建your_page/index.md,可以在其头部type中设定预定义的样式。

1
2
3
4
5
6
7
menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
...

可根据情况去掉注释或新建项。如果是自己新建页的情况,可以选择增加博客显示语言的映射表项,位于folder/themes/hexo-theme-next/languages/zh-CN.yml中。如

1
2
3
4
5
6
7
8
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
...
Books: 读书 # 新增
Movies: 观影 # 新增

显示备案信息

1
2
3
4
5
6
7
8
9
beian:
enable: true
icp: 粤ICP备xxx号
# The digit in the num of gongan beian.
gongan_id: xxx
# The full num of gongan beian.
gongan_num: 粤公网安备 xxx号
# The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
gongan_icon_url: xxx

设置侧边栏头像及样式

1
2
3
4
5
6
7
avatar:
# Replace the default image and set the url here.
url: /images/avatar.jpg
# If true, the avatar will be dispalyed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: true

社交链接

将需要的链接去掉注释即可

1
2
3
4
5
social:
#GitHub: https://github.com/yourname || fab fa-github
#E-Mail: mailto:yourname@gmail.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
...

文章元信息显示

在文章title下方展示相关信息

1
2
3
4
5
6
7
post_meta:
item_text: true
created_at: true
updated_at:
enable: true
another_day: true
categories: true

代码块

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style: mac

数学公式

首先,卸载原有的渲染器 hexo-renderer-marked,并安装这两种渲染器的其中一个

1
2
$ npm uninstall hexo-renderer-marked
$ npm install hexo-renderer-pandoc # 或者 hexo-renderer-kramed

打开mathjax开关

1
2
3
4
mathjax:
enable: true
# See: https://mhchem.github.io/MathJax-mhchem/
mhchem: false

在需要用到公式的文章头部将mathjax打开

1
mathjax: true

参考链接

阅读进度条

1
2
3
4
5
6
reading_progress:
enable: true
# Available values: top | bottom
position: top
color: "#37c6c0"
height: 3px

文章版权信息

1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: false
post: true
language:

评论系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
valine:
enable: true
appid: xxx
appkey: xxx
notify: true # Mail notifier
verify: false # Verification code
placeholder: Just go go # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: false # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0

访客统计

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: fa fa-eye

主题优化

永久链接

默认的文章链接是按照:year/:month/:day/:title/的格式生成的,这样深层的路径不便于爬虫爬取及SEO,因此我们使用插件hexo-abbrlink 生成永久链接。

1
$ npm install hexo-abbrlink --save

folder/_config.yml中找到并修改:

1
permalink: posts/:abbrlink/

并在文件尾部加入配置信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# abbrlink config
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: hex #support dec(default) and hex
drafts: false #(true)Process draft,(false)Do not process draft. false(default)
# Generate categories from directory-tree
# depth: the max_depth of directory-tree you want to generate, should > 0
auto_category:
enable: true #true(default)
depth: #3(default)
over_write: false
auto_title: false #enable auto title, it can auto fill the title by path
auto_date: false #enable auto date, it can auto fill the date by time today
force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink.

添加背景图片

folder/themes/hexo-theme-next/_config.yml找到如下内容并去掉最后一行注释

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl

folder/source 中新建 _data/styles.styl,并写入如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
background: url("/images/background.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

.main-inner {
width: 75%;
}

.content, .vpanel {
border-radius: 10px;
margin-top: 60px;
padding: 25px;
background:rgba(255, 255, 255, 0.8) none repeat scroll !important;
}

其中背景图像的位置在folder/source/images/中。

13行.vpanel是对于评论区添加白色底衬的调整,如未开启评论区可删除.vpanel

添加“阅读全文”按钮

Next主题在主页中默认展示每篇文章的全文,如果存在长度较长的文章,则浏览体验较差。当然我们可以选择hexo的原生方法,即在文章中手动添加<!-- more -->的方式实现,但是对于我这样的懒人来说,这样的手动添加方式过于麻烦,且不便于文章md文件的可移植性。因此我们使用插件hexo-auto-excerpt完成。

1
$ npm install hexo-auto-excerpt --save

然后在folder/_config.yml尾部添加配置

1
2
3
auto_excerpt:
enable: true
length: 150

添加豆瓣读书&电影

1
$ npm install hexo-douban --save

然后根据前文“添加页面”操作添加相应页面

1
2
3
menu:
Books: /books/ || fa fa-film #This is your books page
Movies: /movies/ || fa fa-book #This is your movies page

然后在folder/_config.yml尾部添加配置

1
2
3
4
5
6
7
8
9
10
douban:
user: xxx
builtin: true
book:
title: 'This is my book title'
quote: 'This is my book quote'
movie:
title: 'This is my movie title'
quote: 'This is my movie quote'
timeout: 10000

参考链接

最后可以根据喜好修改页面样式。样式表位于folder/node_modules/hexo-douban/lib/templates/index.css

TODO

  • 自定义修改header、footer样式
  • 增加个人说明页面
  • 增加留言板
  • ......