基于hexo&github免费博客搭建记录

1. 构建工具安装准备

1.1 Node.js环境搭建

hexo基于Node.js构建,需安装Node.js依赖环境，由于ubuntu系统仓库Node.js比较旧，需前往Node.js 官网按指引安装最新稳定版本。

由于我使用的是WSL子系统，这里我选择Linux系统和nvm安装方式。

首先安装nvm Node.js版本管理器，再使用nvm工具包安装指定版本Node.js，Node.js自带npm软件包管理器，顺便安装yarn JavaScript软件包管理器。

具体操作如下：

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"
# Download and install Node.js:
nvm install 22

# Verify the Node.js version:
node -v # Should print "v22.19.0".
# Verify npm version:
npm -v # Should print "10.9.3".

# Download and install Yarn:
corepack enable yarn
# Verify Yarn version:
yarn -v

1.2 NPM简介

NPM（Node Package Manager） 是 Node.js 的默认包管理工具，用于管理 JavaScript 项目的依赖库和工具。它允许开发者轻松地安装、更新、共享和发布代码包，同时支持版本控制和脚本运行。

如果需要加速国内访问，可以配置淘宝镜像：

npm config set registry https://registry.npmmirror.com

以下是一些常用的 NPM 命令：

npm init # 初始化 package.json 文件
npm install # 安装 package.json 中的所有依赖
npm install <包名> --save-dev # 安装开发依赖
npm uninstall <包名> # 卸载依赖
npm update <包名> # 更新依赖
npm list --depth=0 # 查看已安装的依赖
npm audit # 检查依赖中的安全漏洞
npm run <脚本名> # 运行 package.json 中定义的脚本

本地与全局安装

1
2

npm install express # 本地安装 将包安装到当前项目的 node_modules 目录，仅对该项目可用。
npm install -g @vue/cli # 全局安装 使用 -g 参数将包安装到系统范围内，适用于 CLI 工具。

2. HEXO配置

2.1 hexo安装以及初始化

根据Hexo官网安装指引，全局安装 npm install -g hexo-cli

hexo init blog #初始化blog目录，目录一定为空。
cd blog
npm install #安装hexo所需依赖
hexo cl&hexo g&hexo s #清除缓存&渲染网页&启动本地端口服务
http://localhost:4000/ #点击链接可用浏览器本地预览博客

初始化后blog文件夹结构如下.

.
├── _config.yml #hexo配置文件
├── package.json
├── scaffolds #模板文件夹
├── source #资源文件夹，即网页根目录位置
|   ├── _drafts
|   └── _posts
└── themes #主题文件夹

2.2 hexo配置开始折腾

本站使用Stellar主题构建，Stellar 是一个内置文档系统的简约商务风 Hexo 主题，支持丰富的标签和动态数据组件，帮助您简单从容地应对各种表达需求，十分推荐内容创作者使用 Stellar 开始您全新的博客之旅。

https://xaoxuu.com/wiki/stellar

npm i hexo-theme-stellar安装稳定版本，安装路径位于blog/node_modules/文件夹内。

在 blog/_config.yml 文件中找到并修改：

theme: stellar

将blog/node_modules/_config.yml 拷贝一份至/blog目录重命名为_config.stellar.yml，该配置文件优先级高于主题目录。

参阅Stellar wiki选择开启需要的功能。

3. 网站统计

图片

代码块

blog/_config.stellar.yml
	content: | # 支持 Markdown 格式
        <center>
        <!--不蒜子计数器-->
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
        <!--添加一个访问量-->
        <span>
              本"<span style="color: hsl(192 98% 55%); font-weight: bold;">页面</ a></span>"访问 <span id="busuanzi_value_page_pv" style="color: hsl(192 98% 55%); font-weight: bold;"></span> 次 | 👀总访问 <span id="busuanzi_value_site_pv" style="color: hsl(192 98% 55%); font-weight: bold;"></span>       次 | 总访客 <span id="busuanzi_value_site_uv" style="color: hsl(192 98% 55%); font-weight: bold;"></span> 人
        </span>
        </br>
        <span id="runtime_span"></span>
        <script type="text/javascript">
        function show_runtime() {
            window.setTimeout("show_runtime()", 1000);
            X = new Date("2025/09/06 19:00:00");
            Y = new Date();
            T = (Y.getTime() - X.getTime());
            M = 24 * 60 * 60 * 1000;
            a = T / M;
            A = Math.floor(a);
            b = (a - A) * 24;
            B = Math.floor(b);
            c = (b - B) * 60;
            C = Math.floor((b - B) * 60);
            D = Math.floor((c - C) * 60);
            runtime_span.innerHTML = "⏱️本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒"
        }
        show_runtime();
        </script>

        本站由 [{author.name}](/) © 2025使用 [{theme.name} {theme.version}]({theme.tree}) 主题创建。
        本博客部分素材来源于网络，如有侵权请[邮箱](2690640537@qq.com) 联系删除
        本博客遵循[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) 许可协议，转载请注明出处。
        </center>

4. giscus评论启用

进入giscus主页输入博客相应github仓库,选择安装giscus插件

5. 字数统计

添加动态背景

主题文件layout.ejs文件中添加以下代码

1	<script type="text/javascript"color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

color ：线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)
opacity: 线条透明度（0~1）, 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

终端运行hexo clean 清除缓存，hexo g&hexo s渲染网页后本地预览。