博客系统
快来分享你的内容吧～
2024-08-09·全栈开发
2023-02-04鱼皮，想问一下有没有必要将迭代版本之前的项目的网址放到简历上（在简历上写了更新之后的技术栈）。 我之前自己写了一个博客，后面我把新学的技术放到了这个博客项目（加了ES和消息队列），当时买的是 1 核 2G 的服务器，现在感觉 1 核 2G 服务器应该跑不起来这个博客了，不知道要不要把这个博客的网址放在简历上面（上面跑的还是没有更新之前的项目）。查看全文程序员鱼皮：回答优胜劣汰，简历内容不够，就写上；有更好的，就不写。看了你的简历，我建议你写上地址吧。整体感觉行间距有点小了，略挤专业技能这块没什么问题，可以把前端放到最后去写项目电商第一点写的不完整，什么场景下你要用 Canal？用它相对于其他数据同步方式有什么优点？将接口响应时间从50ms降低至21ms。 => 加个平均响应时间吧，这个提升很玄学。为应对流量高峰，使用RabbitMQ将提交订单减少库存等消息242分享- 2022-12-26
项目上线 + 个人博客
## 1、我的第一个上线项目：《荒梦云图库》 项目体验地址：https://pichm.cloud 项目文档 (纯后端，9 w 字左右)：https://www.yuque.com/adzhang/ogrqy7 项目仓库：https://gitee.com/xiao-jinglong/cloud-image-library 具体项目功能没什么好说的，还是那些，顶多算是加了个策略模式一行代码切换本地缓存与 Redis 缓存？ 本人前端只会 HTML、CSS，是全程跟着 [鱼皮大佬](https://www.codefather.cn/user/1601072287388278786) 敲得。 后端借鉴了大佬的开源云图库项目，本人没有实习经历 (技术一般)，正在准备。在这里衷心感谢 @暴龙 大佬，通过大佬的 [暴龙图库](https://picture.baolong.icu/) 开源仓库，学到了很多经验，真的感谢！！！🥰🥰🥰 > 好像用 Markown 写的文章 @ 不了用户？那就放一个 [暴龙大佬的主页](https://www.codefather.cn/user/1631593416829796353)，感谢感谢🙏🙏🙏 下面是上线项目的主页：  架构图 (忽略没用到却硬加的部分，主要是为了图更美观)：  ## 2、个人博客搭建 八股最近看的实在是头昏脑涨，一点儿都看不下去。于是捣鼓了一个博客出来。 体验地址：https://bczblog.online 目前就写了几篇跟八股相关的内容，个人觉得写的还行，感兴趣的朋友可以看看😀😀😀    博客是使用 Hexo 框架 + Butterfly 主题搭建的，使用的是腾讯云 COS + PicGo 搭建的图床，使用 Github Pages 托管的。 就是简单捣鼓了一下，没有做什么特别的美化，后续可能会考虑美化~~~ 后续也会逐步分享一些其他的知识，也会考虑编写 "搭建并自定义博客" 的教程文章。 > 个人强推：[分布式锁](https://bczblog.online/2025/08/23/%E5%88%86%E5%B8%83%E5%BC%8F/%E5%88%86%E5%B8%83%E5%BC%8F%E9%94%81%E4%BB%8B%E7%BB%8D%E5%8F%8A%E5%9F%BA%E6%9C%AC%E5%8E%9F%E7%90%86/)、[缓存一致性](https://bczblog.online/2025/08/25/Redis/%E5%A6%82%E4%BD%95%E4%BF%9D%E8%AF%81%E7%BC%93%E5%AD%98%E4%B8%8E%E6%95%B0%E6%8D%AE%E5%BA%93%E7%9A%84%E4%B8%80%E8%87%B4%E6%80%A7/) 这两篇博客，非常正宗的八股回答，面试能说出来绝对加大分了 (个人认为，嘿嘿)🥰🥰🥰  
如何使用Next.js和GitHub Issues构建个人博客:从零到上线的完整指南
> 本文详细介绍了如何使用Next.js、GitHub Issues和Vercel从零开始构建并部署个人博客。包含技术栈选择、需求分析、开发过程和部署步骤等完整指南。 大家好，我是幸运的蜗牛，今天来分享我最近从 0 到 1 开发的 个人blog， 幸运的蜗牛的博客：https://www.luckysnail.cn/ 不知道大家是否有自己的 blog，或者想要做一个自己的 blog。我觉得有一个自己的 blog 还是很酷的事情，下面看我是如何从 0 到 1 实现个人 blog，先给大家看一下 blog 首页效果图 <img src="https://pic.code-nav.cn/post_picture/1619930914211520514/b4Jbd0dtsxGqwFAn.webp" alt="image-20240808012907019" width="100%" /> ## 背景 虽然我经常在CSDN、掘金和微信公众号等平台发布文章，这些平台编辑体验也很好 ，还自带流量，对内容分享的人来说，是非常友好的，但我一直希望能够拥有一个完全属于自己的博客平台。之前我尝试过使用Hexo、Docusaurus 和基于其他项目（`https://giscafer.com/`） Next.js 博客方案，但都不能完全满足我的需求。 受到许多技术大佬个人博客的启发，加上我最近在学习Next.js（冴羽的 Next.js 掘金小册），我决定从零开始打造一个属于自己的博客系统。 这次开发之前，我是想要直接修改开源的 blog （`https://cali.so/` ），fork 这个项目来进行二创，我也是这样做的，我都改了很多东西了，但是一个非常难受的点，就是它使用的都是国外的服务，尤其是 sanity ，我本地连接会经常连不上，非常影响开发体验，而且它的源码，很多是我不需要的，综合考虑就下定决定要做一个自己的 博客 ## 需求梳理 确定要自己开发了，就需要梳理一下我需要做一个什么样子的 blog 。blog 核心就是文章。那么**就需要解决文章如何增删改查**。由于我对 MySQL 不熟，而且我也不希望在 Next.js 中开发后端，我选择了使用 GitHub Issues 来存储文章数据。整个工作流程如下： 1. 使用 GitHub Issues 管理文章 2. 通过 GitHub Actions 监听 Issues 变化 3. 将 Issues 转换为文章内容 4. 部署项目到 Vercel 5. 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 分数 <img src="https://pic.code-nav.cn/post_picture/1619930914211520514/ul71iGZdUjzjlu5U.webp" alt="image-20240808082948886" width="100%" /> 还是挺不错的， ## 技术栈 我是先做了一个基础干净的 [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 项目 + 修改 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` 。部署好了之后我们应该可以看到类似这样 <img src="https://pic.code-nav.cn/post_picture/1619930914211520514/sijHS7zCKm6H8LHt.webp" alt="image-20240808090833701" width="100%" /> vercel 会提供三个免费域名给我们，我们可以访问链接查看我们部署在 vercel的 blog，这时候就可以把我们的 blog 分享出去，但我们如果主要是国内访问，我们会发现国内访问很慢，我推荐大家买一个国内的域名，在 settings 下的 domains 中进行绑定，然后我们使用绑定的国内域名访问，就会很快啦！ ## TODO 后面，我打算使用 nest.js 作为后端，来为我的 blog 开发 点赞，访问数，游览数，帖子存储，评论，留言等功能 - [ ] 友链 - [ ] 登录 - [ ] 评论 - [ ] 留言板 - [ ] 搜索 🔍 - [ ] 收藏夹 - [ ] 帖子同步平台展示 ## 感谢 通过这个项目，我不仅实现了自己的博客系统，还深入学习了 Next.js、GitHub Actions 和 Vercel 部署等技术。希望这篇文章能够帮助到想要搭建个人博客的朋友们。在我开发这个 blog 的时候，我参考了很多我觉得不错的 blog。下面是我参考的和看过源码的 blog，感谢它们的开源 - 在设计和 UI 上，很多都是参考了：`https://cali.so/` 。这是一个开源的 blog（我的也开源啦） - https://www.giscafer.com/ - https://innei.in/ - https://fuxiaochen.com/ - https://starter.weijunext.com/
大三-Java后端-实习简历
<p>鱼皮，想问一下有没有必要将迭代版本之前的项目的网址放到简历上（在简历上写了更新之后的技术栈）。</p><p></p><p>我之前自己写了一个博客，后面我把新学的技术放到了这个博客项目（加了ES和消息队列），当时买的是 1 核 2G 的服务器，现在感觉 1 核 2G 服务器应该跑不起来这个博客了，不知道要不要把这个博客的网址放在简历上面（上面跑的还是没有更新之前的项目）。</p>
luokr.com
地址：https://github.com/alvan/luokr.com
My-Blog-layui
layui 版本的 My-Blog : A simple & beautiful blogging system implemented with spring-boot & layui & thymeleaf & mybatis My Blog 是由 SpringBoot + Layui + Mybatis + Thymeleaf 等技术实现的 Java 博客系统，页面美观、功能齐全、部署简单及完善的代码，一定会给使用者无与伦比的体验 地址：https://github.com/ZHENFENG13/My-Blog-layui
VBlog
地址：https://github.com/lenve/VBlog
NiceFish
地址：https://github.com/damoqiongqiu/NiceFish
My-Blog
页面美观、功能齐全、部署简单及完善的代码，一定会给使用者无与伦比的体验。 地址：https://github.com/ZHENFENG13/My-Blog
Halo
Halo 开源博客可选主题，自定义图床，可配置邮件发送，功能比较多。一直在维护的一个开源博客项目！ 地址：https://halo.run/