CSTOS

人生苦短 Python水深

0%

nodejs-npm-hexo-next-gitee-blog 搭建

发表于 更新于 分类于 Valine：
本文字数： 3.1k 阅读时长 ≈ 11 分钟

nodejs + npm + hexo + next 的 blog 搭建笔记。主要包括：前言、安装、npm 使用、更新所有、清理、查看当前版本、配置、插件配置、搜索功能、字数统计、图片使用、网易云音乐、SEO、阅读时间、遇到的问题。

前言

​ 需要一个 markdown 格式输出的文档笔记类的 blog，本来看中了 penlican，不知怎么被拐到了 hexo，就那么顺手一装，顺手精致的 next，顺手配置了一番，顺手搭上了 github 的船，顺手地好用…

hexo-官方网站
不需要代码，就了解几个命令，就能拥用一个方便实用的 blog

1
2
3
4
5
6
7
8
9
10
sudo apt install nodejs npm

# 按需，到2026年，使用npm配置源即可
sudo npm install -g cnpm --registry=https://registry.npmmirror.com
# 运行npm install 时，卡在sill idealTree buildDeps没有反应：直接用cnpm
# 引起问题的原因是MacOS设置中“配置IPV6”为自动，将其改为仅本地链接即可
# 切换淘宝源（不一定需要）
# cnpm config set registry https://registry.npm.taobao.org
# cnpm config get registry
# npm set strict-ssl false

nodejs-npm

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
# 嫌npm慢可上淘宝 npm 镜像
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

npm uninstall p
# 更新所有
cnpm update

# 清理
npm uninstall hexo -g
npm prune
npm cache clean -f


# 下同，npm 可用 cnpm 代替
npm list -g --depth 0
npm config ls


cnpm install -g cnpm	# 升级 npm
cnpm cache clean -f	# 清除 npm 缓存

cd ~/blog
sudo cnpm install -g npm-check
sudo cnpm install -g npm-upgrade
npm-check
npm-upgrade

hexo 基本操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 常用简写
cd blog
cnpm install
hexo n	# new
hexo g	# generate，生成静态网页至 public 目录
hexo s	# servre，启动本地服务器，blog 预览。
hexo d	# deply，blog 目录部署到 github 或 gitee 等远程

hexo n "helloworld"     # new page:写文章
hexo new "postName" #新建封面
hexo new page "pageName"  #新建页面

hexo clean #清空缓存

# 查看当前版本
hexo -v

命令速通

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
sudo apt install git nginx
# 浏览器网址输入IP，出现 Welcome to nginx 说明nginx安装成功

sudo apt install nodejs npm

# 设置为阿里云镜像源（推荐）
npm config set registry https://registry.npmmirror.com

# 如果想设置为腾讯云源，运行下面这行：
# npm config set registry https://mirrors.cloud.tencent.com/npm/


# 切回官方源
# npm config set registry https://registry.npmjs.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

sudo apt autoremove
sudo npm install -g hexo-cli
sudo npm install -g hexo-cli hexo-server
sudo npm install hexo-deployer-git --save

npm install nunjucks --save
npm install hexo-deployer-git --save
npm install hexo-tag-aplayer --save
npm install hexo-related-popular-posts --save
npm install hexo-word-counter --save
npm install hexo-generator-search --save
npm install hexo-word-counter --save
npm install hexo-related-popular-posts --save
npm install hexo-asset-image --save
npm install hexo-word-counter --save
npm install hexo-util --save

npm install hexo-generator-sitemap --save

npm install hexo-clean-css --save  # 自动压缩CSS文件，减少文件体积

安装

nodejs 环境

按照官方的操作一步步来即可

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
sudo pacman -S nodejs
sudo pacman -S npm

# 20211128,now is Kubuntu
sudo apt install nodejs # v10.19.0
sudo apt install npm 	# 6.14.4
# 报错？升级
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash  -
sudo apt-get install -y nodejs	# v12.22.7
# 20211202:npm有更新
sudo npm install -g npm	# 8.1.4


node -v
# 20201024:v14.12.0
# 20210501 v16.0.0
# 20210530 v16.1.0
# 20210921 v16.9.1
# 2026-05-16 v22.22.1

npm -v
# 20201024:6.14.7
# 20210501 7.11.1
# 20210530 7.12.1
# 20210921 7.23.0
# 2026-05-16 9.2.0

# hexo-cli 为 hexo 的命令行版，简洁性原则，装hexo-cli
sudo npm install hexo-cli -g  #带 g 为全局安装，不带为本地安装

全新安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
mkdir blog
cd blog
hexo init	# hexo 初始化该目录
#INFO Start blogging with Hexo!

npm install hexo-cli -g
npm install

