Willie Ramey
0%

Hexo的搭建与配置

发表于 分类于
本文字数： 21k 阅读时长 ≈ 19 分钟
  • 介绍
  • 使用
  • 主题
  • 代理

Hexo简介

Hexo 是一个快速、简洁且高效的博客框架（Hexo是一款基于Node.js的静态博客框架）。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装node.js和Git
1
2
3
Windows下载：.msi安装包（安装时选择 Add to PATH 再点击next进行下一步）
Mac下载：.pkg安装包
Linux下载：yum -y install git nodejs

查看是否安装成功

1
2
3
4
5
6
7
# Windows：安装完Git后，在桌面右键选择 Git Bash Here 在终端中分别执行如下命令
# Mac：只安装nodejs，在Mac自带终端中输入如下命令
# Linux：安装完成后，输入如下命令
node -v
npm -v

# 如果输出了版本号，那么证明配置成功，如果没有版本号，请重新安装nodejs（检查是否勾选Add to Path），或者手动为nodejs添加环境变量

安装cnpm并查看是否安装成功

1
2
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -	v
安装hexo与初始化
1
cnpm install hexo-cli -g

完成之后，在你电脑上选择一个位置新建一个文件夹用来保存hexo文件并进入目录执行。例如我就是：D:\BigDataTools\hexo 

1
hexo init

到 Install dependencies 的时候你可能会卡住，这是大多数人基本都会遇到的,按Ctrl+C结束

然后执行下面这个命令，就可以使用国内的镜像为你完成博客的初始化工作

1
cnpm install
1
2
3
# 其他方法：如果上面不成功，再执行如下命令
git clone https://e.coding.net/huanhao/hexoblog.git
cnpm install
启动及命令
1
hexo s

打开浏览器，浏览 http://localhost:4000 会出现默认主题的博客；

至此，hexo博客就搭建部署完成了。但是我想你已经迫不及待地想要开始写一篇自己地文章提交上去了吧。我们需要掌握一些博客的命令：

  • 新建博客hexo new 'title'(hexo会直接在D:\BigDataTools\hexo\source_posts下生成.md文件)
  • 新建博客页hexo new page +name
  • 清理缓存hexo clean
  • 重新建立缓存 hexo g
  • 本地预览hexo s
  • 提交博客hexo g -d

当然，这些都是十分简单的但是却很需要的命令，除此之外，使用静态博客你还需要对Markdown写作语法熟练，这是基本要求，顺带了解一下GitHub网站，最好能掌握一些HTML，CSS和JavaScript，当然如果你注重内容输出本身的话，那么掌握Markdown语法基本够用

题外话：对于写作工具的话，我推荐使用Typora，轻量写作神器，所见即所得

主题配置

设置语言
1
博客页面默认是英文的，我们现在使用的是next主题（不同的主题之间可能有所不一样，前面我已经提到过了，若有差异则以你所使用的主题官方文档为准）我们需要进入根目录下的_config.yml，找到language,然后将其改为zh-CN。
更换主题

你可能觉得那个主题并不好看，所以现在我们去挑选一个自己喜欢的主题吧—hexo主题版本选择—各种主题选择，所有的主题都在这里了。在上面挑选一个自己喜欢的就好，不同的主题之间配置不尽相同，略有差异。下面我以next主题为例,主题的下载你可以直接克隆，也可以下载压缩包解压出来。进入根目录，直接克隆。

1
2
3
4
5
6
# 可以自行选择下载的版本 https://github.com/theme-next/hexo-theme-next/tags
git clone https://github.com/theme-next/hexo-theme-next.git themes/next

# 更新代码
cd themes/next
git pull

简单解释一下：前面的git clone就是克隆命令 中间一段是主题的地址 后面是将其命名为next

修改配置文件

1
在博客的根目录下找到__config.yml文件，vi进去找到theme那一行，将原来的主题替换为next。然后执行hexo s在本地预览效果。默认是白色的背景，如果想要使用黑色的背景就在themes-next-_config.yml中找到darkmode，将false改为true即可，但是这里有一点我必须说明一下，next主题下的Darkmode会根据设备来自行决定是light还是dark，意思就是如果你的手机是深色模式，电脑是浅色模式，那么你在手机上看到的博客样式就是深色的，而在电脑上看到的就会是浅色的。（注意,博客根目录下的配置文件和主题下面的配置文件都是一样的名字_config.yml，千万不要混淆

