Hexo+Volantis个人博客部署

Schenk
Instruction

更新于：2022年4月28日

字数：1.8k字

时长：9分钟
次浏览

配置部署Hexo

配置流程

  • 参考链接

    • 安装npm
    • 安装git
    • 其中配置npm源
    1
    2
    3
    4
    5
    6
    # 获取npm源
    npm get registry
    # 修改为淘宝源
    npm config set registry http://registry.npm.taobao.org/
    # 重置
    # npm config set registry https://registry.npmjs.org/

常用命令

1
2
3
4
5
# 上传至github
hexo g && hexo d

# 本地运行
hexo g && hexo s

Markdown公式显示问题

使用hexo-renderer-markdown-it插件

处理Markdown图片问题

在最开始的尝试中遇到以下问题：

  • 直接将图片保存到github，在hexo编译生成的html网页中通过相对路径访问速度太慢
  • 将博客部署到gitee上，由于服务器在国内，图片加载速度确实比github快很多，但是问题在于部署在gitee上的博客会有各种奇怪显示问题，所以也放弃

最终的解决办法：

  • 先在github新建一个仓库Source，专门用来存放博客文章用到的图片
  • 使用jsdelivr提供的cdn加速
    • 在本地编写好markdown后，将图片文件夹复制到Source目录下并push到github仓库
    • 在markdown文档中通过ctrl+f将所有图片的路径前缀改为https://cdn.jsdelivr.net/gh/<github用户名>/Source@latest/<文件夹名>

Volantis主题配置

主题安装

  1. 修改./_config.yml

    1
    theme: volantis

  2. 下载主题

    1
    npm i hexo-theme-volantis

  3. volantis主题会安装在./node_modules/hexo-theme-volantis中

主题个性化

搜索工具安装

1
npm i -S hexo-generator-search hexo-generator-json-content

字数统计工具安装

1
npm i hexo-wordcount

主题配置文件

顶部导航栏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
navbar:
  logo: # choose [img] or [icon + title]
    img: https://cdn.jsdelivr.net/gh/Schenk75/Source@latest/logos/taiga.svg
  menu:
    - name: 主页
      icon: fab fa-stack-overflow
      url: /
    - name: 分类
      icon: fas fa-folder-open
      url: categories/
    - name: 标签
      icon: fas fa-tags
      url: tags/
    - name: 归档
      icon: fas fa-archive
      url: archives/
    - name: 友链
      icon: fas fa-link
      url: friends/
    - name: 关于
      icon: fas fa-info-circle
      url: about/
  search: Search...   # Search bar placeholder
封面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
cover:
  layout_scheme: dock # blank (留白), search (搜索), dock (坞), featured (精选), focus (焦点)
  background: https://cdn.jsdelivr.net/gh/Schenk75/Source@master/common/interstellar.jpg
  logo: # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-Cover@3x.png
  title: 'Schenk - Blog'
  subtitle: 'SJTUer | Cuber'
  features:
    - name: 分类
      icon: fas fa-folder-open
      url: categories/
    - name: 标签
      icon: fas fa-tags
      url: tags/
    - name: 归档
      icon: fas fa-archive
      url: archives/
    - name: 友链
      icon: fas fa-link
      url: friends/
    - name: 关于
      icon: fas fa-info-circle
      url: about/