# npm install hexo-theme-next # 不喜欢这个，还是中意git clone
git clone https://github.com/theme-next/hexo-theme-next themes/next
cd themes/next
rm -rf .git
cd ~/blog
# 全新版本
git init

配置

主题 next

虽然 next 主题已经被用得多了，但确实简洁实用、好配置。

插件配置

  • tidio 的 Chat 不够实用，且一定程度减慢了加载速度，OUT
  • 考虑速度，未安装 mathjax ，即不能使用 latex 的复杂公式。

hexo-deployer-git

1
2
npm install hexo-deployer-git --save
hexo clean && hexo g -d

搜索功能

  • 部署到 gitee 上，更新时需强制使用 HTTPS，否则无法进行搜索
1
2
3
4
5
6
# 本地搜索
npm install hexo-generator-search --save

# vi themes/next/_config.yml
local_search:
  enable: true

字数统计

1
npm install  hexo-word-counter --save

文章推荐

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install hexo-related-popular-posts --save
# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
  enable: true # 启用
  title: 相关文章 # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    PPMixingRate: 0.25
    isDate: false
    isImage: false
    isExcerpt: false

图片使用

1
2
3
4
npm install hexo-asset-image --save

# _config.yml
post_asset_folder:true

阅读时间

1
npm install hexo-word-counter --save

彩带

1
2
3
4
5
6
7
8
9
10
cd themes/next

git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

# vi _config.yml
canvas_ribbon:
  enable: true
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

顶部加载进度条

1
2
3
cd themes/next

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

超链接样式

打开 CSS 文件 themes/next/source/css/_common/components/post/post.styl，在末尾添加以下 CSS 样式，颜色可自定义，在这里超链接选中状态为橙色，链接样式为蓝色

1
2
3
4
5
6
7
8
9
10
11

.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;
  }
}

在文章结尾添加本文结束标志

在 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并复制下列代码：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>欢迎交流-------------</div>
    {% endif %}
</div>

打开 \themes\next\layout\_macro\post.swig，在 post-body 之后，post-footer 之前添加下列代码

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

网站运行时间

打开 .\themes\next\layout\_partials\footer.swig 并添加下列代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("03/31/2019 00:00:00");
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>
</div>

URL 固定链接

1
2
3
4
5
6
7
8
9
10
11
npm install hexo-abbrlink --save

#_config.yml

# permalink: :year/:month/:day/:title/
# permalink_defaults:
permalink: posts/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

小爱心

1
2
3
4
5
6
7
8
9
/themes/next/source/js/love.js

# vi \themes\next\layout\_layout.swig

  {%- endif %}
  <!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/love.js"></script>
</body>
</html>

SEO

  • 生成站点地图，方便搜索引擎收录
1
2
3
4
5
6
7
8
9
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

# _config.yaml
sitemap:
    path: sitemap.xml
# 百度站点地图
baidusitemap:
  path: baidusitemap.xml

其他

hexo-all-minifier：全站资源压缩，一键压缩 HTML、CSS、JS 和图片，为网站提速
hexo-blog-encrypt：为特定文章设置密码，保护隐私内容
giscus：基于 GitHub Discussions 的评论系统，界面简洁，数据安全可控，是当下非常流行的选择

暂不使用

网易云音乐

将网易云音乐网页版生成的 外链播放器 iframe 放至 /theme/next/layout/_macro/sidebar.swig 文件，如

1
2
3
4
5
6
7
8
9
      {%- endif %}
      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=34923851&auto=0&height=66"></iframe>

    </div>

  </aside>
  <div id="sidebar-dimmer"></div>
{% endmacro %}

启用 Pjax

  • Pjax 主要用于加速 Web 页面的切换速度，同时也可以用来解决 Aplayer 音频播发器切换页面后播放出现中断的问题
1
2
3
4
5
6

# 进入Next主题的目录
cd themes/next

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

更改 Next 主题的配置文件 themes/next/_config.yml，设置以下内容

1
pjax: true

Aplayer

参考链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
npm install --save hexo-tag-aplayer

# vi themes/next/languages/zh-CN.yml
menu:
  playlist: 歌单

# hexo new page playlist
# vi ./source/playlist/index.md

---
title: playlist
date: 2020-10-24 21:34:47
type: "playlist"
updated: 2022-04-04 14:33:21
---

