? 如何开发个人博客 :

你需要个人博客吗?

现在各大社区都可以发布自己的文章,并且非常之完善,比如掘金,比如知乎等等!

确定你的需求,可以是锻炼技术,可以是喜欢个人随心的布置等等!

如果你需要个人博客

有现成的静态站点供你选择

等等....

开箱即用,也是最受欢迎的模式,如果你对个性化定制没有非常高的要求,这些静态站点生成器对你来事已经是绝佳的了!

使用一键部署

比如

等等....

这些都是我以前使用过的,支持丰富的主题,还有很强大的社区!

如果你并不止步于此!那就跟我一起看看一个最简单的博客如何在你手中诞生!

我想要自己搭建!

技术选型

那可太多了!选你想学的就行了,不用管会不会!

我的选择是Next.js,如果你选择其他的,那就可以省流了!

选择了框架就可以选择UI了,我这里推荐shadcn-ui

如果你要发布文章,就涉及到鉴权,毕竟不是所有人都能在你的网站上发布,还涉及到存储,因此数据库就必不可少了

Next.js中鉴权可以使用NextAuth.js这个库

数据库我们可以自行选择想要的,我这里图方便选择的mongodb

画个图看看

基本链路已经走通,原来自己搭建也不是什么难事啊!

富文本编辑器

流程清楚了,如何展示文章,编辑文章呢,这里就涉及到富文本编辑器了!

富文本编辑器其实是个博客站点的灵魂了

有非常多优秀的富文本编辑器可以供大家选择,比如原作者已经暂停维护的wangeditor

这里我个人选择的是react-mde

我个人喜欢比较简洁的界面,以及这个编辑器可以自定义预览,自定义按钮等,因此定制性比较强!

我可以写一些mdx在里面,并且使用自己的预览展示mdx,这是一件很nice的事情!!就如同上面的SandPack一样!

解析mdx

这里我使用了next-mdx-remote

组合的效果非常好这是我的编辑页面

也支持暗黑模式

当然还有全屏

这是我的预览页面

可以看出我已经自定义了很多按钮

这些按钮都是我封装的一些操作和mdx组件

这样使用起来也更加方便

图片上传

这个推荐使用阿里云的oss,其实也有很多对象存储,比如七牛云的等等,我个人是用服务器搭建了开源的一个图床lsky pro

然后根据文档进行配置和使用就可以了。

最后

我目前的博客

网址 next.blackcell.fun/

支持的组件

为什么不分享其中开发细节?

可以看到 我已经将开发个人博客使用的最基本的东西已经阐述了,具体开发过程肯定是百花齐放

希望大家能够在开发个人博客时遇到一些问题,并且自己去解决一些问题,这样自己的实力才能有所提升!

其次我的个人博客也仅在试运行阶段,当其稳定,功能健全后,会将源码发布在github上,大家可以关注我的github

关于部署

这就是涉及到CI/CD的层面,有时间会发布一篇文章,来讲解我是如何进行持续部署的!

讨论

可以到评论区下讨论,进行一些问题的解答!

相关推荐
麦兜*10 分钟前
Spring Boot启动优化7板斧(延迟初始化、组件扫描精准打击、JVM参数调优):砍掉70%启动时间的魔鬼实践
java·jvm·spring boot·后端·spring·spring cloud·系统架构
大只鹅33 分钟前
解决 Spring Boot 对 Elasticsearch 字段没有小驼峰映射的问题
spring boot·后端·elasticsearch
小白变怪兽33 分钟前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头36 分钟前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
IT_10241 小时前
Spring Boot项目开发实战销售管理系统——数据库设计!
java·开发语言·数据库·spring boot·后端·oracle
bobz9651 小时前
动态规划
后端
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
stark张宇2 小时前
VMware 虚拟机装 Linux Centos 7.9 保姆级教程(附资源包)
linux·后端