全局CSS
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
custom_css:
  navbar:
    height: 44px 
    width: auto # auto, max
    effect: [shadow, blur, floatable] # [shadow, floatable, blur]
  sidebar:
    effect: [shadow, floatable] # [shadow, floatable, blur]
  body:
    effect: [shadow, floatable] # [shadow, floatable, blur]
    highlight:
      language: true # show language of codeblock
      copy_btn: true
      grayscale: false # Enable grayscale effect
    text_align: # left, right, justify, center
      h1: center
      h2: left
      h3: left
      h4: left
      p: justify
  gap:
    h2: 30px # Spacing above H2 (only px unit)
    h3: 18px # Spacing above H3 (only px unit)
    h4: 8px # Spacing above H4 (only px unit)
    p: 1em # Paragraph spacing between paragraphs
    line_height: 1.6 # normal, 1.5, 1.75, 2 ...
  fontsize:
    root: 16px
    h1: 1.5rem # 不推荐用在文章中
    h2: 1.5rem
    h3: 1.25rem
    h4: 1.125rem
    h5: 1rem
    h6: 1rem
    list: .9375rem
    meta: .875rem
    code: .875rem
    footnote: .78125rem
  fontfamily:
    logofont:
      fontfamily: '"Microsoft Yahei","Hiragino Sans GB",Helvetica,"Helvetica Neue","微软雅黑",Tahoma,Arial,sans-serif'
      name: 'Microsoft Yahei'
      url: https://cdn.jsdelivr.net/gh/Schenk75/Source@master/fonts/Microsoft-YaHei.ttf
      weight: normal
      style: normal
    bodyfont:
      fontfamily: '"Microsoft Yahei","Hiragino Sans GB",Helvetica,"Helvetica Neue","微软雅黑",Tahoma,Arial,sans-serif'
      name: 'Microsoft Yahei'
      url: https://cdn.jsdelivr.net/gh/Schenk75/Source@master/fonts/Microsoft-YaHei.ttf
      weight: normal
      style: normal
    codefont:
      fontfamily: 'UbuntuMono'
      name: 'UbuntuMono'
      url: https://cdn.jsdelivr.net/gh/Schenk75/Source@master/fonts/UbuntuMono-Regular.ttf
      weight: normal
      style: normal
页脚
1
2
3
4
5
6
7
site_footer:
  # layout of footer: [aplayer, social, license, info, copyright]
  layout: [copyright]
  # site copyright
  copyright: '[Copyright © 2020 Schenk](https://github.com/Schenk75/Schenk75.github.io)'
  # You can add your own property here. (Support markdown, for example: br: '<br>')
  br: '<br>'
文章布局
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
article:
  # 文章列表页面的文章卡片布局方案
  preview:
    scheme: landscape # landscape
    # pin icon for post
    pin_icon: https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f4cc.svg
    # auto generate title if not exist
    auto_title: true # false, true
    # auto generate excerpt if not exist
    auto_excerpt: true # false, true
    # show split line or not
    line_style: solid # hidden, solid, dashed, dotted
    # show author
    author: false # true, false
    # show readmore button
    readmore: always # auto, always
  # 文章详情页面的文章卡片本体布局方案
  body:
    # 文章顶部信息
    # 从 meta_library 中取
    top_meta: [author, category, date, wordcount, counter]
    # ----------------
    # 文章页脚组件
    footer_widget:
      # ----------------
      # 参考资料、相关资料等 (for layout: post/docs)
      references:
        title: 参考资料
        icon: fas fa-quote-left
        # 在 front-matter 中:
        #   references:
        #     - title: 某篇文章
        #       url: https://
        # 即可显示此组件。
      # ----------------
      # 相关文章，需要安装插件 (for layout: post)
      # npm i hexo-related-popular-posts
      related_posts:
        enable: false
        title: 相关文章
        icon: fas fa-bookmark
        max_count: 5
        # 设为空则不使用文章头图
        placeholder_img: data:image/png;base64,666
      # ----------------
      # 打赏组件 (for layout: post)
      donate:
        enable: false
        height: 128px
        images: 
            - https://cdn.jsdelivr.net/gh/Schenk75/Source@master/common/donate.png
    # 文章底部信息
    # 从 meta_library 中取
    bottom_meta: [updated, tags]
    # meta library
    meta_library:
      # 默认文章作者（可在 front-matter 中覆盖）
      author:
        avatar: https://cdn.jsdelivr.net/gh/Schenk75/Source@master/common/avatar.jpg
        name: Schenk
        url: /
      # 文章创建日期
      date:
        icon: fas fa-calendar-alt
        title: '发布于：'
        format: 'll' # 日期格式 http://momentjs.com/docs/
      # 文章更新日期
      updated:
        icon: fas fa-edit
        title: '更新于：'
        format: 'll' # 日期格式 http://momentjs.com/docs/
      # 文章分类
      category:
        icon: fas fa-folder-open
      # 文章浏览计数
      counter:
        icon: fas fa-eye
        unit: '次浏览'
      # 文章字数和阅读时长
      wordcount:
        icon_wordcount: fas fa-keyboard
        icon_duration: fas fa-hourglass-half
      # 文章标签
      tags:
        icon: fas fa-hashtag
