? 如何开发个人博客 :

你需要个人博客吗?

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

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

如果你需要个人博客

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

等等....

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

使用一键部署

比如

等等....

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

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

我想要自己搭建!

技术选型

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

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

讨论

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

相关推荐
GISer_Jing7 分钟前
Vue3状态管理——Pinia
前端·javascript·vue.js
好开心3322 分钟前
axios的使用
开发语言·前端·javascript·前端框架·html
Domain-zhuo32 分钟前
Git常用命令
前端·git·gitee·github·gitea·gitcode
菜根Sec1 小时前
XSS跨站脚本攻击漏洞练习
前端·xss
0zxm1 小时前
06 - Django 视图view
网络·后端·python·django
m0_748257181 小时前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工1 小时前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
小_太_阳2 小时前
Scala_【1】概述
开发语言·后端·scala·intellij-idea
百万蹄蹄向前冲2 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
智慧老师2 小时前
Spring基础分析13-Spring Security框架
java·后端·spring