打开主题配置文件，我们尝试scheme改成双栏，也就是需要修改成 Gemini

1
scheme: Gemini

为了检验是否修改成功，我们需要预览一下主题，在博客根目录下执行 

1
hexo s
生成标签页、分类页、关于页

想要生成标签页，我们首先需要在博客的根目录（例如我将整个博客放在D:\BigDataTools\hexo下，那么hexo文件下就是我的博客根目录）在当下目录输入

1
2
3
hexo new page tags
hexo new page categories
hexo new page about

创建之后，会在hexo/source下生成相对应的文件夹和index文件，我们对其进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
#标签页
title: all tags
date: xxxx-xx-xx
type: tags

#分类页
title: all categories
date:  xxxx-xx-xx
type: categories

#关于页
title: 关于
date:

然后找到主题的配置文件（hexo/themes/主题名/_config.yml)中的menu，将tags,categories,about对应前面的注释去掉即可。我们可以顺便将主题配置文件中tags_icon设置为true,这样你的博客标签将会以图标的方式展现出来而不再是#。

使用 LocalSearch 搜索功能
1
npm install hexo-generator-searchdb --save

安装完成后，编辑博客根目录配置文件(？？？这一块测试没找到)

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 1000

编辑主题配置文件，找到文件中 Local search 的相关配置，设为 true

1
2
3
# Local search
local_search: 
  enable: true
头像设置
1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/xxx.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: true # 表示头像采用圆形框，默认为方形（false)。
  # If true, the avatar will be rotated with the cursor.
  rotated: true # 头像会随着鼠标的移动而旋转
添加社交方式

在主题配置文件中，找到 Social 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  CSDN: https://blog.csdn.net/weixin_42453166 || fab fa-cuttlefish
  GitHub: https://github.com/excepenxi || fab fa-github
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #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
  E-Mail: mailto:excepenxi@gmail.com || fa fa-envelope
  YouTube: https://youtube.com || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

将我们需要的打开，把后面的联系地址填上去就可以了。当然，也许这上面提供的联系方式不能满足你的要求，那么你可以自定义添加自己想要的联系方式。在这个图标网站上你不需要复制链接，也不需要下载图标，你只需要在这个网站上找到对应联系方式的图标，确认没有错误就可以。然后我们回到配置文件中，添加自定义的联系方式（需要注意书写的格式）。网站只是帮助你确认联系方式的图标。

博客显示摘要

如果你想实现和我一样的文章内容只显示摘要而不显示全文的话，你只需要在自己Markdown工具上合适位置输入 <!--more--> 就可以了（这几个字符之间是没有任何的空格的）。

博客文章置顶
1
2
npm uninstall hexo-generator-index --save(卸载原来的插件)
npm install hexo-generator-index-pin-top --save(安装置顶插件)
1
2
3
# 进入/theme/主题名/layout/_macro/post.swig，找到

# <div class = 'post-meta'>下面插入代码 (置顶文字颜色可自行修改)
1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color="RED">置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

之后，我们只需要在编写一篇新的博客的时候在元数据中加入top: true就可以了。

配置Darkmode(暗黑模式)

实现效果：别人进入我的博客网站就是默认darkmode（暗黑模式），并且有切换开关给访客自由切换。

安装 hexo-next-darkmode 插件

1
npm install hexo-next-darkmode --save

配置 Hexo 插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
  enable: true
  bottom: '64px' # default: '32px'
  right: 'unset' # default: '32px'
  left: '32px' # default: 'unset'
  time: '0.5s' # default: '0.3s'
  mixColor: 'transparent' # default: '#fff'
  backgroundColor: 'transparent'  # default: '#fff'
  buttonColorDark: '#100f2c'  # default: '#100f2c'
  buttonColorLight: '#fff' # default: '#fff'
  saveInCookies: true # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js

确保 Next 原生的 darkmode 选项设置为 false，在 Next 的 _config.yml 配置文件中更改

1
2
darkmode: false  
# darkmode: true  # 主题颜色，随系统变

设置访问时默认为暗黑模式

在./node_modules/hexo-next-darkmode 目录下找到 darkmode.njk 文件

1
2
3
4
5
//新增的内容,如果不是深色模式,则激活深色模式
if(!darkmode.isActivated())
{
  darkmode.toggle();
}

让红心跳动

如果想要站底的红心跳动起来，我们只需要在主题配置文件中找到footer的icon，将其中的animated变为true即可。