{% meting "524363026" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

看板娘

1
2
npm install --save hexo-helper-live2d
npm install --save live2d-widget-model-miku
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url

Front-matter 模板化

避免每次手动写入重复的 Front-matter 字段。在 scaffolds/post.md 中定义模板：

1
2
3
4
5
6
7
8
9
10
---
title: {{ title }}
date: {{ date }}
tags:
categories:
cover: /images/cover/{{ title }}.jpg # 示例，可根据习惯修改
description: {{ title }} # 写文章前先临时写一下，写完文章后再修改为真实摘要
toc: true # 根据个人喜好设定默认值
comments: true # 根据个人喜好设定默认值
---

hexo new 命令生成的新文章就会包含这些预设字段。

云服务器

说明

  • 逻辑：
    • hexo d：基于 git 将本地生成的 public 内容更新到服务器指定的仓库
    • hooks/post-receive：服务器指定的仓库基于 hooks 将内容 checkout 到指定的路径 /var/www/blog
    • nginx：监听指定路径到指定端口
    • 安全组：云服务器上需要配置上实例 的安全组规则，确保对应端口可通过

操作

调整鼠标样式

1
2
3
4
5
6
7
8
9
10
11
# blog/themes/next/source/css/_common/components/post/post.styl
# 在最后添加

// 鼠标样式
  * {
      cursor: url("/images/cursor_1.png"),auto
  }
  :active {
      cursor: url("/images/cursor_2.png"),auto
  }

nginx 配置

1
2
sudo apt install nginx
# 浏览器网址输入IP，出现 Welcome to nginx 说明成功
1
2
3
4
5
6
7
8
```
```shell
# 重启 nginx
sudo service nginx restart

nginx -s stop # 快速停止和关闭Nginx
nginx -s quit # 正常停止或关闭Nginx
nginx -s reload # 配置文件修改重新加载
1
2
3
4
5
6
7
8
9
10
11
12
13
cd ~/git_repo
git init --bare blog.git
# 创建一个post-receive
vi ~/git_repo/blog.git/hooks/post-receive


# 输入：
git --work-tree=/var/www/blog --git-dir=/home/cs/git_repo/blog.git checkout -f

chmod +x ~/git_repo/blog.git/hooks/post-receive

# 创建目标文件夹
sudo mkdir /var/www/blog

nginx 配置

1
sudo vi /etc/nginx/conf.d/hexo.conf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
server {
    listen       8080;
    server_name  域名; # 将这里替换为你的域名，如果没有域名可以使用服务器IP

    root /var/www/blog;
    index index.html index.htm;

    # 启用 gzip 压缩可加速访问（可选）
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;

    location / {
        # 尝试按顺序查找文件或目录，若不存在则返回 404
        try_files $uri $uri/ =404;
    }

    # 自定义 404 页面（可选）
    error_page 404 /404.html;

}
  • 情况 2：如果有域名，且有 SSL 证书的话，复制以下内容：
    (需要改下“域名”和 SSL 证书存放位置)
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
server {
    listen        80;
    listen   [::]:80;
    server_name  域名;

    rewrite ^(.*)$ https://${server_name}$1 permanent;
}

server {
    listen  443 ssl;
    server_name  域名; 

    ssl_certificate   存放pem的位置;
    ssl_certificate_key   存放key的位置;

    ssl_session_cache   shared:SSL:1m;
    ssl_session_timeout   5m;

    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers   on;
   
    location / {
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   Host             $http_host;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        root   /data/hexo;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

SSL 证书

  1. 开启 443 端口：在腾讯云服务器实例管理中【添加规则】。全部 IPv4 地址（0.0.0.0/0） TCP 443 允许 Web服务HTTPS (443)，如 Apache、Nginx
  2. 安装 Certbot：安装后会自动定时任务，每天在后台运行两次
    如果证书离过期还有 30 天以上，直接退出。
    如果证书离过期不足 30 天了，它就会自动向机构申请新证书，下载下来，并自动帮你重新加载 Nginx 使新证书生效。
1
2
3
4
5
# 更新软件包列表
sudo apt update

# 安装 Certbot 以及它的 Nginx 专用插件
sudo apt install certbot python3-certbot-nginx -y
  1. 运行
1
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com -d blog.yourdomain.com
  • Enter email address (used for urgent renewal and security notices)：
    • 输入常用邮箱（证书快过期时会发邮件提醒你），回车。
  • Please read the Terms of Service… (Y)es/(N)o:
    • 输入 Y 同意服务条款，回车。
  • Would you be willing, once your first certificate is successfully issued, to share your email… (Y)es/(N)o:
    • 是否愿意分享邮箱给电子前哨基金会发广告。输入 N 拒绝，回车。
  1. 检查状态
1
sudo systemctl status certbot.timer
  1. 模拟一次自动续期
1
sudo certbot renew --dry-run

遇到的问题

  • 问题：20200520：Node 版本过高 (14.2.0) 导致 hexo -d 报错，版本问题导致这种应用级错误，预备 OUT
  • 解决方案：2026-05-16，兜兜转转，在 astro、hugo、hexo 等选型中，还是选择了 hexo+next，够稳定，还是优先关注内容吧
给博主来一杯卡布奇诺