- 发布文章
一款基于Next.js开箱即用功能最丰富的博客模板，你绝对值得拥有
- 作者
- 作者
- Jack Chen @懒人码农
前言
今天主要给大家介绍一款基于Next.js新版个人博客功能最丰富的 Markdown 模板。这是一个 Next.js+TailwindCSS 博客入门模板。开箱即用，配置了最新技术，使技术写作变得轻而易举。易于配置和定制，非常适合替代现有的 Jekyll 和 Hugo 个人博客。基于带有 React Server 组件的 Next App 目录，并使用 Contentlayer 来管理 Markdown 内容。
一、项目介绍
随着 Web 技术的不断发展，越来越多的人选择通过搭建个人博客来分享知识、记录生活。Next.js 作为一个流行的 React 框架，提供了静态网站生成（SSG）、服务端渲染（SSR）等功能，非常适合用于搭建博客。对于想学习使用 Next.js + React + TailwindCSS 技术来开发项目的朋友们来说也是值得参考和学习的，大家用它来做参考是完全没错的，里面的功能非常丰富，能够让大家借鉴个够，用来学习也是非常不错。
二、技术栈
- Next.js v14：Next.js 的开发体验通常被认为是它的主要优点之一，因为它简化了许多传统上需要手动配置的部分，例如路由和代码拆分。这使得开发者可以专注于编写应用逻辑，而不是花费过多时间在构建配置上。由于其灵活性和性能，Next.js 已经被许多企业用于构建生产级的网站和应用。
- React v18：用于构建用户界面的 JavaScript 库。它主要用于构建单页面应用程序（SPA），可以轻松地创建交互性强、快速响应的用户界面。
- TailwindCSS v3：主色属性轻松自定义样式。
- TypeScript：Next.js 提供了对 TypeScript 的内置支持，无需额外的配置。
- MDX：在 Markdown 文档中编写 JSX。
- 轻量级，首次加载 JS 文件大小85KB。
- 适合移动设备的视图
- 昼夜主题切换
- 使用 next/font 进行字体优化
- 与 pliny 集成，提供：
- 多种分析选项，包括 Umami、Plausible、Simple Analytics、Posthog 和 Google Analytics
- 通过 Giscus、Utterances 或 Disqus 发表评论
- 支持 Mailchimp、Buttondown、Convertkit、Klaviyo、Revue 和 Emailoctopus 的时事通讯 API 和组件
- 使用 Kbar 或 Algolia 进行命令调色板搜索
- 通过 rehype-prism-plus 使用行号和行高亮显示的服务器端语法
- 通过 KaTeX 支持数学显示
- 通过 next/image 自动优化图像
- 支持标签 - 每个唯一的标签都将有自己的页面
- 支持多个作者
- 支持 SEO、RSS feed、站点地图等
三、运行步骤
解压之后导入VSCode中，如下。
打开终端输入以下命令进行安装相关依赖：
# node版本v18+
yarn
安装依赖成功后再在终端输入以下命令启动运行即可：
yarn dev
运行成功之后，访问如下地址即可：
构建命令如下：
yarn build
当然，急着看的朋友也可以访问如下在线地址：
四、部署上线
完成开发后，你可以使用vercel工具将你的博客部署到云端。你也可以选择将项目部署到自己的服务器上。
使用 Vercel 快速部署
使用 github 账户注册登录 Vercel 官网，授权访问该仓库，即可快速部署，部署完即可访问，还能看到部署日志。
访问地址：https://web3-tailwind-nextjs-blog.vercel.app
部署到自己的服务器
PM2 是 node 进程管理工具，可以利用它来简化很多 node 应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。
这里假设服务上使用pm2来做守护进程，这里简单说一下配置文件怎么自动生成。服务器上先安装pm2只需要简单的执行npm i -g pm2命令即可，在项目根目录下再执行pm2 init命令，会自动生成配置文件ecosystem.config.js。
apps，要启动的应用的内容，这里是一个数组，支持一次性配置多个。name，应用的名称，会显示在pm2的列表中。script，启动脚本的位置。这里默认使用 node 启动，所有就不要写其他类型的脚本了。instances，应用启动实例个数，仅在 cluster 模式有效，默认为 fork，用于负载均衡。autorestart，开启自动重启。watch，监控变化的目录，一旦变化，自动重启。max_memory_restart，最大限制内存量，超出则重启。
这里简单说明一下常用命令：
pm2 start ecosystem.config.js，在根目录执行，使用配置文件启动项目。pm2 delete 0，删除第0个项目，序号0也可以替换成具体的配置文件中的name值。pm2 restart 0，重启第0个项目，序号0也可以替换成具体的配置文件中的name值。pm2 logs，查看所有日志。pm2 info 0，查看第0个项目的信息。
五、项目演示
源码大家可以去github上面自行下载即可！地址如下：
https://github.com/jackchen0120/web3-tailwind-nextjs-blog
六、总结
使用 Next.js 开源项目构建个人博客是一个简单而高效的过程。Next.js 提供了许多内置的功能，使得您可以专注于实现博客的核心功能，而无需担心底层的 Web 技术细节。通过遵循本文的步骤，您将能够轻松地构建和部署一个功能完善的个人博客。如若大家有遇到技术方面的问题，也可以关注我，大家一起交流讨论。