? 如何开发个人博客 :

你需要个人博客吗?

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

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

如果你需要个人博客

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

等等....

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

使用一键部署

比如

等等....

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

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

我想要自己搭建!

技术选型

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

我的选择是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的层面,有时间会发布一篇文章,来讲解我是如何进行持续部署的!

讨论

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

相关推荐
代码匠心3 分钟前
从零开始学Flink:状态管理与容错机制
java·大数据·后端·flink·大数据处理
分享牛4 分钟前
LangChain4j从入门到精通-11-结构化输出
后端·python·flask
星夜落月32 分钟前
Web-Check部署全攻略:打造个人网站监控与分析中心
运维·前端·网络
冰暮流星42 分钟前
javascript之双重循环
开发语言·前端·javascript
爱敲点代码的小哥1 小时前
C#视觉模板匹配与动态绘制实战(绘制和保存,加载tb块,处理vpp脚本的方式)
前端·javascript·信息可视化
南风知我意9571 小时前
【前端面试3】初中级难度
前端·javascript·面试
知识即是力量ol1 小时前
在客户端直接上传文件到OSS
java·后端·客户端·阿里云oss·客户端直传
霍理迪1 小时前
JS作用域与预解析
开发语言·前端·javascript
闻哥1 小时前
深入理解 Spring @Conditional 注解:原理与实战
java·jvm·后端·python·spring
切糕师学AI1 小时前
.NET Core Web 中的健康检查端点(Health Check Endpoint)
前端·kubernetes·.netcore