送你一个从零开发的二次元个人博客

8,423 阅读3分钟

前言

本篇文章主要是开源自己的个人博客,先贴一下个人博客地址:孙玉超个人博客 不太适配手机端, PC 端样式还是蛮好看的。其实很久之前就有网友问我能不能开源个人博客代码,当时没有开源其实是不太好意思,感觉代码比较乱,毕竟是我刚毕业的时候开发的,准备优化优化再考虑。不过工作越来越忙,人也越来越懒......很久没有去维护了,还是直接开源出来吧,让更多有需要的人来使用,文末会贴 github 地址。说实话,这个项目代码难度虽然不怎么样,但是涉及的技术点挺多的,搭建在云服务器上,简历上绝对是面试的加分项。

项目介绍

这个博客项目是我 2019 年 7 月开发的,2019 年 11 月正式上线,从 UI 设计 -> 前端开发 -> 后端开发 -> 测试 -> 部署维护什么的都是我自己,感触还是蛮深刻的,一套流程下来学习了很多。强烈建议初学者搭建起来学习,体验一个项目从开发到上线的感觉。

项目前端技术

原生 HTML + CSS + JavaScript + Layui + 一些小插件,比如二次元看板娘、点击页面弹爱心等。除了 HTML 的 head 标签中的 CSS 代码,很多 CSS 文件放在了 nginx 静态文件中

项目后端技术

Thymeleaf + SpringBoot + SpringMVC + MyBatis-Plus + Redis + MySQL + ElasticSearch + Nginx + RabbitMQ 当时也是出于学习,所以强行用了一些技术组件,不过正好如果你不熟悉的话还可以当个 demo 看,如果不想用这些组件,从代码中删除即可,也很方便。

项目部署

所有应用都是用 docker-compose 部署,所有的 docker-compose.yml 配置文件也都放在了 github,只需要在服务器上安装 docker-compose,用相关命令直接 docker 启动即可

项目结构

项目总共有三个应用

  • 网站主应用
  • 在线工具应用
  • 后台管理系统

项目目录结构:

image.png

  • blog-core-application-service —— 网站主应用
  • blog-core-onlineutils-service —— 在线工具应用
  • blog-core-manage —— 后台管理系统
  • blog-core-utils —— 所有应用的工具类,打成 jar
  • blog-core-dao —— 所有应用的实体类和 Mapper ,打成 jar
  • docker-compose —— 所有应用和技术软件的 docker-compose 部署相关

部署/启动过程注意

首先需要把这些环境准备好,将程序中的 application.yml 配制文件里的数据库地址、Redis 地址、RabbitMQ 等连接信息配置好

image.png

我的项目采用 zimg 做图片服务器,如果你有自己的图片服务器比如阿里云 OSS 等,就不用启动 zimg。换下项目中的图片地址即可,另外项目中引入了很多静态资源是我的域名,需要改成你自己的。

image.png

项目中使用了很多字体图标是从阿里巴巴矢量图标库 拿的。

结语

这套项目没有业务难度,都是非常简单的增删改查,便于理解。涵盖了 SpringBoot、拦截器、MyBatis-Plus、Lombok、Redis、RedisSession、ElasticSearch、RabbitMQ 等等技术点,虽然前端技术比较落后,也强烈推荐新手学习。

即使不想学习代码,也可以直接部署起来就好,功能几乎比较齐全,无需改动源代码~

Github 代码地址:个人博客代码

关于博客有任何问题可以问我,如果这篇文章对你有帮助,不要白嫖,记得点赞加关注。你的支持就是我继续创作的动力!