使用Github issue + nuxt3搭建简约优雅的个人博客

前言

作为一个喜欢倒腾的人自然是少不了平时搞搞自己的博客站点，但是大部分个人博客一直存在一些痛点：

• 需要服务器部署，如果没有别的项目同时部署就是一个额外的成本
• 需要考虑图片的存储问题，购买对象存储服务
• 如果采用静态站点部署，修改文章都要先本地修改再提交到仓库重新打包
• 常规上的博客框架样式千篇一律/过于花哨

所以自己基于nuxt3 和 github issue 写了个博客项目，部署后直接通过issue来控制博客内容，博客内容自动更新，修改方便，不需要服务器，也不用考虑图片存储问题

github: github.com/chansee97/i…

预览地址：www.iamsee.top

项目预览

项目的样式参考了antfu的个人博客

特点

• Nuxt3技术栈，ssr渲染，对seo更友好
• 适应移动的端布局
• 页面简约，暗模式过渡动画优雅
• 使用Github issue作为数据源，文章操作更加简单
• 使用issue Label来为文章标记标签, Milestone作为文章分类
• 文章搜索功能
• 只需配置简单的环境变量即可使用，无需更改代码
• 基于utteranc的评论功能，评论与issue绑定

📖 使用方法

使用前准备

1. 准备一个新仓库，仓库名称随意，例如“my-blogs”，记下仓库的名字
2. 记下自己的github用户名，例如“chansee97”
3. 创建一个专门用来读取issue的github token并保存,配置如下
4. 准备一个vecel账号（此处以vecel部署为例）

项目部署

1. fork本项目到自己的仓库
2. vecel中import刚才fork的项目, 在部署前导入自己的变量 你应当在部署的站点增加如下的环境变量

• VITE_OWNER issue所在仓库的拥有者
• VITE_BLOGS_REPO issue所在仓库名称
• VITE_GITHUB_TOKEN issue账号的验证token,如果不设置会导致速率下降，访问受限

1. 环境变量设置完毕后，点击部署Deploy，耐心等待部署成功
2. 至此，所有的设置完成，没有其他需要修改的地方，如果你有自定义的需求，可以进行个人开发修改

增加文章

从刚才新建的仓库进入，新建打开状态的issue即可，所有的issue会同步在博客站点上，如果issue关闭，则文章也会隐藏

issue的标题即为文章的标题 issue的正文即为文章的内容 issue的Labels 为文章标签，你可以为一个文章打上多个标签 issue的Milestone 为文章分类，你可以为一个文章设置一个分类

可以参考我的博客issue

修改个人介绍

博客中的个人介绍与issue所有者的reamde简介文件一致，请仔细编辑自己名下简介文件 github上个人简介的仓库是github.com/用户名/用户名 简介则是此仓库下的reamde.md文件

最后

如果你觉得这个项目不错，希望可以给与我一些鼓励和建议，给项目一个star或提出您宝贵的issue