关于本hexo博客的搭建

发表于 更新于

讲一下本博客是如何搭建的。主要是我自己看，以便在我重装系统后重新搭建博客。

本机操作系统：Ubuntu 22.04 LTS

安装环境

需要安装 nodejs 和 npm

官网提供了一个安装方式，在 这里

然后，例如，新建一个 ~/blog 目录并部署 hexo 博客：

1
2
3
4
5
6
(首先在其他目录里运行:)
sudo npm install hexo-cli -g
(然后:) 
mkdir ~/blog && cd ~/blog
hexo init && sudo npm install
(这主要是因为 hexo init 需要在空的目录里进行)

配置 _config.yml

我直接贴我的：我放在了网站里面的 这里

注意：那个 skip_render 可以跳过渲染，直接使用 html 文件，用于一些自定义的网页

配置 next 主题

安装：npm install hexo-theme-next，如果卡了，可以直接在 themes 目录下 git clone 官方库，这里

使用：在 _config.yml 里面设置 theme: next 即可，上面已经设置了

配置：next 的主题文件夹 themes/next 中也有一个 _config.yml ，在这里配置

我这基本都用了默认配置，除了一个 scheme: Gemini，以及

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

这个东西就是，启用了一些自定义配置的文件，接下来我们就可以对 variables.styl 和 styles.styl 进行一些修改，实现一些自定义配置的目的

（这两个文件初始是没有的，新建一下）

注：这个 source 是指博客根目录下的那个 source，就是咱们写文章的那个目录

外观配置

背景图片

在 source/_data/styles.styl 中加入：

1
2
3
4
5
6
7
body {
    background:url(这里写背景图url);
    background-repeat: no-repeat;
    background-attachment: fixed; //是否滚动，fixed固定
    background-size: cover;      //填充
    background-position: center;
}

设置透明

我博客的主体区域和侧边栏区域都是透明的，按如下方法设置，同样是 styles.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
// 设置主区域透明度
// 颜色代码最后两位就是透明度，十六进制 00~ff 对应完全透明~完全不透明
.main-inner > .sub-menu, .main-inner > .post-block, .main-inner > .tabs-comment, .main-inner > .comments, .main-inner > .pagination{
    background: #f5f5f5cc;
}


//侧边框的透明度设置
// 0~1 对应完全透明~完全不透明，下同
.sidebar {
  opacity: 0.85;
}
//搜索框透明
.popup {
  opacity: 0.5;
}

//菜单栏的调色
.header-inner {
  background: rgba(255,255,255,0.7);
}
.main-inner {
    background-color: rgba(255, 255, 255, 0);  //主体背景透明
    padding: 0px 40px 40px 40px;  //调整组件位置
}

边框圆角

在 variables.styl 中：

1
2
3
// 圆角设置
$border-radius-inner     = 30px 30px 30px 30px;
$border-radius           = 30px;

关于页面

即 /about 目录

进入根目录，输入 hexo new page about，然后就编写 source/about/index.md 就行

标签页面

就是 /tags 目录下的标签一览的功能。

它并不是自带的。我们进入根目录，输入 hexo new page tags 新建这个页面。然后会在 source/tags/ 下出现一个 index.md

在 index.md 的头上加上一个 type: tags 之后，它就会成为一个标签汇总页了（正文部分留空即可）

live2d

安装：npm install --save hexo-helper-live2d

配置：在根目录下的 _config.yml 中：

1
2
3
4
5
6
7
8
9
10
11
live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-hijiki  //使用的模型名称
  display:
    position: right
    width: 180
    height: 300
  mobile:
    show: true

有哪些模型，可以在 这里 看到

我用的小黑猫是 live2d-widget-model-hijiki

模型也是需要安装的，例如

npm install live2d-widget-model-hijiki

似乎还可以通过其它渠道来下载更多模型，把下载的模型放在根目录下 node_modules 目录里，就可以被识别使用了

评论功能、留言板

评论：采用 utterances 方案

首先安装 utterance 的 app ，安装到 github 中

在主题目录 themes/next/_config.yml 中，先设置 active: utterance，然后

1
2
3
4
5
6
7
8
9
utterances:
  enable: true
  repo: yoour_github_id/the_repo_name_to_store_comments
  # 这里我是 Flandre-Zhu/Flandre-Zhu.github.io
  # 其他的基本上不用改
  # Available values: pathname | url | title | og:title
  issue_term: pathname
  # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
  theme: github-light

接下来添加留言板： hexo new page guestbook

此时会在 source 目录下新建一个 guestbook 目录，并且有一个 index.md。去编辑这个 index.md 就可以编辑留言板中的内容。

在主题目录 themes/next/_config.yml 中，menu: 栏目下，添加一行： guestbook: /guestbook/ || fa fa-book

此时网页上显示的还是英文 “guestbook”，和中文的 “首页”，“关于” 等格格不入。配置一下中文。在 themes/next/languages/zh-CN.yml 中，menu: 栏目下，添加：guestbook: 留言板，就变成中文了

LaTeX 修复

直接这样装好以后 LaTeX 是会有问题的。

可以参考 2019年洛谷日报 进行修复，使用的是 mathjax

这篇文章真是个老文章了啊。我最开始入门hexo就是看的这篇。

不过不修也没关系，因为这个事情就算修也不太方便，还是跟 LaTeX 不兼容，我干脆直接用 norender 了，本地拿 typora 写好然后导出 html 放过来

上传到 github

如果要上传到 github 上，首先要安装 git， sudo apt install git 即可

然后还需要安装上传工具： npm install --save hexo-deployer-git

需要弄一下 ssh-key：ssh-keygen -t rsa -C "Github 注册的邮箱地址" （就像使用 git 时一样）

然后把 ~/.ssh/id_rsa.pub 的内容复制一下，打开 github设置 - SSH and GPG Keys，新建一个 SSH Key，把这个秘钥的内容粘贴进去

这样就相当于有上传 github 的权限认证了，接下来配置一下

1
2
git config --global user.email "你的邮箱"
git config --global user.name "你的用户名"

之后就可以使用 hexo d 把 hexo 博客上传到对应的 github 项目上了

上传到哪里这件事已经在博客根目录的 _config.yml 中写好了，不需要再做设置