基于Hexo的主题Fluid搭建Github博客

一 、配置Git和Github

1. 使用scoop安装git

1
scoop install git

2. 设置全局用户名和邮箱

1
2
git config --global user.name "Your Name" 
git config --global user.email "your_email@example.com"

3. 生成SSH密钥对

默认文件路径和文件名（通常是~/.ssh/id_rsa和~/.ssh/id_rsa.pub）

1
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

4. 添加SSH公钥到GitHub

复制~/.ssh/id_rsa.pub内容到github

5. 测试SSH连接

1
ssh -T git@github.com

二、node.js安装和环境配置

1.安装node.js

1
2
3
4
5
# 安装node.js
scoop install nodejs
# 验证
node -v  
npm -v #nodejs安装默认附带安装npm

2. 配置环境变量

在nodejs安装目录下创建node_global，node_cache两个文件夹（全局安装的模块路径和缓存路径）

1
2
3
npm config set prefix "D:\nodejs\node_global"  
npm config set cache "D:\nodejs\node_cache"  
# 如显示权限不够，用管理员打开cmd

防止npm下载过慢，使用国内淘宝镜像

1
2
3
npm config set registry https://registry.npm.taobao.org
# 或者
https://registry.npmmirror.com/

三、下载Hexo并配置fluid主题

1. 下载Hexo

1
2
3
4
5
6
npm install hexo-cli -g  
# ***.github.io是一个文件夹
hexo init ***.github.io # 这里替换成你自己的，为后续更新到github上，使用github名字.github,io  
cd ***.github.io # 进入本地的博客文件夹  
npm install  
hexo server # 打开本地服务器预览

2. 配置fluid

1
2
# 安装fluid主题
npm install --save hexo-theme-fluid

配置fluid

1
2
3
 # 修改博客目录中的 _config.yml，修改两个字段：
language: zh-CN # 指定中文  
theme: fluid # 指定主题

3. 部署到github

修改博客根目录下的_config.yml文件中的deploy

1
2
3
4
deploy:  
type: git  
repo: git@github.com:**/**.github.io.git # 这里我用的是ssh，也可以用https，可能会报错，设置token即可  **为用户名
branch: main # 注意自己创建的分支，我的是main，有可能是master

安装hexo-deployer-git自动部署发布工具，将hexo 部署到 git page 的 deployer

1
npm install hexo-deployer-git --save

更新博客之后，可以通过如下命令就行上传github

1
2
3
4
hexo clean # 清空一下缓存，有时候博客页面显示不正常也可以试试这个命令行  
hexo g # 是hexo generate的简写，把刚刚做的改动生成更新一下  
hexo server # 在本地服务器看看博客有没有更新成NexT主题：https://localhost:4000  
hexo d # hexo deploy，如果本地服务器看了没问题就可以上传到github网站

直接使用 hexo d 部署到 GitHub，将会报错

1
git config --global core.safecrlf false

四、其它配置

1. latex配置

hexo 默认不支持latex[（以下二选一）

  1. 在md文件中，添加以下代码
1
2
3
4
5
<script type="text/javascript"

src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">

</script>

或 (推荐以下方式)

1
2
3
4
5
6
7
8
9
10
11
<head>
    <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
            inlineMath: [['$','$']]
            }
        });
    </script>
</head>
  1. Hexo添加mathjax
1
2
3
npm uninstall hexo-math --save

npm install hexo-renderer-mathjax --save

$$
E=mc^2
$$

图片

参考

基于Hexo的主题Fluid搭建Github博客 - 幸运藏在努力里
利用Github+Hexo打造自己的永久Blog
Hexo Fluid使用utterances评论系统，以及相关异常处理 - 鹘横海
Hexo渲染LaTeX公式

配置
#Blog
基于Hexo的主题Fluid搭建Github博客
http://example.com/2024/11/30/基于Hexo的主题Fluid搭建Github博客/
作者
卜
发布于
2024年11月30日
许可协议