我们都知道hexo是一个静态博客框架，它配合github pages可以部署个人博客，但是hexo会默认编译source目录下所有文件，
而我们自己的react项目打包出来以后已经是编译后的文件了。所以我们需要让hexo跳过编译我们指定的文件
效果预览
这里有一个我已经部署好的线上demo
saebaryoo.github.io/visualizati…
可以看看效果
配置修改
hexo也给我们提供了一个参数skip_render, 用于跳过指定文件的编译，直接复制到public中。
那么，我们需要做的就是在source目录下创建一个新项目source/your-project
然后在根目录的_config.yml中有一个skip_render字段，我们只需要按照以下来配置即可
skip_render:
- your-project/**/*
然后就可以将打包的项目放入到source/your-project中去，我们以打包一个react项目为例，可能包含以下的文件
- your-project
- index.html
- imgs
- a.png
- b.svg
- assets
- index-03c73ac2-baad1081.js
- index-b4e46d6f-92026574.js
- index-bf437fc1-230805f9.js
- index-e60f790f.js
- index-e63df4eb.css
这里需要注意的是，如果你没有在你的构建工具中去做设置的话，一般情况下打包出来的index.html里面对应的资源文件的引用都是绝对路径，比如<script type="module" crossorigin src="/assets/index-e60f790f.js"></script>
但是部署到github pages中需要相对路径，所以需要改成这样<script type="module" crossorigin src="./assets/index-e60f790f.js"></script>
项目路由修改
正常到这里就结束了，但是如果项目中使用了路由管理，那么就需要修改项目中对应的路由前缀，我们以react-router为例,需要添加上你在source目录下创建的项目的目录名。
{
path: '/your-project',
element: <App />,
},
{
path: '/your-project/preview',
element: <Preview />,
},
因为github pages中是按照你创建的那个目录为路由的。所以最终到线上的访问地址就是xxx.github.io/your-project。但是如果不在react-router中给路由加上前缀，你到线上访问xxx.github.io/your-project就会因为无法找到对应的资源而报404。
最后我们直接运行hexo clean && hexo g && hexo d就可以完成发布了，然后就可以到线上访问你的react项目了
总结
对于一些个人展示小项目来说，白嫖服务器太爽了。既减少了购买服务器的开支，又省的自己配置web服务器
