介绍hexo 的基本生成部署操作和typora的文件如何更新到博客

Hexo 基本操作

我们定义根目录是含有主题、 source等信息的根目录，如下是根目录内的文件

首先是要先把新建的仓库clone到本地，新建博客源码分支，初始化hexo，具体命令如下：

$ git clone xxxxxx // xxxxx是github上复制的clone地址

$ cd xxxxxx // clone到本地会生成一个跟仓库同名的目录

$ git checkout -b hexo // 创建并切换到hexo分支

$ hexo init hexo // 初始化hexo，第一个hexo是cmd，第二个hexo是新建hexo目录

$ cd hexo // 进入新建的hexo目录

$ npm install // 安装相关依赖

$ hexo g // generate，生成静态网站

$ hexo s // server，本地预览
12345678910111213141516

到这里就可以打开浏览器输入localhost:4000，进行本地预览了。

站点文件配置

还需要修改Hexo的配置文件_config.yml，注意此文件应位于hexo目录下，称为站点配置文件。在themes/主题名路径下也有一个_config.yml，称之为主题配置文件。在站点配置文件同级目录下，你可以添加多个主题

添加主题

比如添加next主题：

$ cd hexo //确保当前目录处于站点配置目录下

// clone NexT主题，如果使用https clone报错，可以自行替换为ssh的链接
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

执行如下命令本地验证主题是否生效：

$ hexo clean // 清理之前生成的资源
$ hexo g // 重新生成
$ hexo s // 启动本地服务
123

打开浏览器输入localhost:4000，进行本地预览。

部署deploy到github

首先需要安装插件hexo-deployer-git

1 2	$ npm install hexo-deployer-git --save

修改站点配置文件，搜索deploy

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo:
  	# 需要替换为自己仓库的链接，根据https或ssh方式不同自由选择，我已经上传了公钥，所以选择ssh
  	# 如果你配置了多用户ssh，可考虑更改 github.com 为你设置的histname，
  	# 比如 github: git@github_aaa:treeknows/treeknows.github.io.git
    github: git@github.com:treeknows/treeknows.github.io.git
  # 此处似乎只能选择master，配置为main时，实际还是会部署到master分支
  branch: master
123456789

可以将配置修改为如上，记得替换自己的仓库链接。此外配置branch时，设置为main实测是无效的，依旧会push到master分支，如果没有master分支，则会自己创建。这也是为什么在前面推荐修改默认创建分支为master，来自强迫症患者的倔强。

多个GitHub账号配置和多个Hexo博客地址配置

如果你使用多个GitHub账号配置和多个Hexo博客地址配置，则需要做一些操作

删除全局配置

1
2
3

git config --global --unset 'user.name'
git config --global --unset 'user.email'

设置local配置

在自己的每个文件夹(repo仓库)下,打开Git Bash,然后进行设置。

1 2	git config user.name `xxx` git config user.email `xxx@xxx.com`

部署到Github

修改配置后，需要手动部署到Github

hexo g -d

部署成功后，稍待片刻，便可访问GitHub上自己的博客查看效果了。

问题

问题1：

You have to configure the deployment settings in _config.yml first!

原因：yml格式不对冒号后面唯一空格，是repo 不是github

问题2

fatal: unable to auto-detect email address

https://blog.csdn.net/nineya_com/article/details/103301870

2.进入我们博客目录的“.deploy_git.git”子目录，找到config文件。在这里插入图片描述

3.打开config文件，添加以下内容

[user]
	email=你的邮箱
	name=GitHub用户名

再次运行

hexo g -d

问题3：blog 404

github创建个人网页登录后404无法显示的问题

https://blog.csdn.net/weixin_43658047/article/details/133742886

1.首先必须要有内容，默认是会找index.html文件，找不到该文件会找readme.md文件，也就是说最简单的方法是，创建了与用户名同名的repository后username.github.io后，添加一个readme.md文件，得在readme里打点字，这个里面得有东西

2.另外在username.github.io这个repository的setting/github page中这个选择Deploy from a branch，注意将仓库里里的main分支改为master，同时在下图页面，将底下默认的main改成master，就能访问了

typora更新至blog

generate md 和image存放结构

在讨论图片如何设置前，我们需要先知道 hexo g 的时候图片和md文件会如何放置

在_config.yml文件里有一个参数 post_asset_folder , 它有两个作用：

如果为true，会在使用 hexe new blogname 时候，在创建 md文件同时，还创建一个同名文件夹
1
2
3
_posts
[blogname.md]
[blogname]
同时还需要安装一个插件 hexo-asset-image
1
npm install https://github.com/CodeFalling/hexo-asset-image --save
即post_asset_folder 激活和 hexo-asset-image 插件安装好情况下，在generate的时候，

