使用 nuxt3 开发简约优雅的个人 blog

起因

很早前我就有过搭建个人博客的想法,但是我希望使用纯前端实现,这样就不需要付出额外的后端维护成本,维护成本又低,而且更加安全。网上也有很多博客框架但是也不符合我的需求,所以我使用了nuxt3 + ts搭建了自己的个人博客,更加贴合个人需求,在功能和样式也能做到随心所欲

前端的同学一定不会陌生antfu,作为活跃的前端开源开发者的博客自然也是少不了光顾antfu.me

他的博客风格我非常喜欢,简约精致没有赘余的部分,所以我模仿了antfu的风格基于nuxt3 + unocss + Ts搭建了一个博客站点

访问地址:www.iamsee.top/

Github: github.com/chansee97/n…

特点

  • nuxt3技术栈,ssr渲染,对seo更加友好
  • 适配移动端布局
  • 页面载入、暗色模式过渡动画简约优雅
  • 使用markdown作为文章格式
  • tag分类查看功能
  • 文章搜索功能
  • 在antfu的基础上修改了一些布局样式
  • 抽离网站信息配置,减少修改心智负担

页面预览

pc

使用 nuxt3 开发简约优雅的个人 blog

使用 nuxt3 开发简约优雅的个人 blog

使用 nuxt3 开发简约优雅的个人 blog

使用 nuxt3 开发简约优雅的个人 blog

移动端

使用 nuxt3 开发简约优雅的个人 blog

使用 nuxt3 开发简约优雅的个人 blog

如何使用

  1. 克隆仓库到本地
  2. 修改site.config网站信息和社交链接
  3. 修改content文件夹内的文章
  4. 提交至自己的仓库
  5. 部署至vercel等托管网站(确保每次提交自动构建)
  6. 访问托管网站配置的地址,有条件可以配置自己的域名

至此博客部署完成,后续只要每次向content添加文章并提交仓库便可以更新博客,也可以根据需要开发合适自己的功能

无论你是有学习nuxt3开发或者是博客搭建的需求,这个项目都是一个不错的学习内容

原文链接:https://juejin.cn/post/7232120266804969528 作者:chansee97

(0)
上一篇 2023年5月13日 上午11:07
下一篇 2023年5月14日 上午10:00

相关推荐

发表回复

登录后才能评论