显示文章字数

打开链接，按照说明进行安装

1
2
# 安装
npm install hexo-symbols-count-time --save

安装可能遇到的报错

npm下载慢的朋友可以使用cnpm，我发现我当前版本的一些js文件版本过低，我需要更新版本。

看到有人在issues中提交了和我一样问题的截图，有人给出的解答是先更新npm和node.js，于是我决定先将npm和node.js更新一下。

1
2
3
4
5
6
7
8
9
# 首先查看当前版本
node -v
node -v 
# 然后更新版本
npm install -g npm
# 注意：接下来的操作仅适合Mac和Linux用户
npm cache clean -f # 清除缓存
npm install -g n # 安装n模块，Windows系统目前无法使用n模块，所以无法完成后面的操作
n stable # 升级node.js到最新稳定版本,r如果出现升级错误，在命令前面加上sudo

所以现在有一个问题，那么Windows用户该如何更新node.js呢。呃，这个嘛，可能需要重新安装一遍到原来的路径（我也表示很无奈)。当你完成两个地方的更新之后，你再去下载hexo-symbols-count-time这个插件

  • 配置插件

这个配置插件也是有知识点滴。首先我们需要在站点配置上（也就是博客根目录下的_config.yml文件）添加配置内容

1
2
3
4
5
6
7
8
9
# count_time (名字随意)
  symbols_count_time: xxx
 #文章内是否显示
  symbols: true # 文章字数
  time: true  # 阅读时长
 # 网页底部是否显示
  total_symbols: false # 所有文章总字数
  total_time: false  # 所有文章总时长
  exclude_codeblock: false # 代码框内不计入字数

然后我们还需要在主题配置文件下进行修改（就是指themes-next-_config.yml文件）

1
2
3
4
5
6
7
8
# 打开主题配置文件 ，搜索wordcount
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true  # 换行显示
  item_text_post: true  # 是否显示说明文字
  item_text_total: false  # 站底总字数统计 不显示说明文字
  awl: 2	
  wpm: 300
  • awl → Average Word Length，也就是平均每个字所占字符长度，默认值为 4
  • 中文一个字占 2 个字符 - 英文平均一个单词占 5 个字符 - 因此我们一般调成 2 即可
  • wpm → Words Per Minute，也就是平均每分钟能读多少字，默认值为 275
  • 为了详细确定自己的阅读速度，我找了一个阅读速度测试网站，测试结果如下：
    • 精读 ≈ 600
    • 正常速度≈ 1200
    • 快读 ≈ 1500

如果你发现你的字数统计和时间估计显示的是Na这样的样式，说明你的awl配置有问题，需要进行修改。特别注意，如果你的默认hello-world.md文件没有删除的话，可能就会影响你的站底字数统计。

1
2
3
4
5
6
7
# 之后修改 站点配置文件 _config.yml 
symbols_count_time:
  symbols: true # 文章字数 
  time: true # 阅读时长
  total_symbols: true # 所有文章总字数
  total_time: true # 所有文章总时长
  exclude_codeblock: false # 代码框内不计入字数
阅读次数统计
1
2
3
4
5
6
7
8
9
10
11
在 主题配置文件 中搜索 busuanzi ,把开关打开即可
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye
指定博客源文件的URL

但是对于博客的源文件地址没有指定正确的话，你是看不到任何的报错的，出现的效果就是上面这样。所以你在指定自己的博客源文件地址的时候一定要正确填写格式，要不然你可以选择不填写地址。

添加背景图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 首先，我们先去博客根目录下的source下新建一个_data文件夹以及一个styles.styl文件。接着将自己想要作为背景的图片放入themes/next/source/images里面，然后我们回到之前新建的styles.styl文件中，添加如下代码：

// 添加背景图片
body {
  background: url(/images/xxx.jpg);  //这里引入之前放在images中的图片名，也可以引入外链接
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

// 修改主体透明度
.main-inner {
  background: #fff;
  opacity: 0.9;
}

// 修改菜单栏透明度
.header-inner {
  opacity: 1.2;
}

# 透明度可以根据自己的喜好进行修改。之后，我们在主题的配置文件中找到custom_file_path，将下面style前面的#去掉即可。这样，博客的背景图片就添加完成了。
对代码和超链接进行凸显
1
# 在代码块的配置中，我们可以在主题配置文件中找到codeblock

1
2
3
4
5
6
7
8
# 对其中的highlight_theme,style可以自行选择想要的样式。
# 对于代码行，我们可以通过添加css文件来进行高亮显示，我们可以在上面的styles.styl文件中添加以下代码：
// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
1
2
3
4
5
6
7
8
9
10
11
# 颜色可以根据自己的喜好来进行设置。而对于超链接，我们可以在themes\next\source\css\_common\components\post\post.styl中添加如下代码：
.post-body p a {
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

配置高级优化

解决Hexo-NexT主题 中文目录不跳转
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
# 现象：文章中的中文目录点击不跳转
# 查看NexT主题版本，在主题配置文件下 package.json 中
"name": "hexo-theme-next",
"version": "7.8.0",
"description": "Elegant and powerful theme for Hexo.",
# 查看hexo版本 
[root@localhost hexo]# hexo -v
INFO  Validating config
hexo: 6.1.0
hexo-cli: 4.3.0
os: linux 3.10.0-957.21.3.el7.x86_64 CentOS Linux 7 (Core)
node: 16.15.0
v8: 9.4.146.24-node.20
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 93
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.4
openssl: 1.1.1n+quic
cldr: 40.0
icu: 70.1
tz: 2021a3
unicode: 14.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

按F12后打开控制台，点击中文目录，可以看到报错

1
2
# 定位到错误的文件的出错的代码处，为 主题配置文件\source\js\utils.js 的240行；
# 然后根据GitHub issue上提供的解决方案修改即可。

1
2
3
4
# 两行代码：
var target = document.getElementById(decodeURI(link.getAttribute('href')).replace('#', ''));

return target;
添加折叠代码

支持

1
2
3
4
5
6
7
8
- 支持 `markdown` 语法
- 支持 **粗体**、*斜体*
- 支持列表
- 支持md插入图片语法：![1](hexo-pictures/hexo-6_1.png)
- 支持html插入图片语法：<img src = "hexo-pictures/hexo-6_1.png">
- 支持行内代码 `markdown`
- 支持代码块
- 支持表格

安装插件 

1
npm install hexo-sliding-spoiler --save

优化

1
2
3
4
5
6
7
[root@localhost hexo]# vim node_modules/hexo-sliding-spoiler/assets/spoiler.css
.spoiler.collapsed .spoiler-title:before {
    content: "Show ";	======》 更改为    content: "点击展开 ";
}
.spoiler.expanded .spoiler-title:before {
    content: "Hide ";	======》 更改为    content: "点击隐藏 ";
}

使用方法

1
2
3
{% spoiler title %}
隐藏的内容
{% endspoiler %}
与主题样式一致的 404 页面
1
2
3
4
5
new page

cd <blog-path>  #定位到 Hexo 博客目录
hexo new page "404"
index.md
1
2
3
4
5
---
title: 404 Not Found
comments: false
permalink: /404
---
Next主题图片浏览放大功能fancybox
1
2
3
# 更改next/_config.uml文件
# 注意fancybox和next/_config.uml里面的名字保持一致
fancybox： true

Hexo next博客添加折叠块功能添加折叠代码块

支持PDF预览(未设置)

暂未设置，因PDF文件不是很多，需将xxx.md与pdf文件夹同名

1
2
3
4
5
npm install --save hexo-pdf
cd /local/server/hexo/themes/next/
git clone https://github.com/theme-next/theme-next-pdf source/lib/pdf
# 更新
cd source/lib/pdf/ && git pull

修改配置文件 vim /local/server/hexo/themes/next/_config.yml

1
2
3
4
pdf:
  enable: true
  # Default height
  height: 500px

用法：{% pdf /path/to/your/file.pdf %}

赞赏
1
2
3
4
5
6
7
reward_settings:
  enable: true
  animation: false
  comment: Buy me a coffee.
reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
启用 Pjax
1
2
3
4
5
6
7
8
9
10
# Pjax 主要用于加速 Web 页面的切换速度
# 同时也可以用来解决 Aplayer 音频播发器切换页面后播放出现中断的问题
# 进入Next主题的目录
cd themes/next

# 下载资源文件
git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

# 更改 Next 主题的配置文件 themes/next/_config.yml，设置以下内容
pjax: true
添加进度条（3项）

添加页面顶部加载进度条

1
2
3
4
5
6
7
8
9
10
# 进入Next主题的目录
cd themes/next

# 克隆代码
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

# 更改 Next 主题的配置文件 themes/next/_config.yml，设置以下内容
pace:
  enable: true
  theme: minimal

添加页面顶部阅读进度条

1
2
3
4
5
6
7
8
9
10
11
12
# 进入Next主题的目录
cd themes/next

# 克隆代码
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

# 更改 Next 主题的配置文件 themes/next/_config.yml，设置以下内容
reading_progress:
  enable: true
  position: top               # 进度条的位置：top | bottom
  color: "#37c6c0"            # 进度条的颜色
  height: 3px                 # 进度条的大小

显示侧栏阅读进度百分比

1
2
3
4
5
# 更改 Next 主题的配置文件 themes/next/_config.yml，设置以下内容
back2top:
  enable: true
  sidebar: false
  scrollpercent: true
设置文章持久化链接
1
2
3
4
5
6
7
8
9
10
npm install hexo-abbrlink --save

# 站点配置文件 hexo/_config.yml 修改 permalink 选项，添加下面内容
#注释 permalink: :year/:month/:day/:title/
permalink: post/:abbrlink/
abbrlink:
  alg: crc32 	# 算法：crc16(default) and crc32
  rep: hex 		# 进制：dec(default) and hex

# 需重启，才能加载
添加分享
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
cnpm install theme-next/hexo-next-share

# 主题配置
# NeedMoreShare2
# Dependencies: https://github.com/theme-next/theme-next-needmoreshare2
# iconStyle: default | box
# boxForm: horizontal | vertical
# position: top / middle / bottom + Left / Center / Right
# networks:
# Weibo,Wechat,Douban,QQZone,Twitter,Facebook,Linkedin,Mailto,Reddit,Delicious,StumbleUpon,Pinterest,
# GooglePlus,Tumblr,GoogleBookmarks,Newsvine,Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
needmoreshare:
  enable: true
  cdn:
    js: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.js
    css: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.css
  postbottom:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: topCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook,Linkedin,Mailto,Reddit,GooglePlus
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook,Linkedin,Mailto,Reddit,GooglePlus

# 需重启，才能加载

分享效果

加上人物
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
npm install -save hexo-helper-live2d

# hexo 的 _config.yml中添加参数
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-<你喜欢的模型名字>
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

# 需重启，才能加载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 可供选择模型：
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
1
2
3
4
5
6
7
8
# 站点目录下建文件夹live2d_models
# 在live2d_models下建文件夹<你喜欢的模型名字>
# 再在<你喜欢的模型名字>下建json文件：<你喜欢的模型名字>.model.json
[root@localhost hexo]# mkdir -p live2d_models/hibiki
[root@localhost hexo]# touch live2d_models/hibiki/hibiki.model.json

# 安装模型
npm install --save live2d-widget-model-<你喜欢的模型名字>

模型名称

Epsilon2.1

Gantzert_Felixander

haru

shizuku

tsumiki

wanko

z16

hibiki

koharu

haruto

tororo

hijiki

备案

注册域名并绑定网址后还需要进行服务器备案，我把服务器搭建在阿里云上，所以在阿里云上进行ICP备案

审核时间：

  1. ICP备案：2周左右
  2. 公安备案：预计当天就可以审批
ICP备案

阿里云APP备案流程

全国互联网安全管理服务平台备案

阿里云公安联网备案信息填写指南

  • 点击联网备案登录，注册个人帐号
  • 点击新办网站申请，提交相关信息

注册登录以及个人信息填写

审核通过

备案格式

备案后的操作

配置 vim /local/server/hexo/themes/next/layout/_partials/footer.swig

1
2
3
4
5
6
7
8
9
10
{%- if theme.footer.beian.enable %}
  <div class="beian">
    <span style="color:#939393;">
      {{ next_url('https://beian.miit.gov.cn', theme.footer.beian.icp) }}
    </span>
  </div>
  <div style="width:300px;margin:0 auto; padding:20px 0;">
    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802039402" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="/images/beian_icon.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010802039402号</p></a>
  </div>
{%- endif %}

配置 vim /local/server/hexo/themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
beian:
  enable: true
  #enable: false
  icp: 冀ICP备 2022xxxxxx号
  # The digit in the num of gongan beian.
  gongan_id: 11010802xxxxxx
  # The full num of gongan beian.
  gongan_num: 京公网安备 11010802xxxxxx号
  # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
  gongan_icon_url: /images/beian_icon.png

放入图片

在全国互联网安全管理平台上下载国徽图标，放置在../themes/next/source/images下，命名为beian_logo.png

本地项目之Nginx代理

现在我们的博客都是只能本地预览，如何将我们的上传到一个地方，然后通过域名访问呢？

  1. 需服务器，购买域名
  2. 上传第三方（GitHub、Coding）

使用pm2托管，新增文章无需重启

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[root@localhost ~]# npm  install -g pm2

[root@localhost hexo]# cat hexo_run.js
//run
const { exec } = require('child_process')
exec('hexo server',(error, stdout, stderr) => {
        if(error){
                console.log('exec error: ${error}')
                return
        }
        console.log('stdout: ${stdout}');
        console.log('stderr: ${stderr}');
})

[root@localhost hexo]# pm2 start hexo_run.js

Nginx 配置文件的配置
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
[root@localhost ~]# cat /local/server/nginx/conf/nginx.conf
#user  nobody;
worker_processes  10;
error_log
/local/server/nginx/logs/error.log;
pid /local/server/nginx/nginx.pid;
worker_rlimit_nofile 51200;

events {
   worker_connections 50000;
   use epoll;
}

http {
    keepalive_timeout 20;
    include       mime.types;
    default_type  application/octet-stream;

    server_names_hash_bucket_size 128;
    client_header_buffer_size 32k;
    large_client_header_buffers 4 32k;
    client_max_body_size     10m;
    client_body_buffer_size  128k;
    proxy_connect_timeout    60;
    proxy_read_timeout       60;
    proxy_send_timeout       60;
    proxy_buffer_size        8k;
    proxy_buffers            4 32k;
    proxy_busy_buffers_size 64k;
    proxy_temp_file_write_size 64k;

    fastcgi_connect_timeout 300s;
    fastcgi_send_timeout 300s;
    fastcgi_read_timeout 300s;

    fastcgi_buffer_size 128k;
    fastcgi_buffers 32 32k;

    ssi on;
    ssi_silent_errors on;
    ssi_types text/shtml;

    sendfile on;
    tcp_nopush     on;
    tcp_nodelay on;
    server_tokens off;
    underscores_in_headers on;

    log_format access1 '$remote_addr - $remote_user [$time_local] "$request" "$upstream_addr"  $request_time "$http_referer" $status "$body_bytes_sent" "$request_body" "$http_user_agent" "$http_x_forwarded_for"  $http_xxl_sso_sessionid' ; 

    # 方法一：通过代理hexo (任选其一)

    upstream myblog.xxxxxx.com {
        server 127.0.0.1:4000 weight=10;
    }

    server {
        listen 80;
        # listen 443;
        server_name  127.0.0.1;
        # server_name  blog.xxxxxx.com;

        # ssl on;
        # ssl_certificate   /local/server/nginx/conf/ssl/4432669_blog.xxxxxx.com.pem;
        # ssl_certificate_key  /local/server/nginx/conf/ssl/4432669_blog.xxxxxx.com.key;
        # ssl_session_timeout 5m;
        # ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        # ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        # ssl_prefer_server_ciphers on;

        # index index.php index.html index.htm ;
        # root  /local/webapp/ucenter/upload;

        #allow 192.168.0.0/24;
        #deny all;
        location / {
            proxy_pass  http://myblog.xxxxxx.com;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        access_log    /local/server/nginx/logs/blog_access.log access1 ;
    }
    # 方法二：通过生成的静态目录访问 (任选其一)
    # hexo clean
    # hexo g
    # hexo g -d
    # 访问静态目录 public
    # 记得放行809端口
    server {
        listen 809;
        server_name 127.0.0.1;
        # server_name  blog.xxxxxx.com;
        index index.html index.htm;
        root /local/server/hexo/public;
        access_log    /local/server/nginx/logs/809_access.log access1 ;
    }
}
1
2
3
# 检查并重载配置文件
/local/server/nginx/sbin/nginx -t
/local/server/nginx/sbin/nginx -s reload

访问IP或域名

配置PicGo图床

经过一段时间的使用，发现不合适，改为Typora存储本地图片并上传服务器

下载地址

推荐的插件

1
2
3
4
5
6
# 插件搜索
quick-capture 
	# 截图插件，PicGo设置中自定义快捷键，截图并上传
super-prefix  
	# 上传自定义路径及文件名插件
	# 配置插件（见下方图片）

1
2
3
# 我的快捷键
Ctrl + u	# 上传
Ctrl + Shift + u	# 截图并上传

图床为阿里云OSS

本地项目之上传GitHub

  • 国外网站，是英文
  • 访问速度较慢
  • 不需要实名认证
  • 域名形式可以自定义
  • 如果有自己的域名，可以绑定域名
GitHub简介

GitHub是通过Git进行版本控制的软件源代码托管服务平台，由GitHub公司（曾称Logical Awesome）的开发者Chris Wanstrath、P. J. Hyett和汤姆·普雷斯顿·沃纳使用Ruby on Rails编写而成。 GitHub同时提供付费账户和免费账户。

GitHub实操

  1. 注册GitHub账号：
    点我注册

  2. 新建一个仓库

  3. 仓库名必须是用户名 + .github.io,然后勾选初始化README

  4. 创建Git秘钥,会输出你的秘钥，我们复制输出信息就行了

1
2
ssh-keygen -t rsa -C "your_email@youremail.com"
cat ~/.ssh/id_rsa.pub

  1. 然后点击头像，点击Settings–SSH·····–New SSH Key

  2. 粘贴你复制的秘钥

  3. 连接,输入yes回车

1
2
ssh -T git@github.com
Are you sure you want to continue connecting (yes/no/[fingerprint])?  yes

  1. 打开项目，点击绿色按钮上的小箭头，点击 SSH ，复制git开头的地址

  2. 打开站点配置文件,修改deploy信息

1
2
3
4
deploy:
  type: git
  repo: 你复制的地址
  branch: master
  1. 在博客根目录下执行如下命令（yourname是你的名字，youremail是你的邮箱）
1
2
git config --global user.name "yourname"
git config --global user.email "youremail"
  1. 安装上传插件
1
cnpm install hexo-deployer-git --save
  1. 在博客根目录执行上传
1
hexo g -d
  1. 然后打开项目，点击Settings，往下滑左侧找到 pages ，点击none 选择master ，点击save保存，之后你会得到一个地址，这个就是你的网站地址了

本地项目之上传Coding

  • 国内的平台，网站是中文
  • 访问速度快
  • 部署网站需要实名认证，只需要填写身份证号即可
  • 域名是随机给的，所以很长而且不能自定义
  • 如果有自己的域名，可以绑定域名
CODING简介

CODING 是一个面向软件研发团队的研发协作管理平台，提供云原生开发环境、在线编码、代码托管、项目管理、测试管理、持续集成、制品库、持续部署、团队知识库等系列工具产品，帮助研发团队实践敏捷开发与 DevOps。

CODING 成立于 2014 年 2 月，于 2019 年被腾讯收购成为其全资子公司，作为腾讯云官方 DevOps 平台工具向广大开发者及企业研发团队提供服务，支持 SaaS 模式或私有部署模式。

CODING实操

  1. 注册CODING账号：点我注册

  2. 新建项目

  3. 选择项目模板：全功能DevOps项目模板

  4. 填写内容：项目标识等信息

  5. 创建Git秘钥,会输出你的秘钥，我们复制输出信息就行了

1
2
ssh-keygen -t rsa -C "your_email@youremail.com"
cat ~/.ssh/id_rsa.pub

  1. 点击CODING头像，打开个人账户设置，选择SSH公钥，新增公钥，粘贴复制的秘钥（下面记得勾选永久有效）

  2. 与CODING连接，输入yes

1
2
ssh -T git@git.coding.net
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes

  1. 创建代码仓库，勾选 生成README.cd文件

  2. 打开项目，点击 SSH，复制git开头的地址

  3. 打开站点配置文件,修改deploy信息

1
2
3
4
deploy:
  type: git
  repo: 你复制的地址
  branch: master
  1. 在博客根目录下执行如下命令（yourname是你的名字，youremail是你的邮箱）
1
2
git config --global user.name "yourname"
git config --global user.email "youremail"
  1. 安装上传插件
1
cnpm install hexo-deployer-git --save
  1. 在博客根目录执行上传
1
hexo g -d

  1. 然后打开项目，打开持续部署–网站托管–实名认证

  1. 新建网站，这里的仓库来源就是上面第4步填的项目标识

  1. 部署完成，访问地址；之后上传的时候，只需执行上传命令

最新消息：网站托管将停止维护



----------- 本文结束 -----------




Buy me a coffee.