在前端技术不断变革得时代，必须养成一个良好学习习惯。而博主又是一个自制力很差得人，而为了学而去学，对我来说效率也是很低的。
后来某一天我就突发奇想，既然我是一个前端，为啥不做一个只属于自己的网站，用来学习，记录自己。这样应该更有成就感且学起来也有动力，还能把自己的所学展示给别人看，慢慢这个想法越来越强烈。
我先是尝试了 vuepress 和 Hexo 等静态博客。但这类博客只可少量定制化，没有后台管理，每次更新文章还得重新发版，非常难受。我希望我自己的博客在我手中完全可控，一丝一毫都可以被我掌握，通过后台管理页面，可以实时更新、发布文章，非常方便这样才显得安心和舒适。
于是在 22 年 4 月份开始，我才下定决心，从零开始一点一点码出了这个博客，前端、后端、部署上线，域名配置均由我自己独立完成。求指点~
克隆代码后，运行以下命令:
安装依赖
本地运行代码
打包代码
部署代码
| 目录 | 描述 |
|---|---|
| assets | 静态目录 |
| components | 公共组件 |
| config | router、store 等配置文件 |
| hooks | 自定义 hooks |
| Layout | 博客布局 |
| style | 公共样式 |
| types | 全局 typescript 类型定义 |
| utils | 公共工具函数 |
| views | 所有路由模块 |
- 首页、文章、日志、留言、友情链接、作品、关于等页面模块。
- 登录（包括 qq 和微信登录）
- 主题切换、黑夜模式、回到顶部 (侧边小工具栏)
- 用户可以评论与回复、以及邮件通知回复的状态
- 背景音乐（左下角播放器）
- 文章锚点导航
- 文章置顶
- 移动端适配：媒体查询+rem
- 全局搜索
- 免费 chatgpt，官方 api 接口，无需梯子，速度快 ....
所有前台数据的增删改查、登录、游客访问
可以省略域名前缀访问
http 访问自动跳转 https
- 博客前台：(基于 CRA 搭建) react18 + antd5 + redux + tsx
- 博客后台：(基于 vue-cli 搭建) vue3 + element plus
- 后端：(自建 nodejs 后台项目) koa2 + mysql
- 部署上线：腾讯云 CentOS + nginx + pm2
- 全站使用了 cdn 加速
- 全站静态资源设置了强缓存
- 全站使用了 http2
- 所有图片使用了懒加载
- 所有路由模块使用了懒加载
- 背景图、背景音乐使用了预加载
- 文章，日志等使用了下拉加载
- 搜索防抖，下拉监听节流
- 网站首次加载有 loading 效果，而不是白屏
除了 react、antd，其他我尽量使用自己封装的组件，hooks，工具函数等。基本没有使用第三方的依赖。一是为了减小代码体积，二是培养自己的封装能力
我已经把我这个网站封装的所有函数做成了一个 npm 包《npm i hyl-utils》。有 ajax、cookie、时间格式化等工具函数，都是使用原生 js 封装，如果有需要也可以自取的哈
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent