建站经历

发表于2021-12-26更新于2023-07-13字数统计1.4k阅读次数

本文将讲述我通过hexo以及github page建立本博客的过程

一、本地环境

  • Ubuntu 20.04(wsl2)
  • hexo: 5.4.0
  • nodejs: v13.14.0(使用过高版本会出现警告)
  • npm: 6.14.4
  • 切换node版本:
    1
    2
    sudo n rm 16.13.1   # 删除指定版本node
    sudo n 13.14.0      # 安装指定版本node

二、初始化博客

  • 建立博客文件夹
    1
    hexo init blog
  • 输入以下指令之后可以在:localhost:4000/看到初始化的博客
    1
    2
    cd blog
    hexo s

三、选择合适的主题

     从https://hexo.io/themes/中选择合适的主题，本博客使用主题: stun

  • 克隆主题项目到本地仓库
    1
    git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun
  • 安装pug引擎依赖
    1
    npm install --save hexo-renderer-pug
  • 将博客文件目录下的_config.yml中的theme内容改为 stun
    1
    theme: stun

四、基本内容的设置

1. 基本操作

1
2
3
4
5
6
hexo new page filename  # 新建一个页面
hexo new page tags      # 新建一个指定layout的页面，以标签tags为例
hexo new articlename    # 新建一篇文章
hexo clean              # 清除缓存文件
hexo s                  # 本地渲染网站
hexo d                  # 生成博客文件(后文具体详解)

2. 修改博客基本信息

  • 修改博客文件目录下的_config.yml文件中的title,subtitle,author,language等
  • 修改博客文件目录下的_config.yml文件中的url为博客部署的地址(具体部署方法在后文)

3. 修改主题信息

    stun主题配置官方文件

(1) 修改menu内容

    修改主题文件目录下的_config.yml文件 ||左边为文件路径，右边为图标，具体不同图标选择见Font Awesome

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  home: / || fas fa-home
  about: /about || fas fa-user
  calculate: javascript:; || fas fa-database
  message: /message/ || fas fa-comment
  history: /history/ || fa fa-history
  friends: /friend/ || fa fa-link

submenu:
  calculate:
    archives: /archives/ || fas fa-folder-open
    categories: /categories/ || fas fa-layer-group
    tags: /tags/ || fas fa-tags

    自己添加的页面需要在主题文件夹下/languages/zh-CN.yml加入中文

1
message: 留言
(2) 修改网站favicon

    生成头像见网站 Favicon 或者 websiteplanet(更多的支持)

1
2
3
favicon:
  small: /images/icons/favicon-16x16.png
  medium: /images/icons/favicon-32x32.png
(3) 修改header内容

    这里选择主页启用头部图，文章页面不显示头部图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
header:
  enable: true
  show_on:
    post: false
  height: 50%
  bg_image:
    enable: true
    url: /images/icons/banner/saibo.jpg
  mask:
    enable: false
    opacity: 0.5
  nav:
    height: 50px
    bg_color: "#333"
  scroll_down_icon:
    enable: true
    name: fas fa-angle-down
    animation: true
(4) 修改侧边栏内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
sidebar:
  enable: true
  position: right
  offsetTop: 20px
  horizon_line: false
author:
  enable: true
  avatar:
    url: /images/icons/zoe.svg # 头像
    rounded: true # 圆形
    opacity: 1 # 透明度
    animation: shake # (动画)
  motto: "每一天，每个季节都会过去， 然后就是新的开始"
social:
  github: https://github.com/voyage-li/ || fab fa-github
  twitter: https://twitter.com/_voy4ge_ || fab fa-twitter
  email: mailto:lyh_0921@mail.ustc.edu.cn || fa fa-envelope
  qq: tencent://message?uin=923959605 || fab fa-qq
(5) 修改网页底部内容
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
footer:
  bg_image:
    enable: false
    url:
  mask:
    enable: false
    opacity: 0.5
  copyright:
    enable: true
    text:
    since: 2021
    end: 2022
  icon:
    enable: false
    name: fas fa-heart
    animation: false
    color: "#ff0000"
  powered:
    enable: false
    version: true
  theme:
    enable: false
  beian:
    enable: false
    icp:
  custom:
    enable: false
    text:

4. 更多设置