侧边栏
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
sidebar:
  # 主页、分类、归档等独立页面
  for_page: [blogger, category, tagcloud, webinfo]
  # layout: docs/post 这类文章页面
  for_post: [toc]
  # 侧边栏组件库
  widget_library:
    # ---------------------------------------
    # blogger info widget
    blogger:
      class: blogger
      display: [desktop, mobile] # [desktop, mobile]
      avatar: https://cdn.jsdelivr.net/gh/Schenk75/Source@master/common/avatar.jpg
      shape: circle # circle, rectangle
      url: /about/
      title: Schenk
      subtitle:
      jinrishici: false # Poetry Today. You can set a string, and it will be displayed when loading fails.
      social:
        - img: https://cdn.jsdelivr.net/gh/Schenk75/Source@latest/logos/github-icon.svg
          size: 30px
          url: https://github.com/Schenk75
        - img: https://cdn.jsdelivr.net/gh/Schenk75/Source@latest/logos/struts.svg
          url: /
        - img: https://cdn.jsdelivr.net/gh/Schenk75/Source@master/logos/WCAlogo.svg
          url: https://cubingchina.com/results/person/2018SHEN04
    # ---------------------------------------
    # toc widget (valid only in articles)
    toc:
      class: toc
      display: [desktop, mobile] # [desktop, mobile]
      header:
        icon: fas fa-list
        title: 本文目录
      list_number: false
      min_depth: 2
      max_depth: 5
    # ---------------------------------------
    # category widget
    category:
      class: category
      display: [desktop] # [desktop, mobile]
      header:
        icon: fas fa-folder-open
        title: 文章分类
        url: categories/
    # ---------------------------------------
    # tagcloud widget
    tagcloud:
      class: tagcloud
      display: [desktop, mobile] # [desktop, mobile]
      header:
        icon: fas fa-tags
        title: 热门标签
        url: tags/
      min_font: 14
      max_font: 24
      color: true
      start_color: '#999'
      end_color: '#555'

    # ---------------------------------------
    # qrcode widget
    donate:
      class: qrcode
      display: [desktop, mobile] # [desktop, mobile]
      height: 64px  # Automatic height if not set
      images:
          - https://cdn.jsdelivr.net/gh/Schenk75/Source@master/common/donate.png
    # ---------------------------------------
    # webinfo widget
    webinfo:
      class: webinfo
      display: [desktop]
      header:
        icon: fas fa-award
        title: 站点信息
      type:
        article:
          enable: true
          text: '文章数目：'
          unit: '篇'
        runtime:
          enable: true
          data: '2020/11/01'    # 填写建站日期
          text: '已运行时间：'
          unit: '天'
        wordcount:
          enable: true
          text: '本站总字数：'   # 需要启用 wordcount
          unit: '字'
        visitcounter:
          service: busuanzi  # busuanzi, leancloud
          siteuv:
            enable: true
            text: '本站访客数：'
            unit: '人'
          sitepv:
            enable: true
            text: '本站总访问量：'
            unit: '次'
        lastupd:
          enable: true
          friendlyShow: true    # 更友好的时间显示
          text: '最后活动时间：'
          unit: '日'
统计工具
1
2
analytics:
  busuanzi: https://cdn.jsdelivr.net/gh/Schenk75/Source@master/tools/busuanzi.pure.mini.js
关闭评论
1
2
3
4
comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: # valine, minivaline, disqus, gitalk, vssue, livere, isso, hashover
插件
1
2
3
4
5
6
7
8
9
10
11
plugins:
  ######## Plugins to optimize the experience:
  # Codeblock Copy Button
  clipboard:
    enable: true
    js: https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js

  ######## Plugins for SEO:
  # npm i hexo-wordcount
  wordcount:
    enable: true

页面布局模板

参考链接

front-matter设置

参考链接

发布于：2020年11月3日

git

hexo