这个网站是什么

如你所见,这个网站是一个个人博客,也可以说是一个个人专属网络空间。用途远远不止博客,还可以用来存照片、写日记,当然也可以和其他人共同管理,当作一个小团体的共享空间也行。

应该怎么用这个网站

博客网站最主要的功能当然就是写博客。虽然我一般也不会闲的没事写文章,但是把自己的学习笔记发到博客上倒是个好主意,这样无论在哪里都可以看到自己的笔记,再也不用担心笔记在电脑上但是电脑没带看不了。不过前提是你的笔记是在电脑上 markdown 写好的。

markdown 做笔记真的挺方便的,如果你还没有试过,可以下载 typora 或者在 vscode 里面安装 Microsoft Office Viewer 这个插件,都可以方便地编辑 markdown 文件。同时这里也顺带推荐一个专门且极其强大的笔记软件,Obsidian。这个笔记软件在普通 markdown 的基础上添加了双向链接和标签功能,而且用来和 pdf 文件联动非常方便,是目前当之无愧的 top1 笔记软件,有兴趣可以了解一下。

关于 markdown 编辑器,需要进行一些设置才能正常添加图片,看这篇文章后面有关于编辑器的设置说明

或者想分享学习笔记给别人的时候,以前总是要找到文件然后微信发过去,现在可以直接把博客上笔记的链接发过去,对方在浏览器就能看到。

当然也可以发碎碎念或者聊天,这些我后面会介绍,现在先简单介绍一下怎么写博客

创建和删除博客

首先,先在博客的根目录(比如…/hexo)“右键 - 显示更多选项 - Open Git Bash here”

1755689026498

打开 Git Bash 窗口后,输入

1
hexo new 文章名

例如,我想创建一篇名为 光学 的博客/笔记,那我输入的命令就是

1
hexo new 光学

执行完后的结果如下:

1755688994690

现在在 hexo 根目录\source\_post 目录下可以找到我们刚刚创建的博客的 md 文件和一个同名的文件夹,md 文件是博客的 markdown 文本,而同名文件夹中存放的则是这篇文章中用到的图片,这点在 markdown 编辑器设置中我会重点讲记得去看,不然你会发现在本地可以显示的图片部署到网站上就加载不了了(别问问就是我研究了一下午才解决这个问题)

1755689036360

1755689047049

1755689301255

打开它,然后编辑里面的内容保存,文章的 title 和 date 是自动生成的,标签 tag 是可以自定义的。

1755689064536

上面编辑的博客文件是在本地操作的,还没有把新创建的文章上传到 github。所以写完编辑完博客 md 文件之后,还需要在 bash 中(记得是在 hexo 根目录右键打开 Git Bash)执行下面的操作将文章上传

1
2
3
hexo clean
hexo g
hexo d

上面三个命令的作用分别是:

  1. hexo clean 清空缓存
  2. hexo g 生成更新后的页面(hexo generate 缩写为 hexo g)
  3. hexo d 将更新后的本地配置部署到 github 上 (hexo deploy 缩写为 hexo d)

上面三个命令就是 hexo 最核心的三个命令,无论是更改设置还是添加/删除文件,都必须执行上面三个命令后才能生效

然后等两三分钟(因为配置更改生效需要一点时间)刷新博客页面就可以了

1755689224952

至于怎么删除博客,非常简单:直接删除 _post 目录下的 md 文件和同名文件夹,然后 hexo 三步 hexo clean, hexo g, hexo d 就行了

如果你想对已经发布的文章进行更改,也是先更改本地的 md 文件,然后 hexo 三步部署到网站上就行了

其他功能

博客网站其实还有很多很多其他功能,比如可以在每篇博客下面设置评论区、发布说说、小窗口在线聊天等等,但是就是配置会比较复杂,我这里没有做,如果感兴趣可以参照这个网站的说明文档进行配置(不过估计也没那个闲情雅致了)

评论示例:

1756203820690

说说示例:

1756203919432

Markdown 编辑器设置(一定要看)

在电脑上编辑 markdown 文件一定会用到 markdown 编辑器

这里一定要对你用的编辑器进行一定的设置才能保证笔记里的图片能在网站上正常显示!!!

请按照下面的指引对 md 编辑器进行设置

typora

如果你用的是 typora 编辑器,点击左上角 文件 - 偏好设置

1756204587623

然后左侧菜单栏选择 图像 - 插入图片时 - 复制到指定路径

1756204626066

一般来说选了这个选项后默认的路径就是 ./${filename} 如果不是,改成这个路径然后保存设置就行了

1756204679210

这个设置的作用是把这篇 md 笔记里的图片保存到和笔记同名的文件夹下而非 images 文件夹,例如笔记名为光学.md,那就会在当前路径下自动生成一个名为“光学”的文件夹,ctrl + v 复制的图片就会保存在里面

vscode + Office Viewer

vscode 里面可以通过安装 Office Viewer 插件编辑 markdown,功能几乎和 typora 一模一样

1756204913248

安装这个插件后,左侧边栏插件栏里找到这个插件,点右下角的小齿轮

1756205088359

然后选择 “设置”

1756205117548

如下图所示修改图片粘贴路径为 ./${filename}/${now}.png

1756205165045

然后就大功告成了!开始写笔记吧!

原理解释

在 markdown 中插入图片的原理是:

  1. 先将要插入的图片放到指定的路径下,比如 ./images
  2. 然后在笔记中使用特定的语法定位图片 ![图片名(这个可以任取)](图片地址./images.photo1.jpg)
  3. 所以我们要做的只是把图片复制到特定的目录,然后在 md 笔记里定位就行
  4. 在 typora 和 vscode Microsoft Office Viewer 中,以上操作都不需要手动进行,只需要 ctrl + c 复制图片,然后在适当位置 ctrl + v 粘贴就行了

但是上面提到的两个 md 编辑器粘贴图片的逻辑其实是:

  1. 在当前路径下新建一个 images 文件夹
  2. 把图片放进 images 文件夹里
  3. 在 md 笔记中自动生成路径

这在本地完全没有问题,图片可以正常显示,但是当部署到网站上之后就不行了。这是因为博客网站会默认图片在同名文件夹下,而不是 images 文件夹。

所以我们通过上面的修改,把图片粘贴路径从粘贴到 ./images 路径改为粘贴到同名文件夹 ./${filename}下,这样在博客网站上就能正常显示了