起因

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

    HTTP协议 四大特性 基于请求端响应 ​ 客户端发送请求,服务端才响应,服务端不会主动给客户端发送响应. 基于TCP/IP作用于应用层之上的协议 ​ 此协议属于应用层 无状态 ​ 服务端不会保存客户 ...

  2. 使用二进制方式安装Docker

    长期使用安装工具进行安装docker,今天用二进制方式手动安装一下docker环境. 二进制包下载地址:https://download.docker.com/linux/static/stable/ ...

  3. pysimplegui之常用元素介绍

    1文本元素 | T == Txt == Text 2多行文本sg.Multiline('This is what a Multi-line Text Element looks like', size ...

  4. vmware中安装windows11系统

    1.官网下载windwos11镜像(点击跳转下载) 2.打开vmware,创建新的虚拟机 3.选择典型方便快捷 4.选择安装程序光盘文件,点击浏览选择刚刚下载好的iso镜像 5.选择windows版本 ...

  5. 【Vue】二

    一个第三方js处理类库 BootCDN Vue过滤器 Date.now() 获取时间戳 Date.now() 1652411231222 计算属性实现 <body> <div id= ...

  6. 第三方接口调用httpUtils

    1.GET 请求 public static JSONObject getHttpGetResp(String url, String authorization, String title) { H ...

  7. 真实场景sql优化持续更新（老司机必备）

    概述 下述场景,均来自实际产品线上经验,出于保密考量,所有需求场景都是仿造的,模拟遇到过的真实场景. 场景一: 统计数据(Order by 不具备唯一性导致的分页数据混乱) 需求 在实际业务场景中,我 ...

  8. vue2.x/vue3.0中使用ts

    vue2.x(vue-cli3)中使用ts      https://www.jianshu.com/p/3cbcdd766295 https://www.cnblogs.com/xiaohuizha ...

  9. 2023-03-27：avio_list_dir.c 是 FFmpeg 库自带的一个示例程序，它提供了列出目录中所有文件和子目录的功能，请用go语言改写。

    2023-03-27:avio_list_dir.c 是 FFmpeg 库自带的一个示例程序,它提供了列出目录中所有文件和子目录的功能,请用go语言改写. 答案2023-03-27: 这段代码实现了通 ...

  10. 2023-03-15：屏幕录制并且显示视频，不要用命令。代码用go语言编写。

    2023-03-15:屏幕录制并且显示视频,不要用命令.代码用go语言编写. 答案2023-03-15: 使用moonfdd/ffmpeg-go和moonfdd/sdl2-go库来实现屏幕录制并显示视 ...