首页 > 其他分享 >使用 nuxt3 开发简约优雅的个人 blog

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

时间:2023-06-27 11:56:24浏览次数:58  
标签:简约 nuxt3 antfu 博客 blog 搭建

起因

很早前我就有过搭建个人博客的想法,但是我希望使用纯前端实现,这样就不需要付出额外的后端维护成本,维护成本又低,而且更加安全。网上也有很多博客框架但是也不符合我的需求,所以我使用了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

image.png

image.png

image.png

image.png

image.png

移动端

image.png

image.png

如何使用

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

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

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

标签:简约,nuxt3,antfu,博客,blog,搭建
From: https://www.cnblogs.com/wanna2leo/p/17508286.html

相关文章

  • Blog3
    (1)前言:第7次PTA是沿袭之前的菜单题,这个题对之前的PTA题目集的完成度依赖很大,所以难度相较于成绩题更难一些。第8次PTA是成绩的第一题,开始我想采用对象数组进行编程,发现使用起来特别不方便,后来学习了set和map,在之后的成绩题目中全部改用set和map,不仅使用更加方便,得到的分数也......
  • 超简约前端点击图片弹窗放大(手机端)
    .markImg{width:100%;height:100%;position:fixed;left:0;right:0;bottom:0;top:0;background:rgba(0,0,0,0.5);padding:15px;box-sizi......
  • pyblog
    博客园上传markdown文件......
  • 基于.NetCore开发博客项目 StarBlog - (29) 开发RSS订阅功能
    前言最近忙中偷闲把博客的评论功能给做完了,我可以说这个评论功能已经达到「精致」的程度了......
  • pta题目集7~11总结性Blog
    前言:第七次题目集:本次题目集是菜单计价系统的一次迭代,在原有功能的基础上对输入的特色菜分为川菜,晋菜和浙菜三类,并在最后输出一桌的价格的时候还要将三种特色菜的点菜的口味程度一起输出,还要求对每位顾客的姓名和手机号进行格式的规范。本次题目需要在之前的菜单计价系统的基础之......
  • BLOG3
    一、前言通过一个学期的学习,我们终于结束了面向对象程序设计这门课,在过去的几周时间内,我们进行了实验、pta以及最后的期末考试,课程虽然结束了,但需要学习和巩固的知识点还有很多,这也是最后一次blog总结。      显而易见,这两次的PTA作业所考察的知识点以及难度呈现不......
  • Yqw-Blog-3
    Yqw第三次博客作业目录Yqw第三次博客作业前言总结所涉及到的知识点、题量、难度等情况设计与分析成绩统计程序-1代码:分析:成绩统计程序-2代码:分析:动物发声模拟器(多态)成绩统计程序-3代码:分析:踩坑心得改进建议总结前言⭕好久不见,这是这个学期最后一次Blog啦,为期一学期的java学习......
  • PTA题目集6-8的总结性Blog
    一、前言在这个PTA题目集中,涉及到了成绩计算中所需要的各种计算方式,容器-HashMap,容器-ArrayList,以及 jmu-Java-02基本语法和接口-自定义接口等方面的知识。总体来说,难度适中,但需要考生对这些概念有一定的了解。二、设计与分析首先是7-1容器-HashMap-检索输入多个学生的成绩......
  • BLOG-3
    第6-8次大作业总结博客/*全文字数4000+*/ 一、前言:知识点分析:1.Java基础语法(变量、数据类型、运算符、流程控制、函数等)。2.Java集合框架,如List、Map等。3.异常处理机制,如try-catch块。4.数组和字符串操作。5.对象和类,包括静态方法、构造方法、实例方法等等。二......
  • 第三次总结性blog
    目录 1.前言2.设计与分析3.踩坑心得4.改进建议5.总结 1.前言题目集8课程成绩统计程序-1题目集9统计Java程序中关键词的出现次数题目集10容器-HashMap-检索容器-HashMap-排序课程成绩统计程序-2动物发声模拟器......