hexo 博客搭建

发表于 更新于 分类于 阅读次数： Disqus： 本文字数： 1.5k 阅读时长 ≈ 5 分钟

本文用于记录我搭建 hexo 博客的过程。

hexo: 5.4.0

hexo-theme-next: 7.8.0

建站

安装 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/username/reponame
  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: xICP备xxx号
  # The digit in the num of gongan beian.
  gongan_id: xxx
  # The full num of gongan beian.
  gongan_num:  x公网安备 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:[email protected] || 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。

UPDATE: 注意，开启这个功能时一定要关闭配置中的 pjax，不然刷新后才可以加载正常页面。

TODO

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