起因

很早前我就有过搭建个人博客的想法，但是我希望使用纯前端实现，这样就不需要付出额外的后端维护成本，维护成本又低，而且更加安全。网上也有很多博客框架但是也不符合我的需求，所以我使用了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. 实现和CSS一样的easing动画？直接看Mozilla、Chromium源码!

    前言 在上一篇丝滑的贝塞尔曲线:从数学原理到应用介绍贝塞尔曲线实现动画时给自己留了一个坑,实现的动画效果和CSS的transition-timing-function: cubic-bezier差别较 ...

  2. 二进制安装Kubernetes（k8s） v1.24.3 IPv4/IPv6双栈

    二进制安装Kubernetes(k8s) v1.24.3 IPv4/IPv6双栈 Kubernetes 开源不易,帮忙点个star,谢谢了 介绍 kubernetes(k8s)二进制高可用安装部署,支 ...

  3. python之爬虫三

    20xpath入门 在编写爬虫程序的过程中提取信息是非常重要的环节,但是有时使用正则表达式无法匹配到想要的信息,或者书写起来非常麻烦,此时就需要用另外一种数据解析方法,也就是本节要介绍的 Xpath ...

  4. ChatGPT研究报告：AIGC带来新一轮范式转移

    以ChatGPT为代表的AIGC(人工智能生成内容)将成为新一轮范式转移的开始. 本文约4000字,目标是快速建立AIGC知识体系,含有大量的计算专业名词,建议阅读同时扩展搜索. 一.行业现状 1.概 ...

  5. 【贪心算法】NO134 加油站

    134. 加油站 在一条环路上有 n 个加油站,其中第 i 个加油站有汽油 gas[i] 升. 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i+1 个加油站需要消耗汽油 cost[i] 升 ...

  6. 设计模式之[构建者模式(Builder)]-C#

    说明:构建一个大对象时,可以分解成一个部分一个部分的构建,比如一台电脑由CUP.内存.主板.屏幕等,这些配件本身就是一个复杂的制造过程,一个一个构建后然后才组装成一台新的电脑. 步骤 1.定义要构建的 ...

  7. 统计机器学习-Introduction to Statistical Learning-阅读笔记-CH4-Classification

    response variable: quantitative qualitative / categorical methods for classification first predict t ...

  8. 笔记九：线程间的通信(pthread_create()和pthread_self())

    linux高级编程之线程间的通信:(pthread_create().pthread_self()) 1.线程概念        线程包含了表示进程内执行环境必须得信息,其中包括进程中标识线程的线程I ...

  9. Python-​​pprint的简单使用

    ​​Data pretty printer 一.简介​ ​​print()​和​​pprint()​都是python的打印模块,功能基本一样,唯一的区别就是​​pprint()​模块打印出来的数据结构 ...

  10. 2021-11-15：四数相加 II。给你四个整数数组 nums1、nums2、nums3 和 nums4 ，数组长度都是 n ，请你计算有多少个元组 (i, j, k, l) 能满足：0 ＜= i,

    2021-11-15:四数相加 II.给你四个整数数组 nums1.nums2.nums3 和 nums4 ,数组长度都是 n ,请你计算有多少个元组 (i, j, k, l) 能满足:0 <= ...