Hexo 博客折腾记

发表于 更新于

这个博客的搭建过程

基于 GithubPages + Hexo + NexT theme

包括博客的搭建过程和 NexT 主题的配置与美化，特别的，包含支持暗色模式的可爱背景图片设置

安装环境&配置

安装 Git，建议使用 Git for Windows（即使已经安装了 MSYS2），因为 MSYS2 中的 git 似乎有奇怪的兼容问题，而且如果想在 Windows 的终端中使用 git，就必须将 msys 自身的环境（不是 MinGW）暴露在 Windows 下，会与许多 Windows 自带的命令冲突（如果你始终在 MSYS2 的 bash 中操作，当我没说 但是既然已经完全使用 bash 了，为什么不用 Linux 呢）

下载 Nodejs，可能需要魔法网络

有时 npm 官方源访问不畅，可能需要换源 npm config set registry https://repo.nju.edu.cn/repository/npm/

安装Hexo：
npm install -g hexo-cli

设置Github

  • git config --global user.name "GitHub 用户名"
  • git config --global user.email "GitHub 邮箱"
  • 生成 SSHKey ssh-keygen -t rsa -C "GitHub 邮箱"，并上传 Github（其实不使用 SSH 也可以，但是使用 SSH 会方便很多）
  • 创建 Github 仓库，使用 用户名.github.io 作为仓库名，会自动配置 GithubPages，不需要设置 GithubAction（部分教程似乎是错的）

安装 Hexo git 插件：npm install hexo-deployer-git --save

生成博客：hexo init

编辑 _config.yml:

1
2
3
4
5
6
7
8
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://用户名.github.io # 必须匹配，否则Github会提示Not Found

deploy:
  type: git
  repository: git@github.com:仓库名
  branch: main

至此，一个博客的框架就搭建完成了

在 _config.yml 中编辑一下个人信息，就可以愉快的 Blogging 了

1
2
3
4
5
6
7
8
# Site
title: 给博客起个可爱的标题吧 QwQ
subtitle: 副标题
description: 博客描述
keywords:
author: 给自己起一个可爱的名字吧 TwT
language: zh-CN # 语言
timezone: ''

可以参考这篇文章配置

Hexo的使用

  • hexo generate 生成发布的页面，类似C++的编译，简写 hexo g
  • hexo serve 预览（可以理解为一个本地的服务器），类似运行程序（必须先生成，否则更改不会生效），简写 hexo s
  • hexo deploy 部署，可以理解为上传至Github（不要忘记生成），简写 hexo d
  • hexo new "文章标题" 生成新文章，简写 hexo n
    • hexo n 默认生成 post，可以理解为普通的博客文章
    • hexo n page 生成页面（类似于这个页面），包括关于、友链页面
  • hexo clean 清除生成页面，当页面出现问题或有大变动（比如改变网站结构、改变主题时）

如何写文章

hexo n 新建文章之后，在 \source\_posts 中便会出现一个新的 Markdown 文件

其中开头部分是这样的

1
2
3
4
5
---
title: title
date: 4202-00-00 25:61:61
tags: 
---

顾名思义，title 和 date 项目就是标题和时间了（于洛谷博客不同，定义了 title 后，就不需要再文章开头放一个 H1 了）

tags 就是文章的标签了，用法如下

1
tags: [QwQ, AwA, TwT] # 定义了 QwQ, AwA, TwT 三个标签

此外，可以在文章中插入 <!--more--> 使文章在此处折叠（推荐）

也可以使用 description 选项，可以设置文章的描述（同时使文章折叠），但是不能换行

选择一个可爱的编辑器编辑这个 Markdown 文件就可以了

NexT主题

安装NexT主题

可以通过 npm 与 git clone 安装 NexT 主题，虽然官方推荐使用 npm 但是我还是选择了克隆储存库（自由度大一些）

git clone https://github.com/next-theme/hexo-theme-next.git themes/next

修改 _config.yml:

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

就可以体验 NexT 主题了

如果再生成或预览时出现问题，可能是缺少依赖，请自行 Google 或 Bing（我这里似乎出现了问题，但是再虚拟机中并没有复现）

NexT主题配置

将 /themes/next/_config.yml 复制到根目录，改名为 _config.next.yml 作为主题配置文件

其中有大量的选项（包含详细的英文注释），可以自己探索

我更改了一下几个地方

1
2
3
4
5
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
  • Schemes 可以理解为主题中的主题（买一送四），可以挨个尝试
1
2
3
4
5
6
7
8
9
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
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
  • Menu，顾名思义，菜单
1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif
  # If true, the avatar will be displayed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false
  • Avatar 头像，选择一个可爱的头像吧（不要忘记在 /source/images/ 中添加头像）
1
2
3
4
5
6
7
8
9
10
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
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype
  • 联系方式，不止支持这些联系方式，但是其他的可能需要自己找 Font Awesome 图标
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
math:
  # Default (false) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in front-matter.
  # If you set it to true, it will load mathjax / katex script EVERY PAGE.
  every_page: true

  mathjax:
    enable: true
    # Available values: none | ams | all
    tags: none

  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

  • 支持 $\LaTeX$，目前对 $KaTex$ 的支持还不足，首选 $MathJax$

  • darkmode: false 支持暗色模式（自动切换）

NexT主题美化

NexT 主题太单调了？让 NexT 变得可爱一些吧！

NexT 主题的好处之一是个性化程度很高，别的主题需要改源码的地方很多 NexT 都可以实现

添加背景

新建文件 /source/_data/styles.styl

在 _config.next.yml 中修改

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

编辑文件 /source/_data/styles.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
    background:url(/images/chtholly-background.png);  // 背景图片的位置
    background-repeat: no-repeat;
    background-attachment: fixed; // 是否滚动，fixed 固定
    background-size: cover;       // 填充
    background-position: center;  // 位置
}

//文章背板的颜色
.main-inner > .sub-menu, .main-inner > .post-block, .main-inner > .tabs-comment, .main-inner > .comments, .main-inner > .pagination{
    background: rgba(255, 255, 255, .7);  // 亮色模式
    if (hexo-config('darkmode')) {        // 暗色模式
        @media (prefers-color-scheme: dark) {
            background: rgba(0, 0, 0, 0.7);
        }
    }
    padding: 1em;  // Muse scheme 默认边距为 0，调整为 1em
}

.main-inner {
    background-color: rgba(255, 255, 255, 0);  // 主体背景透明
}

网上的教程数目繁多，但是似乎没有令我满意的（主要是暗色模式支持），于是我参考了各种教程和 CSS 文档，手搓了暗色模式的特判（目前网上似乎没有写暗色模式的教程，也可能是我没找到）

最终效果和这篇文章一样（暗色模式能自动切换）

考虑到我并没有学过 CSS 和 HTML，所以或许有更好的实现方式，请各位大佬见谅

P.S. /source/_data/styles.styl 支持大部分CSS语法，可以自行探索

文章评论区

现在还没有部署好，等捣鼓好了再更新