chore(ci): blog sync

Author: coderPerseus

data/blog/post-7.mdx

@@ -0,0 +1,143 @@
+---
+title: 基于Next.js + Github issues 的个人 blog
+date: 2024-08-08T01:33:41Z
+slug: post-7
+author: chaseFunny：https://github.com/chaseFunny
+tags: ["blog","教程"]
+---
+
+# 基于Next.js + Github issues 的个人 blog
+
+大家好，我是幸运的蜗牛，不知道大家是否有自己的 blog，或者想要做一个自己的 blog。我觉得有一个自己的 blog 还是很酷的事情，下面看我是如何从 0 到 1 实现我的个人 blog，先给大家看一下 blog 首页效果
+
+![image-20240808012907019](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20240808012907019.png)
+
+## 背景
+
+我也经常在 CSDN，掘金，微信公众号等一些自媒体平台发布文章，这些其实也可以算是个人 blog ，而且自带流量，对乐意分享的人来说，是非常有好的，但是在这些平台分享的时候，我就更想做一个自己的平台，来发布我写的文章，
+
+我其实已经使用很多技术做个人 blog 了，例如：hexo，docusaurus，next.js （基于`https://giscafer.com/` ）；
+
+但是都不是我想要的，我更希望自己从 0 到 1 做一个个人 blog 网站。刚好我在看冴羽的 Next.js 小册，想着实践一下学习的知识，我就决定开发自己的 blog
+
+还有一个原因就是，我平时在逛网站的时候，发现很多大佬都有自己的 blog
+
+本来我是想要直接修改开源的` blog （https://cali.so/）` ，fork 这个项目来进行二创，我也是这样做的，我都改了很多东西了，但是一个非常难受的问题，就是它使用的都是国外的服务，尤其是 sanity ，我本地连接会经常连不上，非常影响开发体验，而且它的源码，很多我不需要，我就下定决定要做一个自己的 blog
+
+## 需求梳理
+
+确定要自己开发了，就需要梳理一下我需要做一个什么样子的 blog 。blog 核心就是文章。那么**就需要解决文章如何增删改查**。由于我对 MySQL 不熟，而且我也不希望在 Next.js 中自己开发后端，于是就想着 使用 Github issues 来存储帖子数据，使用 github actions 来监听 issues 变化，把 issues 转为文章，然后把项目部署在 vercel ，vercel 可以自动监听代码仓库是否变化进行重新部署。
+
+有了核心功能思路，就可以开始需求排期，
+
+- [x] 搭建基础项目（commit：https://github.com/axin-s-Template/Nextjs-Boilerplate/commits/main/）
+
+  - [x] 代码规范：ESLint +  Prettier
+  - [x] 提交规范：husky + lint-staged + @commitlint/cli + @commitlint/config-conventional
+  - [x] 网站 SEO 元信息
+  - [x] 主题切换
+  - [x] 使用 src作为源码目录， 项目目录更加简洁
+
+- [x] 全局 导航栏 、底部 、布局组件、网站 SEO 信息、logo 、 404 页面开发
+
+- [x] 主页开发、引入 framer-motion 为网站添加动效
+
+- [x] 项目页面开发
+
+- [x] 博客列表 +  博客详情。引入 contentlayer 渲染 MDX
+
+- [x] 关于页面开发，也是一篇文章，使用 MDX 渲染
+
+- [x] 博客优化
+
+  - [x] 博客详情 toc 导航栏
+  - [x] 优化移动端展示效果
+  - [x] 推荐阅读（上一篇，下一篇）
+  - [x] 博客内容添加
+  - [x] 为代码添加高亮
+  - [x] loading 页面
+
+- [x] 添加 github actions ，实现 提交 issues ，转为帖子
+
+- [x] 添加百度验证，谷歌验证，百度分析，谷歌分析
+
+- [x] 支持 RSS ，Robots，sitemap.xml
+
+  >  以上代码 commit：https://github.com/coderPerseus/blog/commits/main/
+
+我们可以看一下 chrome 的 LIghthouse 分数
+
+![image-20240808082948886](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20240808082948886.png)
+
+还是挺不错的，
+
+## 技术栈
+
+我是先做了一个基础干净的 [Next.js 启动项目](https://github.com/axin-s-Template/Nextjs-Boilerplate)，下面来看看我这个项目使用了哪些技术吧！
+
+- Next.js：react 框架
+- shadcn/ui ：UI 库
+- tailwindcss: CSS 框架，用于快速构建响应式设计网站（移动优先）
+- contentlayer: 内容层，用于获取和渲染内容。
+- next-themes: 主题切换库。
+- framer-motion：为网站添加动效
+- ESLint + Prettier ：代码格式化
+- husky: Git 钩子管理；lint-staged: 在提交前检查暂存文件；@commitlint/cli 和 @commitlint/config-conventional: 用于规范化提交信息
+- rss：实现 RSS 订阅能力
+- github-api + fs-extra ：同步 github issues 内容到项目作为帖子
+- gray-matter + reading-time + rehype-autolink-headings + rehype-prism-plus + rehype-slug + remark-gfm：优化博客渲染
+
+可以看到使用的都是非常成熟，社区活跃的技术和框架，让我们项目即使遇到问题也能很快解决
+
+## 项目简介
+
+由于没有任何调用接口的需求，我目前就把项目做成了[静态导出](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) 的，也就是说我们其实构建后的是一个静态网站。然后我目前是在 vercel 部署我的 blog，它有很多好处：
+
+1. Vercel 提供了与 GitHub 的无缝集成，只需将项目链接到 Vercel，每次推送到 GitHub 仓库时，Vercel 都会自动构建和部署最新的代码。自动化流程大大简化了部署过程，确保每次提交的代码都能自动构建发布
+2. Vercel 使用全球内容分发网络（CDN）来加速静态资源的加载。无论用户身处何地，都可以快速访问网站内容，提升用户体验和网站性能
+3. Vercel 可以配置自定义域名，提供免费的 HTTPS 证书，通过简单的配置，就可以将项目部署到自己的域名上，还享受 HTTPS ，香
+
+## 使用此项目做一个自己的 blog
+
+如果你希望使用这个项目作为自己的 blog，非常简单，只需要三步，
+
+### fork 项目 + 修改网站 SEO 信息
+
+1. 首先 fork 项目，然后去 `src/config/site.ts `  这里放着网站的所有元信息，修改对应的内容为自己的就好，
+2. 然后去创建 .env 复制 .env.example 的代码，把对应的数据改为自己的。
+3. 全局搜索 luckysnail 不要限制大小写，替换为自己的名称
+4. 去 `.github/workflows/sync-post.yml` 修改 user.name 和 user.email 为自己的
+5. 我把 github issues 的帖子放在了 `data/blog` ，但是我可能还有一些帖子不在 github issues ，我将其放在了 posts 下，你可以删除我的添加你自己的
+6. 去 package.json 修改一些包的信息为你自己的 
+7. 去 public 和 assests 把一些静态资源替换为你自己的
+
+做完这些，你就得到了一个你自己的 blog ，现在就可以 push 代码，然后登录 vercel 部署你的 blog 了，部署其实非常简单，但是最好在本地先部署并运行看一下，看看是否可以成功。vercel 部署可以参考：`https://juejin.cn/post/7143067114025254919` 。部署好了之后我们应该可以看到类似这样
+
+![image-20240808090833701](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20240808090833701.png)
+
+它给我们免费的有域名，我们可以点击查看我们的在线链接，这时候就可以把我们的 blog 分享出去了，我们如果主要是国内访问，我们会发现国内访问很慢，我推荐大家买一个国内的域名，在 settings 下的 domains 中进行绑定，然后我们使用绑定的国内域名访问，就会很快啦！
+
+## TODO
+
+后面，我打算使用 nest.js 作为后端，来为我的 blog 开发 点赞，访问数，游览数，帖子存储，评论，留言等功能
+
+- [ ] 友链
+- [ ] 登录
+- [ ] 评论
+- [ ] 留言板
+- [ ] 搜索 🔍
+- [ ] 收藏夹
+- [ ] 帖子同步平台展示
+
+## 感谢
+
+其实自己开发之前我尝试了很多现成的 blog 方案，因为自己从 0 到 1 开发，需要做很多工作。但是发现现成的方案都不是很适合我。在我开发这个 blog 的时候，我参考了很多我觉得不错的 blog。下面是我参考的和看过源码的 blog
+
+- 在设计和 UI 上，我“抄”了很多：`https://cali.so/` 。这是一个开源的 blog（我的也开源啦）
+- https://www.giscafer.com/
+- https://innei.in/
+- https://fuxiaochen.com/
+- https://starter.weijunext.com/
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/7" target="_blank">github issues</a>