除了在imgs在存放 img ，还在 blog里存放img

image-20240811123640730
如果为false，只在source/imgs在存放 img

image-20240811123744791

总结路径关系：

source/posts里的 md → public/yy/mm/dd/blogname/index.html
source/imgs/blogname里的 image → public/imgs/blogname/image
source/posts/blogname里的 image → public/yy/mm/dd/blogname/images(只在post_asset_folder 为true + 安装hexo-asset-image时产生 )

typora图片路径

根据是否激活post_asset_folder，其路径配置也不太一样，目前只有激活的的没有问题，没有激活的html的图片显示还是有些问题没有解决

`post_asset_folder` 为 true

我们先观察blog取的图片路径，以next主题为例（其他主题可能有差异，不能确定是否适用），需要显示图片的主要有两个地方：1. home 预览页即主页 2. 完整博客内容页

切换 post_asset_folder 后，注意要使用hexo clean 一下

post_asset_folder 为 true+ 安装hexo-asset-image，预览和博客的图片根路径都是 public/yy/mm/dd：

post_asset_folder 为 false+ 安装hexo-asset-image，预览的路径public 博客路径public/yy/mm/dd/blogname ，使用的路径是不同的，因而需要存放多次，可能存在预览和博客内容不一致的情况：

那么在上传新的博客的时候，只要在_posts 存放 md 文件和同名文件即可，md 按照blogname/image的形式获取即可

1
2
3

_posts
	[blogname.md]
	[blogname]

typora 图片拷贝文件位置就可以这样设置./$(filename)

`post_asset_folder` 为 false

没整明白。。。。。。

对于hexo 图片的路径和博客是分开的，图片从根目录开始为 imgs/标题名/xxxpng ，比如下面这个是一个能够正常获取的图片路径 imgs\blogname\xxx.png

因此typora的图片插入路径需要与之保持统一，即路径名一致 imgs\blogname\xxx.png

我们只要确保md能够通过这一路径访问并显示图片，那么我们就能实现typora和网页端都能正常显示图片了，typora 显示这种路径规则的图片有多种方式：

最简单的，把图像存在imgs中
1. 在preference中设置图片的copy路径，imgs/$filename
2. 在md 文件中用 imgs\blogname\xxx.png 获取图片
多种组合实现：举个例子：
1. 在preference中设置图片的copy路径，比如 ../imgs/$filename
2. 在format - image - use image root path 设置 .. 上一级目录为图片根目录
image-20240811055105205
1. 在md 文件中用 imgs\blogname\xxx.png 获取图片
  
  1+2部其实就消除了 ..

md文件 head

---
title: 测试文章
date: 2021-06-10 16:35:20
tags:
- 原创
categories:
- Java
---

将插入到文章后，主页在插入处截止了预览，出现的阅读全文的按钮。

问题：路径错误/.com//

hexo图片显示不出且图片路径错误/.com//

https://blog.csdn.net/sluck_0430/article/details/136431303

卸载 hexo-asset-image 插件：npm uninstall hexo-asset-image 即可

公式渲染

首先，在NexT主题配置文件中将mathjax设为渲染引擎

math:
  ...
  mathjax:
    enable: true

mathjax 和 katex 是互斥的两个选项，enable 不能同时 true或 false。

如果设置 mathjax : true ，就需要更换渲染引擎， hexo-renderer-pandoc 或 hexo-renderer-kramed。

如果 katex : true ，则需要更换 hexo-renderer-markdown-it ，或者在原来的 hexo-renderer-marked 引擎下使用 markdown-it-katex plugin。

安装插件

1 2	npm uninstall hexo-renderer-marked --savenpm npm install hexo-renderer-pandoc --save

md head添加mathjax
1
2
3
title: xxx
......
mathjax: true
重新生成和启动本地服务器

hexo clean && hexo s

就可以显示公式了，像这样

主题

==TODO==

REFERENCE

REF：

Github Pages + Hexo框架 + NexT主题搭建个人博客：https://blog.csdn.net/Darlinnn/article/details/130279000

Git 多个GitHub账号配置和多个Hexo博客地址配置：https://blog.csdn.net/Tmraz/article/details/107400453#5__55

GitHub Pages + Hexo搭建个人博客网站，史上最全教程：https://blog.csdn.net/yaorongke/article/details/119089190

【Hexo】GitHub+Typora写博客+图片上传:https://blog.csdn.net/Qxiaofei_/article/details/124629908

Hexo Next主题渲染 Latex 公式的配置方法