博客搭建记录_20241208

Posted by Dowerinne on 2024-12-09
Words 1.1k and Reading Time 4 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即可，
其他不用动。

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.发布/修改博文后更新：hexo clean hexo g -d

1
2
3
hexo clean
hexo g
hexo d

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

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

补充教程（供参考）：

https://saltyfishyjk.github.io/2022/01/28/Hexo%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E5%9B%9E%E9%A1%BE%E6%A6%82%E8%A7%88/

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

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

This is copyright.

...

...

00:00
00:00
FEATURED TAGS
FRIENDS