HexoBlog

博客搭建记录_20241208

Posted by Dowerinne on 2024-12-09
Words 1.6k and Reading Time 6 Minutes
Viewed Times

2024.12.08下午，终于决定建个博客，12.09初步弄好了。

2024.12.08 博客搭建记录整理

方案：github pages + hexo

步骤：

0.Github上新建用户名.github.io仓库

1.安装Git，生成SSH，添加到Github的SSH keys

2.安装node.js和npm

2.5 修改npm资源获取地址

1
npm config set registry http://registry.npm.taobao.org

3.安装hexo

4.后续步骤见：https://blog.csdn.net/weixin_44763569/article/details/106435118

5.主题选择：https://hexo.io/themes/

我选的是A-Snail主题，安装教程/【配置】见：https://github.com/dusign/hexo-theme-snail

6.修改F:\myBlog_241208\blog\_csonfig.yml：

1
2
3
4
5
6
7
8
9
10
11
12
...
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: snail
...
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:Dowerinne/Dowerinne.github.io.git
  branch: main

7.npm install hexo-deployer-git --save

8.npm install hexo-util@1.9.1 【重要，必须指定成这个版本，防报错】

9.修改引擎bug，修改文件/node_modules\kramed\lib\rules\inline.js中escape和em两行，具体修改如下，源自https://www.jianshu.com/p/9b9c241146bc

1
2
3
4
5
//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/,
  
//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

我的本地文件夹：F:\myBlog_241208\blog，在该目录下打开cmd 或 Git Bash输入命令。

A-Snail主题安装与配置

https://github.com/dusign/hexo-theme-snail

安装：见Quick Start一节，先后安装了Theme，Mathjax，WordCount

配置：见Configuration一节【重要】，是修改F:\myBlog_241208\blog\_config.yml。 未完待续，继续弄

配置记录：

1.修改header_img：图片放入img/文件夹中。
1
2
3
4
5
6
7
8
# Site settings
SEOTitle: Dowerinne's blog
email: 
description: "A hexo theme"
keyword: "hexo-theme-snail"
header-img: img/header_img/sunset.jpg
signature: false #show signature
signature-img: img/signature/dusign.png

注意这里的img/文件夹是F:\myBlog_241208\blog\source\img，并不是F:\myBlog_241208\blog\img！！

2.每篇文章的header_img：

图片是放在F:\myBlog_241208\blog\source\img文件夹中！

修改每个md文件最上方的header-img: ../../../../img/default.jpg，把default.jpg换成目标图片即可。

1
2
3
4
5
路径解释：../../../../img/wallpaper_01.jpg
并不是从md当前的位置出发 F:\myBlog_241208\blog\source\_posts，
而是从这个位置出发：F:\myBlog_241208\blog\public\2024\12\09\博客搭建记录-20241208

其他md以此类推。

但是修改的时候，图片还是要放在F:\myBlog_241208\blog\source\img文件夹中，

而不是放到F:\myBlog_241208\blog\public\img里面。

3.LaTeX/MarkDown数学公式相关：

①如果md文档里有数学公式需要渲染，文档最上面加上mathjax: true，例如：

1
2
3
4
5
title: Transformer和多头注意力机制
......
date: 2024-12-10 23:16:05
mathjax: true
......

②所有的公式都要用两层$套起来，

而不是只有一层$

因为如果一层$里面有星号*，而同一行又有加粗字体**...**，页面上渲染会有问题！！

或者是直接插入公式块。

③尖括号的渲染问题：如果想在文档中显示尖括号，即< 和 >，写成&lt;和&gt;

4.检查node.js，npm，hexo是否安装成功：
1
2
3
4
打开cmd，输入：
node -v
npm -v
hexo -v

如果显示“不是内部或外部命令，也不是可运行的程序或批处理文件”：

解决方法一：看环境变量是否配置成功，

用户变量的Path中应该含有C:\Users\ZhuRuida\AppData\Roaming\npm

系统变量的Path中应该含有D:\nodejs

解决方法二：

