起因

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

    1.打开控制面板 2.点击程序和功能 3.点击打开或关闭windows功能 4.等候一分钟左右 5.勾选telnet选项 6.测试telnet 7.如果通的话,弹出telnet窗口,按住"C ...

  2. 随手记：lnmp 安装完 redis 后无法全局操作

     说明redis-server不是全局命令,那么假如到全局即可 假设redis安装目录是:/usr/local/redis/bin/redis-cli ln -s /usr/local/redis/b ...

  3. Vulnhub Joy Walkthrough

    Recon 这台靶机对枚举的要求较高,如果枚举不出有用的信息可能无法进一步展开,我们首先进行普通的扫描. ┌──(kali㉿kali)-[~/Labs/Joy/80] └─$ sudo nmap -s ...

  4. Redis（一）五种基本数据类型

    1 NoSQl数据库 1.1 技术的发展 技术的分类: ①解决功能性问题:javase ②解决扩展性问题:框架 ③解决性能问题:redis 1.2 NoSQL数据库概述 NoSQL(Not Only ...

  5. vue项目webpack打包

    之前一篇随笔写到vue多环境打包环境配置:https://www.cnblogs.com/shun1015/p/13411636.html 1.区分vue脚手架版本,版本不同,项目结构不同,多环境变量 ...

  6. 2023-04-04：使用 Golang 和 ffmpeg-go 库实现 demuxing_decoding.c，轻松掌握音视频分离解码技巧。

    2023-04-04:使用 Golang 和 ffmpeg-go 库实现 demuxing_decoding.c,轻松掌握音视频分离解码技巧. 答案2023-04-05: 使用github/moonf ...

  7. 2020-10-02：golang如何写一个插件？

    福哥答案2020-10-02:#福大大架构师每日一题#简单回答:buildmode=plugin plugin.Openp.Lookup [中级回答:](https://www.zhihu.com/q ...

  8. 2020-12-24：MQ中，如何保证消息不丢失？

    福哥答案2020-12-24: 生产者丢失消息:如网络传输中丢失消息.MQ 发生异常未成功接收消息等情况. 解决办法:主流的 MQ 都有确认或事务机制,可以保证生产者将消息送达到 MQ.如 Rabbi ...

  9. 使用4G通信模块和MQTT协议，完成物联网设备开发。

    使用4G通信模块和MQTT协议,完成物联网设备开发. (1)安装并使用4G模块通信模块,建立microPython开发环境: (2)使用提供的Demo开发例程,使用MQTT传输协议连接阿里或腾讯网站, ...

  10. 企业研发效能度量利器，华为云发布CodeArts Board看板服务

    摘要:华为云CodeArts Board正式上线,欢迎体验. 本文分享自华为云社区<企业研发效能度量利器,华为云发布CodeArts Board看板服务>,作者:华为云头条. 数字化时代, ...