Skip to content

Latest commit

 

History

History
70 lines (47 loc) · 2.45 KB

README.md

File metadata and controls

70 lines (47 loc) · 2.45 KB
Raw

豆米博客

新版豆米博客为了正确使用SEO，并提高网站的渲染性能，使用Next.js来进行SSR。

整个项目没有借助第三方的Nodejs框架，完全使用Next.js提供的能力，另加如下包：

  • typeorm：对接Mysql数据库（因为旧版博客也是用的这个，为了保证迁移过来的成本最小，本来想用prisma的）
  • next-auth：用于做登录校验
  • winston：用于做日志打印
  • @mui：组件库（沿用之前旧版的博客页面组件，避免太大改动）
  • @giscus/react：整合github提供的Discussion能力，集成为博客的评论系统
  • echarts：图表组件库

开发

  • 先安装包：pnpm i

  • 初始化本地MYSQL数据库；

  • 启动：pnpm dev;

  • 打开浏览器：http://localhost:3000；

添加新表

CREATE TABLE visitcity (
  id INT AUTO_INCREMENT PRIMARY KEY,
  cityName VARCHAR(200) NOT NULL UNIQUE,
  count BIGINT,
  createdAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  updatedAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
ALTER TABLE `article`
ADD COLUMN `updatedTime` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP;

开发遇到的问题

  • 使用最新的mysql服务器的时候，之前配合的是mysql包，在新版mysql8中会报错：Client does not support authentication protocol requested by server; consider upgrading MySQL client，解决办法是：替换mysql包为mysql2即可；

  • 解决Next.js环境变量的问题： Default Environment Variables

  • 解决pnpm build的时候报错：Route Segment Config

更多问题参考博客：

部署

  • 全局安装pm2：
pm2 start --name doumiblog pnpm -- start

部署相关文章参考博客：

待办

  • 目前的markdown对于一些代码的解析以及引用的样式不好看，优化一下；
  • 对比lighthouse进行极限优化
  • 使用两个layout文件，而不需要每个文件都放BlogContainer组件
  • 思考一种方式进行api的异步错误捕获，并统一返回数据结构
  • 数据管理增加地图展示访问的来源分布在全国哪些省份
  • 博客首页增加按照分类、标签、归档的方式展示文章
  • 移动端版本，方便后续作为公众号方式推出