重新安装node.js和npm：运行node-v22.12.0-x64.msi，安装路径还是选择D:\nodejs即可。
重新安装hexo：命令行输入npm i hexo-cli -g即可，
其他不用动。

5.页面的微小改动：

底端：修改 F:\myBlog_241208\blog\themes\snail\layout\_partial\footer.ejs 的90，91，95行。

标签页icon：修改F:\myBlog_241208\blog\themes\snail\layout\_partial\head.ejs的15行。

右上角导航栏：在blog\source目录下删去categories文件夹。

有两套独立的分类：Tags和Categories，只有第一种就够了。

6.页面背景颜色修改：

修改F:\myBlog_241208\blog\themes\snail\source\css\dusign-light.css的第61行：

删去该行：默认白色

其他护眼颜色：

1
2
3
4
5
6
7
8
#ede9e1 Zotero中的米色
极浅灰：#f5f5f5 / #fafafa
豆沙绿（经典护眼色）：#cce8cf / #d1e8d9
更浅的薄荷绿：#e8f5e9 / #f0f9f1
灰绿调：#e0ebe0
淡天蓝：#e8f4f8 / #ecf5ff
灰蓝：#e3e8f0
经典“眼睛舒适蓝”：#e6f0ff（非常淡）

7.评论区设置：【貌似无法删评，评论是永久的】

参考：

https://github.com/dusign/hexo-theme-snail Configuration的 Comment
https://blog.csdn.net/ddxygq/article/details/86499623

步骤：

Register a new OAuth app

image-20251217105040701

新页面有：Client ID、Client secrets

修改F:\myBlog_241208\blog\_config.yml：

1
2
3
4
5
6
7
comment:
  gitment:
    enable: true
    owner: Dowerinne
    repo: Dowerinne.github.io
    client_id: [新页面的Client ID]
    client_secret: [Client secrets]

初始化评论：
每一篇博文都需要单独初始化：点进去页面，登录我的Dowerinne账号，点下面蓝色的Initialize Comments。

报错：我第一次登录时，卡在logging in的位置，解决方案：卡在logging in的位置解决方案

（我登录自己的号评论，有这个问题，别人登录别人的号评论就没事。）

8.如何插入本地图片

先安装hexo-asset-img

cmd中：

1
F:\myBlog_241208\blog>npm install hexo-asset-img --save

举个例子：
1.2024-12-09-博客搭建记录-20241208.md的本地图片，默认在F:\myBlog_241208\blog\source\_posts\2024-12-09-博客搭建记录-20241208.assets中；
2.把里面的图片，复制到F:\myBlog_241208\blog\source\_posts\2024-12-09-博客搭建记录-20241208中。
3.md中，修改图片路径：

1
2
3
4
5
原先：
(./2024-12-09-博客搭建记录-20241208.assets/image-20251217105040701.png)

改成：
(2024-12-09-博客搭建记录-20241208/image-20251217105040701.png)

即可在网页中正确渲染。

hexo命令整理：【待补充继续学习】 https://hexo.io/

1.hexo new <articlename>：新建一篇博文，存放在F:\myBlog_241208\blog\source\_posts\<articlename>.md，都是markdown格式，用typora书写。

所有博文都在F:\myBlog_241208\blog\source\_posts\目录下。

2.发布/修改博文or修改配置后更新：hexo clean hexo g -d

1
2
3
hexo clean
hexo g
hexo d

如果有报错，重新输入一遍命令，就没报错了。

3.本地查看页面效果：hexo server，浏览器中再打开localhost:4000

补充教程（供参考）：

Hexo博客搭建回顾概览

过程中遇到的一些错误的解决方案：

npm : 无法加载文件 D:\nodejs\npm.ps1

hexo : 无法加载文件\AppData\Roaming\npm\hexo.ps1

解决 git 报错 “fatal: unable to access ‘https://github.com/…/.git‘: Recv failure Connection was reset

Written by Dowerinne | All Rights Reserved

FEATURED TAGS
HexoBlog