(1) 启用Valine评论
1
2
3
4
5
6
7
8
9
10
11
12
13
valine:
    enable: true
    appid: # Your leancloud application appid.
    appkey: # Your leancloud application appkey.
    notify: true
    verify: true
    placeholder: 留下一句评论再走吧（请使用markdown语法）
    avatar: monsterid
    meta: nick,mail
    pageSize: 10
    visitor: true
    language: zh-cn
    enableQQ: true
(2) 启用katex渲染latex代码
1
2
3
4
math:
  enable: true
  per_page: false
  engine: katex
1
2
3
4
5
6
7
8
9
10
11
# 如果安装以下插件，请全部卸载
npm un hexo-renderer-marked      --save
npm un hexo-renderer-kramed      --save
npm un hexo-renderer-pandoc      --save
npm un hexo-renderer-unified     --save
npm un hexo-renderer-markdown    --save
npm un hexo-renderer-markdown-it --save
npm un hexo-math                 --save
npm un hexo-inject               --save
# 安装新的渲染器
npm i hexo-renderer-markdown-it-plus --save
(3) 启用Quicklink提前加载
1
2
3
4
5
6
7
8
9
10
11
12
13
quicklink:
  enable: true
  home: true
  archive: true
  delay: true
  timeout: 10000
  priority: true
  ignores:
    - /\/api\/?/
    - uri => uri.includes('.xml')
    - uri => uri.includes('.zip')
    - (uri, el) => el.hasAttribute('nofollow')
    - (uri, el) => el.hasAttribute('noprefetch')
(4) 启用pjax平滑跳转
1
2
3
4
5
6
7
8
9
10
11
12
13
pjax:
  enable: true
  elements:
  selectors: 
  switches:
  switchesOptions:
  history: true
  scrollTo: 0
  scrollRestoration: true
  cacheBust: false
  debug: false
  currentUrlFullReload: true
  timeout: 0
(5) 启用本地搜索

    安装插件

1
npm install hexo-generator-search --save

    在博客文件目录下的.config.yml加入

1
2
3
4
search:
  path: search.json
  field: post
  content: true

    修改主题文件目录下的.config.yml

1
2
local_search:
  enable: true
(6) 启用fancybox
1
fancybox: true
(7) 代码块
1
2
3
4
codeblock:
  style: carbon
  highlight: light
  word_wrap: false

五、自主修改

1. 启用live2d看板娘

  • 下载依赖:https://github.com/EYHN/hexo-helper-live2d

    1
    npm install --save hexo-helper-live2d

  • 选择下载自己喜欢的model:https://github.com/xiazeyu/live2d-widget-models

    1
    npm install live2d-widget-model-hijiki

  • 在博客文件目录下的.config.yml加入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    live2d:
      enable: true
      pluginModelPath: assets/
      model:
        use: live2d-widget-model-hijiki  #模板目录，直接更换名字即可
      display:
        position: left
        width: 170 
        height: 250
      mobile:
    show: false

2. 添加告示栏

    将原来的sidebar的div内部再加上一个div

  • sidebar.pug加入(渲染不了pug，有时间改)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    - var notice_content=theme.sidebar.notice.content 
    - var iconClass=theme.sidebar.notice.icon
    if page.notice !== false && theme.sidebar.notice.enable
      div.notice
        span.notice_banner
            i(class=iconClass)
        span.notice_banner=" NOTICE"
        br
        notice_text.notice_text=notice_content
  • 主题文件目录下的.config.yml的sidebar内加入
    1
    2
    3
    4
    notice:
      icon: fa fa-bell
      enable: true
      content: "反复刷新界面可能导致部分js失

3. 深色模式不同banner图

  • 主题文件加入图片地址
  • styl文件直接加入样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .nightmode .header-banner
    {
        position: relative;
        z-index: 0;
        width: 100%;
        height: 100%;
        if (hexo-config('header.bg_image.enable') && hexo-config('header.bg_image.url')) {
          background: url(hexo-config('header.bg_image.night_url')) no-repeat center / cover;
        }
    }

六、部署

  • 安装依赖
    1
    npm install hexo-deployer-git --save
  • 博客文件目录下.config.yml加入
    1
    2
    3
    4
    deploy:
      type: git
      repository: git@github.com:voyage-li/voyage-li.github.io.git
      branch: main
  • 部署
    1
    hexo clean && hexo g && hexo d

七、后记