起因

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

    JAVASE和JAVAEE的区别 JavaEE: Java Enterprise Edition,Java企业版,多用于企业级开发,包括web开发等等.企业版本帮助开发和部署可移植.健壮.可伸缩切安全 ...

  2. 【Vue项目】尚品汇（六）ShopCar组件开发 购物车模块

    4 购物车 4.1 购物车商品数量控制 Detail\index.vue <div class="cartWrap"> <div class="cont ...

  3. 【SpringMVC】(二)RESTFul

    RESTFul RestFul简介 REST:Representational State Transfer,表现层资源状态转移 资源:资源是一种看待服务器的方式 资源的表述:资源的表述是资源在某个特 ...

  4. c++基本数据结构

    基本数据结构: 一.线性表 1.顺序结构 线性表可以用普通的一维数组存储. 你可以让线性表可以完成以下操作(代码实现很简单,这里不再赘述): 返回元素个数. 判断线性表是否为空. 得到位置为p的元素. ...

  5. .NET Web入门到高级路线（新版本）

    .NET Web入门到高级路线 C# 基础语法 .NET Core 基础知识 ASP.NET Core基础知识概述 Blazor ASP.NET Core 官方文档 ORM FreeSql Entit ...

  6. node安装node-sass

    安装node-sass使用node版本不能太高,否则会报错 checking for Python executable "C:\Program Files\python" in ...

  7. Python_13 接口测试openpyxl和表操作

    一.openpyxl 安装   pip install openpyxl  在Terminal中输入 excel操作步骤 找到目标excel 打开 读取数据.编辑excel单元格 保存 关闭 open ...

  8. vmware-ubuntu 设置共享目录

    VMware可以通过右上方菜单,管理-虚拟机设置,进入共享文件夹设置界面: vmware设置共享目录,重新启动windows,偶尔会失效.可以按下面步骤重新设置下,copy就行 查询是否存在已挂载的文 ...

  9. 【Ubuntu】4.挂载/连接VM共享文件夹

    第一步 首先需要在虚拟机设置中开启共享文件夹 第二步 修改fstab文件自动挂载 如果您想要自动挂载共享文件夹,可以编辑/etc/fstab文件并添加以下内容:(二选一即可,推荐) sudo gedi ...

  10. 【Azure 媒体服务】Media Service的编码示例 -- 创建缩略图子画面的.NET代码调试问题

    问题描述 在中国区Azure上,使用Media Service服务,想要使用.NET的代码来对上传视频创建缩略图(Thumbnail) . 通过官网文档(https://docs.azure.cn/z ...