起因

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

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

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

访问地址：https://www.iamsee.top/

Github: https://github.com/chansee97/nuxt-blog

特点

  • nuxt3技术栈，ssr渲染，对seo更加友好
  • 适配移动端布局
  • 页面载入、暗色模式过渡动画简约优雅
  • 使用markdown作为文章格式
  • 基于md文档元数据的tag分类功能
  • 文章搜索功能
  • 基于giscus的文章评论功能
  • 在antfu的基础上修改了一些布局样式
  • 抽离网站信息配置，减少修改心智负担
  • 引入51LA站点统计,网站访问流量一目了然

页面预览

pc

移动端

如何使用

  1. 克隆仓库到本地
  2. 修改site.config网站信息和社交链接
  3. 根据需要修改或删除nuxt.config.ts中的引入的访问统计脚本（51LA）
  4. 修改content文件夹内的文章
  5. 提交至自己的仓库
  6. 部署至vercel等托管网站（确保每次提交自动构建）
  7. 访问托管网站配置的地址，有条件可以配置自己的域名

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

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

使用 nuxt3 开发简约优雅的个人 blog的更多相关文章

  1. Django博客开发教程,Django快速开发个人blog

    学DjangoWEB框架,估计大部分的朋友都是从Blog开发开始入门的,Django中文网发布了一个Django开发教程,这个教程简单易懂,能让你快速的使用Django开发一个漂亮的个人blog,是D ...

  2. 🏆【Java技术专区】「开发实战专题」Lombok插件开发实践必知必会操作！

    前言 在目前众多编程语言中,Java 语言的表现还是抢眼,不论是企业级服务端开发,还是 Andorid 客户端开发,都是作为开发语言的首选,甚至在大数据开发领域,Java 语言也能占有一席之地,如Ha ...

  3. django创建blog

    如果本文看不懂的,去看的我视频吧!http://www.testpub.cn/ ------------------------------------------- Django 自称是" ...

  4. 用Nginx+Lua(OpenResty)开发高性能Web应用

    在互联网公司,Nginx可以说是标配组件,但是主要场景还是负载均衡.反向代理.代理缓存.限流等场景:而把Nginx作为一个Web容器使用的还不是那么广泛.Nginx的高性能是大家公认的,而Nginx开 ...

  5. iOS开发----优秀文章推荐

    UI界面 iOS和Android 界面设计尺寸规范  http://www.alibuybuy.com/posts/85486.html iPhone app界面设计尺寸规范  http://www. ...

  6. django 快速搭建blog

    如果本文看不懂的,去看的我视频吧!http://www.testpub.cn/ ------------------------------------------- Django 自称是“最适合开发 ...

  7. Nginx+Lua(OpenResty)开发高性能Web应用

    使用Nginx+Lua(OpenResty)开发高性能Web应用 博客分类: 跟我学Nginx+Lua开发 架构 ngx_luaopenresty 在互联网公司,Nginx可以说是标配组件,但是主要场 ...

  8. Wifi开发技术总结1

    摘要: 刚刚接触wifi开发的东西,用的模块是 ESP8266-12E. 资料很多,淘宝地址:https://item.taobao.com/item.htm?spm=a1z09.2.9.10.qGL ...

  9. JAVA EE企业级开发四步走完全攻略 [转]

    http://bbs.51cto.com/thread-550558-1.html 本文是J2EE企业级开发四步走完全攻略索引,因内容比较广泛,涉及整个JAVA EE开发相关知识,这是一个长期的计划, ...

  10. linux ubuntu装机到可实现java（eclipse，intellij IDEA，android）开发全过程

    前言:linux是个很强的东西,你可以在其中体验开发的神速,有如神助,但是同时系统的不完整,错误漏洞多也是ubuntu等系统的诟病,所以大家遇到任何问题,第一时间请淡定,随后百度,google一下吧, ...

随机推荐

  1. [Windows/CMD]不重启设置/刷新环境变量

    1 文由 当我已经通过如下路径设置了Maven的环境(maven-3.5.4). "我的电脑"->"属性"->"高级"-> ...

  2. 开源Apinto网关-流量策略

    背景介绍 Apinto是一款高性能.可扩展.易维护的API网关. Apinto网关基于GO语言模块化开发,5分钟极速部署,配置简单.易于维护,支持集群与动态扩容,企业级开箱即用.Apinto除了提供丰 ...

  3. IT技术相关学习网站推荐

    引入在线jQuery的地址   http://code.jquery.com 唠嗑吧 IT技术经验交流    http://www.laodao8.com 博学谷视频库  传智播客   http:// ...

  4. Django基于一对多的正向查询和反向查询

    1.正向查询 obj = models.User.objects.get(name='longge') name = obj.group.name print(name) # 肖邦组 2.反向查询 & ...

  5. Docker Compose 部署GitLab

    先决条件 Docker Engine和Docker Compose是必需的.请参阅在CentOS上安装Docker Engine. 建议使用4核的服务器,同时至少分配4G的内存,理论上4核4G可最多支 ...

  6. T-SQL基础教程Day3

    第三章 联接3.1交叉联接交叉联接是最简单的联接类型.交叉联接仅执行一个逻辑查询处理阶段--笛卡尔乘积将一个输入表的每一行与另一个表的所有行匹配SQL Server支持交叉联接的两种标准语法:ANSI ...

  7. 我的OpenAI库发布了！！！

    chatGPT正式发布已经有段时间了,这段时间我也深度体验了chatGPT的魅力. OpenAI除了提供网页版的chatGPT,还通过api的形式提供了很多其它服务,包括文字纠错.图片生成.音频转换等 ...

  8. HTML+CSS仿写的登录页面

    仿写的登录页面 使用HTML+CSS,感觉很简单,记录下 话不多说,直接上代码 <!DOCTYPE html> <html lang="en">     & ...

  9. [Tensorflow]模型持久化的原理，将CKPT转为pb文件，使用pb模型预测

    文章目录 [Tensorflow]模型持久化的原理,将CKPT转为pb文件,使用pb模型预测 一.模型持久化 1.持久化代码实现 convert_variables_to_constants固化模型结 ...

  10. ACID和CAP特性

    文章目录 ACID和CAP理论 ACID CAP ACID和CAP理论 ACID **atomicity(原子性):**所有的事务要么都成功要么都失败, **consistency(一致性):**执行 ...