Hexo-NexT 安装踩坑记录

发表于 更新于 分类于

博客部署

参考

环境

基础

  • git
  • nodejs && npm

开工作目录

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

工作目录是 blog，记住，这很重要，文件名默认为相对工作目录的名字。

本地预览

工作目录下：

1
hexo g && hexo s

localhost:4000 上看。

开 GitHub Pages 仓库

每个账号只能开一个，仓库名 username.github.io。

配源码分支

创仓库的时候把 main 弄下来，源码（不含 public）放这里，免得被覆盖。

自动部署

工作目录下安自动部署工具。

1
npm install hexo-deployer-git --save

_config.yml 末尾加上（记得照着用户名改动）：

1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master
  # message: Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

部署：

1
hexo clean && hexo g && hexo d

metadata

搜 _config.yml 相关配置项：

1
2
3
4
5
6
7
8
title: 幻影彭的彩虹
subtitle: '记录青春的扇区'
description: ''
keywords: '算法竞赛, 自动化测试, 工程技术, Python'
author: huan-yp
language: zh-CN # 必须改

url: http://huanyp.cn

主题

安主题（next）

工作目录下：

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

写上要用这个主题

_config.yml 里，找到 theme，写上 next

next

我用 next 主题。

配置菜单。

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

scheme

在 themes/next/_config.yml 调 scheme，传统的应该选 Gemini。

1
2
3
4
5
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

dark

应该没有人喜欢 light，所以调成 dark。

在 themes/next/_config.yml 调 darkmode。

1
darkmode: true

背景

一般要加个背景图片什么的

准备 source 图片

图片放到 themes/next/source/image/background.jpg 里。

改 style

找到 themes\next\source\css\_schemes\Gemini\index.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
26
27
28
29
30
31
32
33
34
35
36
37
body {
    background:url(/images/background-now.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
}


// 博客内容透明化
// 文章内容的透明度设置
.content-wrap {
  opacity: 0.7;
}


// 侧边框的透明度设置
.sidebar {
  opacity: 0.7;
}

// 菜单栏的透明度设置
.header-inner {
  background: rgba(255, 255, 255, 0.8);
}

// 搜索框（local-search）的透明度设置
.popup {
  opacity: 0.7;
}

//博客内容透明化

:root {
  --content-bg-color: rgba(255, 255, 255, 0.8);
}

那个 [0, 1] 的参数是透明度，自己估摸着调。

友情链接

1
2
menu:
  友情链接: /links/ || fa fa-link

写中文就行。

内联 html

新建 source/links/index.md，写入：

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
{% raw %}
<div class="post-body">
   <div id="links">
      <style>
         .links-content{
         margin-top:1rem;
         }
         .link-navigation::after {
         content: " ";
         display: block;
         clear: both;
         }
         .card {
         width: 45%;
         font-size: 1rem;
         padding: 10px 20px;
         border-radius: 4px;
         transition-duration: 0.15s;
         margin-bottom: 1rem;
         display:flex;
         }
         .card:nth-child(odd) {
         float: left;
         }
         .card:nth-child(even) {
         float: right;
         }
         .card:hover {
         transform: scale(1.1);
         box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
         }
         .card a {
         border:none;
         }
         .card .ava {
         width: 3rem!important;
         height: 3rem!important;
         margin:0!important;
         margin-right: 1em!important;
         border-radius:4px;
         }
         .card .card-header {
         font-style: italic;
         overflow: hidden;
         width: 100%;
         }
         .card .card-header a {
         font-style: normal;
         color: #2bbc8a;
         font-weight: bold;
         text-decoration: none;
         }
         .card .card-header a:hover {
         color: #d480aa;
         text-decoration: none;
         }
         .card .card-header .info {
         font-style:normal;
         color:#a3a3a3;
         font-size:14px;
         min-width: 0;
         overflow: hidden;
         white-space: nowrap;
         }
      </style>
      <div class="links-content">
         <div class="link-navigation">
            <div class="card">
               <img class="ava" src="博客图标" />
               <div class="card-header">
                  <div>
                     <a href="博客链接">博客名字</a>
                  </div>
                  <div class="info">博客简介</div>
               </div>
            </div>
            <div class="card">
               <img class="ava" src="博客图标" />
               <div class="card-header">
                  <div>
                     <a href="博客链接">博客名字</a>
                  </div>
                  <div class="info">博客简介</div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
{% endraw %}

要加的时候在这复制 html 就行。

杂项

置顶文章

工作目录下执行：

1
2
npm uninstall --save hexo-generator-index
npm install --save hexo-generator-index-pin-top

metadata 部分写：

1
2
3
4
---
title: Title
top: true
---

即可置顶。

折叠

在 metadata 中加上:

1
2
3
---
description: 文件摘要
---

即可折叠.

插件

搜索插件

工作目录下：

1
npm install hexo-generator-searchdb

主题配置 themes/next/_config.yml 下：

1
2
3
4
5
6
7
8
local_search:
  enable: true
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 2
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

数学插件

一般用 Mathjax。

先安装 Pandoc，这个要改系统路径，需要重启终端。

工作目录下执行：

1
2
npm uninstall hexo-renderer-marked
npm install hexo-renderer-pandoc

改 themes/next/_config.yml 的 math 配置：

1
2
3
4
5
math:
  mathjax:
    enable: true
    # Available values: none | ams | all
    tags: all

每篇文档的 metadata 部分要写启用 Mathjax：

1
2
3
4
---
title: Hello World
mathjax: true
---

参考资料：Next 官方有关文档。

常用命令

  • hexo g : 生成
  • hexo s : 本地部署
  • hexo d : 远端部署

网络相关

CNAME

hexo d 的时候因为是强制 push 的, github CNAME 文件时会被覆盖, 导致域名解析错误.

解决方式

将 CNAME 放入 ./source，即存在 ./source/CNAME 文件。

SEO

在 google search console 申请抓取的时候，一定要看清楚是不是 https 协议，如果部署在 github 上，可能会强制 https，导致抓取出现重定向错误。如果出现了这个错误，有可能是没用 https 协议。