? 如何开发个人博客 :

你需要个人博客吗?

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

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

如果你需要个人博客

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

等等....

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

使用一键部署

比如

等等....

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

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

我想要自己搭建!

技术选型

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

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

讨论

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

相关推荐
Asthenia04127 分钟前
JUC:CompletableFuture 详细用法讲解
后端
freejackman27 分钟前
MySQL 基础入门
数据库·后端·sql·mysql
Hamm36 分钟前
用一种全新的方式来实现i18n,和魔法字符串彻底说拜拜
前端·vue.js·typescript
Asthenia041236 分钟前
一名实习生的复盘:技术与规划的经验教训
后端
Asthenia04121 小时前
从面试问题看端口连通性:Ping、TCP/UDP与业务实践
后端
摸鱼仙人~1 小时前
React: hook相当于函数吗?
前端·javascript·react.js
百锦再1 小时前
React编程高级主题:错误处理(Error Handling)
前端·javascript·react.js·前端框架·vue·web·angular
阿里巴巴首席技术官1 小时前
CSS 高级用法
前端·css
程序员一诺1 小时前
【爬虫开发】爬虫开发从0到1全知识教程第14篇:scrapy爬虫框架,介绍【附代码文档】
后端·爬虫·python·数据
墨绿色的摆渡人1 小时前
论文笔记(七十五)Auto-Encoding Variational Bayes
前端·论文阅读·chrome