Skip to content

chansee97/issue-nuxt-blog

Repository files navigation

Issue-nuxt-blog

Cover.png

简体中文 | English

Issue-nuxt-blog是基于Github issue实现的博客项目, 新增和编辑文章更加快速方便,而且部署简单,无需服务器,只需配置环境变量即可使用。

本项目基于另一个使用本地文件记录的nuxt博客,使用并不方便,所以有了使用issue的版本

💡 特点

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

📖 使用方法

使用前准备

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

项目部署

  1. fork本项目到自己的仓库
  2. vecel中import刚才fork的项目, 在部署前导入自己的变量 image.png 你应当在部署的站点增加如下的环境变量
  • 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上个人简介的仓库是https://github.com/用户名/用户名 简介则是此仓库下的reamde.md文件

🔎 本地开发

确保安装依赖项:

pnpm install

启动开发服务

pnpm dev

协议

MIT